I have a problem with the animation of my character using sprite, I have a sprite with 7 frames of 100x90 for animation left and 7 frames of 100x90 for animation right, the problem is precisely in organizing that sprite and its animation, on their website has an example with a sprite of only 4 frames and has not explaining how to position the same, if it has I have not found.
Here is a print of how the game is:
I wanted a way to organize this sprite, set which frame will start etc ... Here is my current code:
var game = new Phaser.Game(1300, 768, Phaser.AUTO, '', {preload: preload, create: create, update: update});
var player;
var cursors;
function preload() {
game.load.image('bg', 'assets/img/bg.png');
game.load.spritesheet('player', 'assets/sprites/knight01.png', 100, 90);
}
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
game.add.sprite(0, 0, 'bg');
player = game.add.sprite(32, game.world.height - 50, 'player');
game.physics.arcade.enable(player);
player.frame = 3;
player.body.bounce.y = 0.2;
player.body.gravity.y = 300;
player.body.collideWorldBounds = true;
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [4, 5, 6, 7], 10, true);
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
player.body.velocity.x = 0;
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
{
// Stand still
player.animations.stop();
player.frame = 4;
}
// Allow the player to jump if they are touching the ground.
if (cursors.up.isDown && player.body.touching.down)
{
player.body.velocity.y = -300;
}
}