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 player sprite然后添加这一行：

game.camera.follow(player);

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

另外，不应该将变量声明为＆＃34; var player＆＃34;而不是＆＃34; var test＆＃34;内部创建功能？

Answer 2

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

至于要使用的不同动画，你必须将每个动画分别添加到你的精灵变量中。你必须指出哪些帧是用于＆＃34;向左走＆＃34;动画，框架为＆＃34;走上＆＃34;动画等，并创建单独的动画。像这样：

// 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中动画精灵

2 个答案: