Adding sprite in Phaser js

Question

I need to know how to add the 2nd, 3rd, 4th rows of this sprite image for the left, right and upwards(top) movement correspondingly.

Below code is for bottom movement and as its the first row in sprite, I am able to move it.

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

Please help me figure out how to include the 2nd row onwards.

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 the extra animations the way you've done for bottom:

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've just guessed the frame numbers above, you'll need to correct them to be whatever you actually need. But once you've done this, you can just call play on the animation keys.

Answer 2

Change 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 capture cursor inputs in your create() function:

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

Tested it and made it work. Sprite sheet is not 100% correct, but it looks ok.