Search code examples
javascripthtmlanimationspritesprite-sheet

Sprite Sheet animation with arrow keys

I can't seem to figure out how to make the animations work when moving the character, when I press a key down, the animation plays through the whole sprite sheet instead of one row, the animation also doesn't stop when I let off of the key. I want to be able to make the animation work in different rows, for example if I press the down arrow I want the first row to play only, and when I let go I want it to stop.

Please help me with this code to animate my character with the different rows when I press different keys, and be able to stop the animation when I let go of a key.

My Image as you can see, the first row of the image is for when you press the down key, second row for left key, third row for right key, and fourth row for up key.

I am using a the Phaser javascript framework by Photon Storm.

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>
Solution

  • first, you need to define multiple animations in create(). One for each direction.

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

    And then you need to play the particular animation for each direction in 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);
}