Sprites Phaser JS

I am having a problem in the animation of my character using sprite, I have a sprite with 7 frames of 100x90 for left animation and 7 frames of 100x90 for right animation, the problem is precisely in organizing this sprite and its animation, on their website has an example with a sprite of only 4 frames and does not have explaining how to position the same, if you have I have not found.

Follows a print of how the game is : insert the description of the image here

Wanted a way to organize this sprite, set which frame will start, etc... Here goes 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;
            }
        }
Author: Mateus Veloso, 2017-08-09

1 answers

To change the initial frame you need to change this line in the update function:

player.frame = 4;
 0
Author: tomasantunes, 2018-03-21 11:29:54