无法在 Phaser.js 中为 Sprite 设置动画

Question

我正在尝试使用 sprite sheet 通过箭头键移动角色，但它似乎不起作用。如果我将背景设置为大于 500、500，屏幕将随着角色移动，但我希望角色可以自由移动而背景不会随之移动。

我可以在我的代码中更改什么以使角色使用箭头键移动？并使动画真正起作用？

window.onload = function () {
  var game = new Phaser.Game(500, 500, Phaser.AUTO, 'phaser-example',{ preload: preload, create: create });

  function preload() {

    game.stage.backgroundColor = '#fc6b84';
    game.load.spritesheet('player', 'reddude.png', 64, 64);

  }

  function create() {

    // This simply creates a sprite using the player image we loaded above and positions it at 200 x 200
    var test = game.add.sprite(250, 250, 'player');
    player.animations.add('walk');
    player.anchor.setTo(0.5, 1);
    game.physics.arcade.enable(player);
    player.body.collideWorldBounds = true;


    addItems();
    addPlatforms();

    cursors = game.input.keyboard.createCurosrKeys();
    //game set up
  }

  function update() {
    game.physics.arcade.collide(player, platforms);
    game.physics.arcade.overlap(player, items, itemHandler);
    game.physics.arcade.overlap(player, badges, badgeHandler);
    player.body.velocity.x = 0;

    // is the left cursor key presssed?
    if (cursors.left.isDown) {
      player.animations.play('walk', 10, true);
      player.body.velocity.x = -50
      player.scale.x = - 1
    }
    // is the right cursor key pressed?
    else if (cursors.right.isDown) {
      player.animations.play('walk', 10, true);
      player.body.velocity.x = 50
      player.scale.x = 1
    }
    else if (cursors.up.isDown) {
      player.animations.play('walk', 10, true);
      player.body.velocity.y = 50
      player.scale.y = 1
    }
    else if (cursors.down.isDown) {
      player.animations.play('walk', 10, true);
      player.body.velocity.y = -50
      player.scale.y = -1
    }
    // player doesn't move
    else {
      player.animations.stop();
    }
  }

}

Answer 1

您可以让相机跟随您的玩家。首先创建播放器精灵，然后添加此行：

game.camera.follow(player);

您可以在此 link 上找到您需要的内容。 https://phaser.io/examples/v2/camera/basic-follow

此外，您不应该在创建函数中将变量声明为 "var player" 而不是 "var test" 吗？

Answer 2

您添加了一个名为 test 的精灵变量，但是您将动画添加到一个名为 player 的变量中。这可能是您犯的错误，我的意思是 var player 在哪里定义？

至于要使不同的动画起作用，您必须将每个动画分别添加到您的 sprite 变量中。您必须指出哪些帧用于 "walking left" 动画，哪些帧用于 "walking up" 动画等，并创建单独的动画。像这样：

// define variable globally, outside "create()", so then "update" can also use the variable
var playersprite;

// create a sprite in the "create()" function
// note: playersprite is the variable name and 'player' is the spritesheet name string
playersprite = game.add.sprite(250, 250, 'player');

// add animations to sprite
playersprite.animations.add('walk_down',  [0,1,2,3]);
playersprite.animations.add('walk_left',  [4,5,6,7]);
playersprite.animations.add('walk_right', [8,9,10,11]);
playersprite.animations.add('walk_up',    [12,13,14,15]);

然后根据玩家移动的方向，播放不同的动画。

// when LEFT cursor key presssed
if (cursors.left.isDown) {
    playersprite.animations.play('walk_left', 10, true);
    // etc.

无法在 Phaser.js 中为 Sprite 设置动画

Unable to Animate Sprite in Phaser.js

javascript

sprite

sprite-sheet

phaser-framework