Phaser 3 обновить картинку

Question

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>
<div id="game"></div>
<p>Za dopomohoyu klavish zi strilkamy peresuvaytesya ta yizhte burhery.</p>
<script>
    class mainScene {
        preload() {
            this.load.image('playerW', 'assets/playerW.png');
            this.load.image('burger', 'assets/burger.png');
        }

        create() {
            this.player = this.physics.add.sprite(100, 100, 'playerW');
            this.burger = this.physics.add.sprite(300, 200, 'burger');
            this.playerB = this.physics.add.sprite('playerB');
            this.score = 0;
            let style = { font: '20px Arial', fill: '#fff' };
            this.scoreText = this.add.text(20, 20, 'score: ' + this.score, style);

            this.arrow = this.input.keyboard.createCursorKeys();
        }

        update() { //якщо торкаюся бургера то щнову викликається метод hit
            if (this.physics.overlap(this.player, this.burger)) {
                this.hit();
            }

            if (this.arrow.right.isDown) { //обробка по горизонт рух
                this.player.x += 3;
            } else if (this.arrow.left.isDown) {
                this.player.x -= 3;
            }

            if (this.arrow.down.isDown) {
                this.player.y += 3;
            } else if (this.arrow.up.isDown) {
                this.player.y -= 3;
            }

            if (this.score > 30 ){
                
            }
        }

        hit() {
            // Змінюєю положення x та y бургера рандомно
            this.burger.x = Phaser.Math.Between(100, 600);
            this.burger.y = Phaser.Math.Between(100, 200);

            this.score += 10;
            this.scoreText.setText('score: ' + this.score);

            this.tweens.add({    //анімація
                targets: this.player,
                duration: 200,
                scaleX: 1.2,
                scaleY: 1.2,
                yoyo: true,
            });
        }
    }

    new Phaser.Game({
        width: 700,
        height: 300,
        backgroundColor: '#3498db',
        scene: mainScene,
        physics: { default: 'arcade' },
        parent: 'game',
    });

    function updatePlayer(){

    }

</script>

</body>
</html>

Как правильно обновить картинку. Я хочу что бы при this.score > 30 картинка персонажа player изменилась с playerW на playerB

Answer 1

Обычно для таких целей картинки с разными состояниями одного игрока склеивают в одну картинку, это называется spritesheet. Эта картинка делится на фреймы и для разных состояний отображаются разные части этой одной картинки.

В phaser это реализовано.

В игру картинка подгружается таким образом:

this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 }

А сама картинка должна выглядеть примерно так:

Answer 2

Вы сможете использовать метод setTexture следующим образом: this.player.setTexture('playerB');

БЛОГ НА HUSL

Phaser 3 обновить картинку

Ответы (2 шт):