CODEWITHSUNDEEP
javascriptphaser-framework
abhiklpm
abhiklpm

Reputation: 1653

Adding sprite in Phaser js

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) : 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');
        }
}

Upvotes: 8

Views: 10684

Answers (3)

elad silver
elad silver

Reputation: 9695

to make things easy my approch is:

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

Upvotes: 2

Zaute
Zaute

Reputation: 95

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.

Upvotes: 3

PhotonStorm
PhotonStorm

Reputation: 3385

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.

Upvotes: 12

Related Questions