代码之家 › 专栏 › 技术社区 › hannacreed

带有箭头键的精灵图纸动画

sprite-sheet sprite animation html javascript

hannacreed · 技术社区 · 8 年前

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

请帮助我用这段代码,当我按下不同的键时,用不同的行来设置我的角色的动画,并且当我放开一个键时,能够停止动画。

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

1 回复 | 直到 8 年前

Thomas 8 年前

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);
}