animation How to play, pause then contine animations?

SovietSenpai23 · November 10, 2018

This is how far I got. I want the animation(dragon-attack) to complete when the player hits the dragon and then continue the 'dragon-fly' animation. What would be a solution?

 function preload() {

            this.load.spritesheet('dragon', 'assets/demon-idle.png',
                {
                    frameWidth: 160, frameHeight: 144
                });

            this.load.spritesheet('dragon-attack', 'assets/demon-attack.png',
                {
                    frameWidth: 240, frameHeight: 192
                });
        }

function create() {
        dragon = this.physics.add.sprite(400, 300, 'dragon');
            dragon.setBounce(0.4);
            dragon.setCollideWorldBounds(true);
            dragon.setDisplaySize(100, 100);

            this.anims.create({
                key: 'dragon-attack',
                frames: this.anims.generateFrameNumbers('dragon-attack', { start: 0, end: 10 }),
                frameRate: 10,
                repeat: -1
            });
         this.anims.create({
                key: 'dragon-fly',
                frames: this.anims.generateFrameNumbers('dragon', { start: 0, end: 5 }),
                frameRate: 10,
                repeat: -1
            });
         this.physics.add.collider(player, dragon, meetsDragon, null, this);

}

function meetsDragon(player, dragon) {

            playerHealth -= 10;
            dragon.anims.play('dragon-attack', true);

        }

thanks for your help!

jest · November 10, 2018

so after dragon-attack finishes, after, you want the dragon-fly animation to play?


dragon.on("animationcomplete", ()=>{ //listen to when an animation completes, then run fly
          dragon.anims.play('dragon-fly")
}
//you would need to remove this afterwards though.

If the dragon-fly is the moving/idle state, you can run that on a loop by default and then when you run dragon-attack, it will return back to dragon-fly.

Edited November 10, 2018 by jest
fixed grammar

SovietSenpai23 · November 10, 2018

Thanks for your answer. Yes the dragon-fly is the idle state. How to do that looping u mentioned? I've tried putting it in the update() method but it didn't solve the problem. Can you show me please how to remove it? I've tried dragon.anims.remove(name) which didnt work out for me.

here is my full code:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>phaser</title>
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>

<body>

    <script type="text/javascript">

        var config = {
            type: Phaser.AUTO,
            width: 800,
            height: 600,
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: { y: 300 },
                    debug: false
                }
            },
            scene: {
                preload: preload,
                create: create,
                update: update
            }
        };

        var player;
        var platforms;
        var dragon;
        var cursors;
        var stars;
        var playerHealth = 100;
        var score = 0;
        var scoreText;
        var playerHealthText = 100;

        var game = new Phaser.Game(config);

        function preload() {
            this.load.image('sky', 'assets/sky.png');
            this.load.image('ground', 'assets/platform.png');
            this.load.image('star', 'assets/star.png');
            this.load.image('bomb', 'assets/bomb.png');
            this.load.spritesheet('dude',
                'assets/dude.png',
                {
                    frameWidth: 32, frameHeight: 48
                });
            this.load.spritesheet('dragon', 'assets/demon-idle.png',
                {
                    frameWidth: 160, frameHeight: 144
                });
                this.load.spritesheet('dragon-attack', 'assets/demon-attack.png',
                {
                    frameWidth: 240, frameHeight: 192
                });
        }


        function create() {
            this.add.image(400, 300, 'sky');

            platforms = this.physics.add.staticGroup();

            platforms.create(400, 568, 'ground').setScale(2).refreshBody();

            platforms.create(600, 400, 'ground');
            platforms.create(50, 250, 'ground');
            platforms.create(750, 220, 'ground');
            
            player = this.physics.add.sprite(100, 450, 'dude');

            player.setBounce(0.2);
            player.setCollideWorldBounds(true);

            dragon = this.physics.add.sprite(400, 300, 'dragon');
            dragon.setBounce(0.4);
            dragon.setCollideWorldBounds(true);
            dragon.setDisplaySize(100, 100);
            
            this.physics.add.collider(player, dragon, meetsDragon, null, this);

            this.anims.create({
                key: 'left',
                frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
                frameRate: 10,
                repeat: -1
            });

            this.anims.create({
                key: 'turn',
                frames: [{ key: 'dude', frame: 4 }],
                frameRate: 20
            });

            this.anims.create({
                key: 'right',
                frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
                frameRate: 10,
                repeat: -1
            });

            this.anims.create({
                key: 'dragon-fly',
                frames: this.anims.generateFrameNumbers('dragon', { start: 0, end: 5 }),
                frameRate: 10,
                repeat: -1
            });

             this.anims.create({
                key: 'dragon-attack',
                frames: this.anims.generateFrameNumbers('dragon-attack', { start: 0, end: 10 }),
                frameRate: 10,
                repeat: -1
            });

            stars = this.physics.add.group({
                key: 'star',
                repeat: 11,
                setXY: { x: 12, y: 0, stepX: 70 }
            });

            stars.children.iterate(function (child) {
                child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
            });

            bombs = this.physics.add.group();

            this.physics.add.collider(bombs, platforms);
            this.physics.add.collider(player, bombs, hitBomb, null, this);

            this.physics.add.collider(stars, platforms);
            this.physics.add.collider(player, platforms);
            this.physics.add.collider(dragon, platforms);

            this.physics.add.overlap(player, stars, collectStar, null, this);
            this.physics.add.collider(player, dragon, meetsDragon, null, this);

            cursors = this.input.keyboard.createCursorKeys();


            dragon.on("animationcomplete", () => {
                dragon.anims.play('dragon-fly');
            });
        }


        function meetsDragon(player, dragon) {
            dragon.anims.play('dragon-attack', true);
        }



        function update() {
            if (cursors.left.isDown) {
                player.setVelocityX(-160);
                player.anims.play('left', true);

            }
            else if (cursors.right.isDown) {
                player.setVelocityX(160);

                player.anims.play('right', true);
            }
            else {
                player.setVelocityX(0);

                player.anims.play('turn');
            }

            if (cursors.up.isDown && player.body.touching.down) {
                player.setVelocityY(-330);
            }

            dragon.anims.play('dragon-fly', true);
        }



        function collectStar(player, star) {
        }

        function hitBomb(player, bomb) {
        }


    </script>

</body>

</html>

jest · November 10, 2018

@SovietSenpai23

ahhh kk, didn't see the repeat. You can listen to "animationrepeat" instead because repeating animations will never complete.

dragon-fly, since you have the repeat: -1, there's no need to put it in a the update loop or any loop.

You can play the attack animation in the create() and then listen to "animationrepeat" ;

    dragon.once("animationrepeat", () => {
                dragon.anims.play('dragon-fly');
            });

This will return it back to the fly after it repeats attack once.

It will keep running this function when fly is repeating though you can use .once() instead of .on(); and you dont have to remove the listener.

How I would go about doing this is to keep track of if(dragon-atttack){ play(attack)} else{play(fly)} in the update loop.

If you want it in the update function you would need to keep track when the dragon is flying and when it is attacking.

SovietSenpai23 · November 12, 2018

Quote

How I would go about doing this is to keep track of if(dragon-atttack){ play(attack)} else{play(fly)} in the update loop.

If you want it in the update function you would need to keep track when the dragon is flying and when it is attacking.

THANKS! Its working now ?! For the record I post the working code:

// global variable
var dragonAttack = false;

        function meetsDragon(player, dragon) {
//...
            dragonAttack=true;
        }

function update() {
//...
  if (dragonAttack) {
        dragon.anims.play('dragon-attack', true);
        dragonAttack = false;
  } 
}

function create() {
//...
            dragon.anims.play('dragon-fly', true); // start animation when created

            dragon.on('animationcomplete', () => { // if an animation ends play the idle animation
                dragon.anims.play('dragon-fly');
            });
}

jest · November 12, 2018

You should create a custom class for your dragon and entities. I'll have a video on that next week in a few

SovietSenpai23 · November 13, 2018

14 hours ago, jest said:

You should create a custom class for your dragon and entities. I'll have a video on that next week in a few

Cool I'm intrested

Sign In

animation How to play, pause then contine animations?

Recommended Posts

SovietSenpai23

Link to comment

Share on other sites

jest

Link to comment

Share on other sites

SovietSenpai23

Link to comment

Share on other sites

jest

Link to comment

Share on other sites

SovietSenpai23

Link to comment

Share on other sites

jest

Link to comment

Share on other sites

SovietSenpai23

Link to comment

Share on other sites

Recently Browsing 0 members

Browse

Activity