Реагировать Pixi отзывчивый этап - PullRequest
Новая
       2

Реагировать Pixi отзывчивый этап

0 голосов
/ 09 января 2020

Я пытаюсь сделать мою сцену отзывчивой, но я не совсем уверен, как это сделать при использовании библиотеки реагирования: 

<Stage options={{backgroundColor: 0xffffff, radius: 1, width: 736, height: 414}}>

    <Sprite image="baseBike.png" x={100} y={100}/>

    <Sprite image={this.state.saddle.image} x={this.state.saddle.x} y={this.state.saddle.y}
            scale={{x: this.state.saddle.scale.x, y: this.state.saddle.scale.y}}/>


    <Sprite image={this.state.steering.image} x={this.state.steering.x}
            y={this.state.steering.y}
            scale={{x: this.state.steering.scale.x, y: this.state.steering.scale.y}}/>
    <Sprite image="circle.png" x={290} y={90} scale={{x: 1, y: 1}}
            interactive={true}
            pointerdown={() => {
                this.toogleMenu("saddle");
            }}
    />
    <Sprite image="circle.png" x={530} y={130} scale={{x: 1, y: 1}}
            interactive={true}
            pointerdown={() => {
                this.toogleMenu("steering");
            }}
    />

</Stage>

Кто-нибудь знает, как убедиться, что Sprites и Stage отзывчив?

1 Ответ

1 голос
/ 10 января 2020

Есть много способов добиться этого, но по моему опыту изменение размеров ваших объектов по отдельности окажется большой болью, когда ваше приложение начнет расти.

Самый простой и последовательный способ, который я нашел до сих пор, - это максимально использовать концепцию контейнеров.

Например, ваша сцена - это контейнер. При добавлении спрайтов или каких-либо других объектов они будут позиционироваться и масштабироваться относительно этапа, к которому они добавляются.

Старайтесь применять любые шкалы и позиции непосредственно только к сцене. Взгляните на статью ниже: https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html

Он предлагает несколько вариантов изменения размера только холста, которые будут действовать и для его детей. Надеюсь, это поможет

...