無法在Phaser.js中為Sprite設置動畫

Question

我試圖使用精靈表用箭頭鍵移動一個字符，但它似乎沒有工作。 如果我將背景設置為大於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

您可以讓相機跟隨您的播放器。 第一個crate播放器精靈然后添加這一行：

game.camera.follow(player);

您可以在此鏈接中找到所需內容。 https://phaser.io/examples/v2/camera/basic-follow

另外，你不應該在create function中將變量聲明為“var player”而不是“var test”嗎？

Answer 2

添加一個名為test的sprite變量，但是將動畫添加到名為player的變量中。 這可能是你犯的錯誤，我的意思是var player定義在哪里？

至於要使用的不同動畫，您必須將每個動畫分別添加到您的精靈變量中。 您必須指出哪些幀用於“向左走”動畫，哪些幀用於“向上走動”動畫等，並創建單獨的動畫。 像這樣的東西：

// 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.