Adding a sprite to Phaser js

Question

I need to know how to add the 2nd, 3rd, 4th lines of this sprite to move left, right and up (above), respectively.

Below is the code for moving below, and as its first line in the sprite, I can move it.

If I create a long sprite horizontally, I can achieve it, is there any other way?

Please help me figure out how to include the second line ahead.

Sprite image (user / player) :

function preload(){ myGame.load.spritesheet('user', 'user4.png', 95, 158, 12); } var player; function create(){ player = myGame.add.sprite(500, 100, 'user'); myGame.physics.arcade.enable(player); player.animations.add('bottom', [0,1,2,3,4,5,6,7,8,9,10,11], 12, true, true); } function update(){ if (cursors.left.isDown) { // Move to the left player.body.velocity.x = -150; player.animations.play('left'); } else if (cursors.right.isDown) { // Move to the right player.body.velocity.x = 150; player.animations.play('right'); } else if (cursors.up.isDown) { // Move to the right player.body.velocity.y = -50; player.animations.play('top'); } else if (cursors.down.isDown) { // Move to the right player.body.velocity.y = 50; player.animations.play('bottom'); } } 

Answer 1

Just define additional animations as you did below:

player.animations.add('bottom', [0,1,2,3,4,5,6,7,8,9,10,11], 12, true, true); player.animations.add('left', [12,13,14,15,16,17,18,19,20], 12, true, true); player.animations.add('right', [21,22,23,24,25,26,27,28,29], 12, true, true);

And so on. Obviously, I just figured out the number of frames above, you will need to fix them to be what you really need. But once you do, you can just call play on the animation keys.

Answer 2

Change the preload to this:

 function preload() { game.load.spritesheet('user', 'user4.png', 95, 158, 48); } 

and add animation for all directions:

  player.animations.add('bottom', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 12, true, true); player.animations.add('left', [12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23], 12, true, true); player.animations.add('right', [24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35], 12, true, true); player.animations.add('top', [36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47], 12, true, true); 

Also remember to write cursor inputs in your create () function:

  cursors = game.input.keyboard.createCursorKeys(); 

Tested and earned. The sprite sheet is not 100% correct, but it looks fine.

Answer 3

to facilitate my approach:

  animation_arr = ['idle', 'walk', 'jump', 'idle_towel', 'walk_towel', 'jump_towel' ]; for(var i=0; i < animation_arr.length; i++){ player.animations.add(animation_arr[i], [0+(i*10), 1+(i*10), 2+(i*10), 3+(i*10), 4+(i*10), 5+(i*10), 6+(i*10), 7+(i*10), 8+(i*10), 9+(i*10)], 10, true); }