javascript 移相器 3 动画

Question

我想在 Phaser 3 中制作一个简单的游戏。我有一个播放器 class，我在 gameScene 的创建函数中调用它。

玩家class：

class Player extends Phaser.Physics.Arcade.Sprite {
    constructor(scene, x, y, key, frame) {

        super(scene, x, y, key, frame);
        //the scene this game object will be added to

        this.scene = scene;
        //movement speed
        this.velocity = 500;
        //enable physics
        this.scene.physics.world.enable(this);
        //collisions with objects and player fix
        this.setImmovable(false);
        //bigger player
        this.setScale(2.5);
        //fix screen borders
        this.setCollideWorldBounds(true);
        //add player
        this.scene.add.existing(this);

        this.scene.cameras.main.startFollow(this);


        this.setVisible(true);
        // this.anims.create({
        //     key: 'walk-left',
        //     repeat: 0,
        //     frameRate: 10,
        //     frames: this.anims.generateFrameNames('playersoldier', {start: 3, end: 5})
        // });




    }
    update(cursors) {
        //controls
        if (cursors.left.isDown) {
            this.body.setVelocityX(-this.velocity);
            // this.walkLeft();

        } else if (cursors.right.isDown){
            this.body.setVelocityX(this.velocity);
        }

        if (cursors.up.isDown) {
            this.body.setVelocityY(-this.velocity);
        } else if (cursors.down.isDown){
            this.body.setVelocityY(this.velocity);
        }
    }

//     walkLeft(){
//         this.playersoldier = this.add.sprite(100, 100, 'playersoldier', 3);
//         this.playersoldier.setScale(5);
//         this.anims.create({
//             key: 'walk-left',
//             repeat: 0,
//             frameRate: 10,
//             frames: this.anims.generateFrameNames('playersoldier', {start: 3, end: 5})
//         });
//         this.playersoldier.play('walk-left', true);
//     }
 }

这些我在Gamescene文件中调用了mz create函数

    createPlayer(){
        this.player = new Player(this, 500, 100, 'playersoldier');
    }

    createInput(){
        this.cursors = this.input.keyboard.createCursorKeys();
    }

我只是无法让它移动 :( 有一些注释代码不起作用。并抛出错误，说我无法调用 .sprite 等。当我单独尝试动画时。没有播放器和控件，它工作正常。我只是不知道如何将它实现到播放器对象。有什么建议么？我很乐意提供任何有帮助的建议。

非常感谢您的宝贵时间。

Answer 1

好吧，我终于找到了解决办法。如果有人会遇到这个问题。您所要做的就是将 super.update{} 添加到要设置动画的播放器 class 的更新函数中。 scene.anims.create({}) 在构造函数中被调用。在更新功能中，当按下键时，您将添加 this.scene.anims.play('animation')

class Player extends Phaser.Physics.Arcade.Sprite {
    constructor(scene, x, y, key, frame) {

        super(scene, x, y, key, frame);
        //the scene this game object will be added to

        var klic = key;

        this.scene = scene;
        this.velocity = 500;
        this.scene.physics.world.enable(this);
        this.setImmovable(false);
        this.setScale(2.5);
        this.setCollideWorldBounds(true);
        this.scene.add.existing(this);

        scene.anims.create({
            key: 'player-left',
            frames: scene.anims.generateFrameNames(klic, {
                frameRate: 0,
                start: 3,
                end: 5,
                repeat: -1
            }),
        })

        scene.anims.create({
            key: 'player-down',
            frames: scene.anims.generateFrameNames(klic, {
                frameRate: 0,
                start: 0,
                end: 2,
                repeat: -1
            }),
        })

        scene.anims.create({
            key: 'player-right',
            frames: scene.anims.generateFrameNames(klic, {
                frameRate: 0,
                start: 6,
                end: 8,
                repeat: -1
            }),
        })

        scene.anims.create({
            key: 'player-up',
            frames: scene.anims.generateFrameNames(klic, {
                frameRate: 0,
                start: 9,
                end: 11,
                repeat: -1
            }),
        })

        this.scene.cameras.main.startFollow(this);


        this.setVisible(true);

    }

    update(cursors) {
        super.update
        {
            this.body.setVelocity(0);
            //controls

            if (cursors.left.isDown) {
                this.body.setVelocityX(-this.velocity);
                this.anims.play('player-left', true);

            } else if (cursors.right.isDown) {
                this.body.setVelocityX(this.velocity);
                this.anims.play('player-right', true);
            }

            if (cursors.up.isDown) {
                this.body.setVelocityY(-this.velocity);
                this.anims.play('player-up', true);
            } else if (cursors.down.isDown) {
                this.body.setVelocityY(this.velocity);
                this.anims.play('player-down', true);
            }
        }
    }
 }

这就是它现在的样子并且它正在工作:)

javascript 移相器 3 动画

javascript phaser 3 animation

javascript

phaser-framework