Sprites Phaser JS

Question

I have a problem in 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 this 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 you have I have not found.

Follow a screenshot of how the game is going :

I wanted a way to organize this Sprite, set which frame will start etc... Here’s 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;
            }
        }

Answer 1

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

player.frame = 4;