CODEWITHSUNDEEP
javascriptspritephaser-frameworksprite-sheet
hannacreed
hannacreed

Reputation: 669

Unable to Animate Sprite in Phaser.js

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?

Here is my Image, it is 256x256

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

}

Upvotes: 1

Views: 8861

Answers (2)

BdR
BdR

Reputation: 3058

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.

Upvotes: 2

User 987
User 987

Reputation: 758

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?

Upvotes: 2

Related Questions