Sprites Phaser JS

1

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;
            }
        }
    
asked by anonymous 09.08.2017 / 23:50

1 answer

0

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

player.frame = 4;
    
21.03.2018 / 12:29