javascript - 带有方向键的 Sprite Sheet 动画

标签 javascript html animation sprite sprite-sheet

我似乎不知道如何让动画在移动 Angular 色时工作,当我按下一个键时,动画会播放整个 Sprite 表而不是一行,动画也不会停止我松开了 key 。我希望能够使动画在不同的行中工作,例如,如果我按下向下箭头,我希望仅播放第一行,当我松开时,我希望它停止。

请帮助我使用此代码,以便在我按下不同的键时使用不同的行为我的 Angular 色设置动画,并能够在我放开某个键时停止动画。

My Image 正如你所看到的,图像的第一行是当你按下向下键时,第二行是向左键,第三行是右键,第四行是向上键。

我正在使用 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>

最佳答案

首先,您需要在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);
}

关于javascript - 带有方向键的 Sprite Sheet 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45569580/

相关文章:

JavaScript 作用域问题

javascript - Jquery:fromcharcode() 将整数转换为字符的替代方法

javascript - Internet Explorer jQuery错误

jquery - 产品卡片标题每行高度相同问题

html - 如何增加 twitter bootstrap 下拉菜单的宽度?

objective-c - iOS触控,手势,动画

android - CardView翻转动画

python - fork 流图的 Matplotlib 动画

javascript - 从其他函数获取值(value) - Javascript

html - 缩小窗口时文本和图像困惑