Question

我似乎无法弄清楚如何在移动角色时使动画工作，当我按下一个键，动画播放整个精灵表而不是一行时，动画也不会停止时我放下了钥匙。我希望能够使动画在不同的行中工作，例如，如果我按下向下箭头，我只希望第一行播放，当我放手时，我希望它停止。

当我按下不同的键时，请帮我用这段代码用不同的行动画我的角色，并在我放开一把钥匙时停止动画。

如您所见，图像的第一行用于按下向下键，第二行用于左键，第三行用于右键，第四行用于向上键。

我正在使用Photon Storm的Phaser javascript框架。

JavaScript，game.js：

  var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { 
  preload: preload, create: create, update: update, render: render });

function preload() {

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

}

var player;
var cursors;

function create() {

  game.add.tileSprite(0, 0, 1920, 1920, 'background');

  game.world.setBounds(0, 0, 1920, 1920);

  game.physics.startSystem(Phaser.Physics.P2JS);

  player = game.add.sprite(game.world.centerX, game.world.centerY, 
 'player');

  game.physics.p2.enable(player);

  player.animations.add('walk');
  player.anchor.setTo(0.5, 1);

  cursors = game.input.keyboard.createCursorKeys();

  game.camera.follow(player);

}

function update() {

  player.body.setZeroVelocity();

  if (cursors.up.isDown)
  {
    player.animations.play('walk', 10, true);
    player.body.moveUp(100)
  }
  else if (cursors.down.isDown)
  {
    player.animations.play('walk', 10, true);
    player.body.moveDown(100);
  }

  if (cursors.left.isDown)
  {
    player.animations.play('walk', 10, true);
    player.body.velocity.x = -100;
  }
  else if (cursors.right.isDown)
  {
    player.animations.play('walk', 10, true);
    player.body.moveRight(100);
  }

}

function render() {

  game.debug.cameraInfo(game.camera, 32, 32);
  game.debug.spriteCoords(player, 32, 500);

}

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Simple Canvas Game</title>
    <style>
      html {
        background: black
      }
      canvas {
        margin: auto;
      }
    </style>
    </head>
    <body>
    <script src="phaser.js"></script>
       <script src="game.js"></script>
    </body>
</html>

Answer 1

首先，您需要在create()中定义多个动画。每个方向一个。

https://phaser.io/docs/2.6.2/Phaser.AnimationManager.html#add

player.animations.add('down',  [0,1,2,3]);
player.animations.add('left',  [4,5,6,7]);
player.animations.add('right', [8,9,10,11]);
player.animations.add('up',    [12,13,14,15]);

然后你需要在update()中为每个方向播放特定的动画：

https://phaser.io/docs/2.6.2/Phaser.AnimationManager.html#play
https://phaser.io/docs/2.6.2/Phaser.AnimationManager.html#stop

if (cursors.up.isDown){
  player.animations.play('up', 10, false);
  player.body.moveUp(100);
} else if (cursors.down.isDown) {
  player.animations.play('down', 10, false);
  player.body.moveDown(100);
} else if (cursors.left.isDown) {
  player.animations.play('left', 10, false);
  player.body.velocity.x = -100;
} else if (cursors.right.isDown) {
  player.animations.play('right', 10, false);
  player.body.moveRight(100);
} else {
  player.animations.stop(null, true);
}

带箭头键的精灵表动画

1 个答案: