Jump to content

Animation of sprite with multiple sheets


Recommended Posts

Hello I am trying make animations (top down 2D) where I have 4x4 images in one file (spritesheet) like this: http://prntscr.com/99yt7s


But I don't know how I can easy use for left,up,down, right movement. I must create this format: http://prntscr.com/99ytid


And use like this: 

game.load.spritesheet('player', 'assets/jedi.png', 32, 45); // Preload// createvar player = game.add.sprite(300, 300, 'player');player.animations.add('up', [12, 13, 14, 15], 10, true);  player.animations.add('left', [4, 5, 6, 7], 10, true);player.animations.add('down', [0, 1, 2, 3], 10, true);player.animations.add('right', [8, 9, 10, 11], 10, true);

Is there any way How to use one file with multiple animations not in one line, but at more lines ? (But for animations, not simple frames)


Thank you for any help :)

Link to comment
Share on other sites

Texture atlas are for a sheet with sprites of different sizes. @Hadik What you have is correct for the 4X4. You just need to call the animation to play. Look up cursor keys and when you press up call player.animations.play('up'). Here is my real working code:


In the create:

cursors = game.input.keyboard.createCursorKeys();game.physics.enable(player, Phaser.Physics.ARCADE);

In the update ( call movePlayer in the update):

function movePlayer(){        /* start velocity at 0     * get movement from key pressed    * move player with velocity    * play correct movement animation    */         player.body.velocity.x = 0;     player.body.velocity.y = 0;        if (cursors.right.isDown)    {               player.body.velocity.x = playerSpeed;                 player.animations.play('east');    }else if (cursors.left.isDown)    {               player.body.velocity.x = -playerSpeed;         player.animations.play('west');    }else if (cursors.up.isDown)    {               player.body.velocity.y = -playerSpeed;         player.animations.play('north');    }else if (cursors.down.isDown)    {               player.body.velocity.y = playerSpeed;         player.animations.play('south');    }else {                //stop the animation but keep player facing same direction        player.animations.stop();            }}
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...