Unable to Animate Sprite in Phaser.js

Question

I am trying to use a sprite sheet to move a character around with the arrow keys, but it doesn't seem to be working. If I set the background to be larger than 500, 500, the screen will move around along with the character, but I want the character to move around freely without the background moving with it.

What can I change in my code to make the character move by using the arrow keys? And make the animations actually work?

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

}

Your code is not working at all. Start with this one (https://jsfiddle.net/archierocks183/zygz2ksm/17/) and get it to a working stage to get better help — Sully, Aug 07 '17 at 21:37

User 987 · Answer 1 · 2017-08-08T13:25:52.260

2

You can make a camera follows your player. First crate player sprite then add this line:

game.camera.follow(player);

You can find on this link what you need. https://phaser.io/examples/v2/camera/basic-follow

Also, shouldn't you declare your variable as "var player" instead of "var test" inside create function?

edited Aug 08 '17 at 13:25

answered Aug 07 '17 at 22:26

User 987

628
5
16

thank you! that is what I needed! But now 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. – hannacreed Aug 08 '17 at 13:05
@hannacreed Im not sure if I understand you, it would be good that you post another question about second problem, and post code related only to character animation, then tell us what does not work as expected. – User 987 Aug 08 '17 at 13:31

score 2 · Accepted Answer · answered Aug 10 '17 at 07:24

You add a sprite variable called test, but you add the animation to a variable called player. This could be a mistake you've made, I mean where is var player defined?

As for the different animations to work, you have to add each animation separately to your sprite variable. You have to indicate which frames are for the "walking left" animation, which frames for the "walking up" animation etc. and create separate animations. Something like this:

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

And then depending on the direction player moving, play a different animation.

// when LEFT cursor key presssed
if (cursors.left.isDown) {
    playersprite.animations.play('walk_left', 10, true);
    // etc.

Unable to Animate Sprite in Phaser.js

2 Answers2