SovietSenpai23

How to play, pause then contine animations?

Recommended Posts

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! 

Share this post


Link to post
Share on other sites

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 by jest
fixed grammar

Share this post


Link to post
Share on other sites

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/phaser@3.11.0/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>

 

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites
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');
            });
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.