Add a animated sprite to phaser objects

Question

I have the following code in phaser, and I want to use a sprite animation instead of a static image, how can I pull that off? Using group to create new bullets. I am creating a new object and with that creating new bullets to get fired by the player. And I want the bullet to rotate with an animated spritshit. How can I do that?

this.bullets = this.physics.add.group({
    classType: Bullet,
    maxSize: 10,
    runChildUpdate: true,
});

The class i am using to create new bullets

var Bullet = new Phaser.Class({

    Extends: Phaser.GameObjects.Image,

    initialize:
    
    function Bullet (scene)
    {

        Phaser.GameObjects.Sprite.call(this, scene, 0, 0, "bullet");

        this.speed = Phaser.Math.GetSpeed(250, 1);

    },

    fire: function (x, y, direcao)
    {

        this.direcao = direcao;

        if(direcao == 1){
            //Cima
        // console.log("Tiro Acima");
            this.setPosition(x, y - 10);

            this.setActive(true);
            this.setVisible(true);

        }else if(direcao == 2){
            // Baixo
            // console.log("Tiro Abaixo");
            this.setPosition(x, y + 10);

            this.setActive(true);
            this.setVisible(true);

        }else if(direcao == 3){
            //Direita
            //console.log("Tiro a direita");
            this.setPosition(x + 10, y);

            this.setActive(true);
            this.setVisible(true);

        }else if(direcao == 4){
            //Esquerda
            //console.log("Tiro a esquerda");
            this.setPosition(x - 10, y );
            
            this.setActive(true);
            this.setVisible(true);

        } else {
            //Debug
            console.log("Não disparou");
        }
    
    },
    update: function (time, delta)
    {
        if(this.direcao == 1){
            //Cima
        //  console.log("Tiro Acima");
            this.y -= this.speed * delta;
        }else if(this.direcao == 2){
            //Baixo
        //  console.log("Tiro Abaixo");
            this.y += this.speed * delta;
        }else if(this.direcao == 3){
            //Direita
        //   console.log("Tiro a direita");
            this.x += this.speed * delta;
        }else if(this.direcao == 4){
            //Esquerda
        //    console.log("Tiro a esquerda");
            this.x -= this.speed * delta;
        }else{
            //Debug
        // console.log("Não disparou");
        }

        if (this.y < 0)
        {
            this.setActive(false);
            this.setVisible(false);
        }

        if (this.y > 480)
        {
            this.setActive(false);
            this.setVisible(false);
        }

        if (this.x < 0)
        {
            this.setActive(false);
            this.setVisible(false);
        }

        if (this.x > 960)
        {
            this.setActive(false);
            this.setVisible(false);
        }

    }
});

winner_joiner · Accepted Answer · 2023-01-08T17:46:05.043

First you could extend from Phaser.GameObjects.Sprite rather than from Phaser.GameObjects.Image, then create an animation, with this.anims.create (link to documentation), and start the animation in the fire method , with the method play and stop the animation, when the bullet leaves the display (or so), in the update method.

Here a small working Demo (with pulsating bullet):

document.body.style = 'margin:0;';

var Bullet = new Phaser.Class({

    Extends: Phaser.GameObjects.Sprite,

    initialize: function Bullet (scene, x, y) {
        Phaser.GameObjects.Sprite.call(this, scene, x, y, 'dynamicFrames');
    },

    fire: function (x, y) {
        this.x = x;
        this.y = y;
        this.play('pulse');

        this.setActive(true);
        this.setVisible(true);
    },
    update: function (time, delta) {
        let speed = .15;
        this.x += speed * delta;

        if (this.x > config.width) {
            this.setActive(false);
            this.setVisible(false);
            this.stop();
        }
    }
});

class Example extends Phaser.Scene
{
    constructor () {
        super();
    }

    preload () {
        /** CREATE SPRITE FRAME FOR ONLY DEMO --- START */
        const canvasFrame = this.textures
            .createCanvas('dynamicFrames', 32, 16);

        let ctx = canvasFrame.context;

        ctx.fillStyle = '#ffff00';

        ctx.beginPath();
        ctx.arc(8, 8, 8, 0, Math.PI * 2, false);
        ctx.closePath();
        ctx.fill();

        ctx.beginPath();
        ctx.arc(16 + 8, 8, 6, 0, Math.PI * 2, false);
        ctx.closePath();
        ctx.fill();
        
        canvasFrame.add(1, 0, 0, 0, 16, 16);
        canvasFrame.add(2, 0, 16, 0, 16, 16);
        canvasFrame.refresh();
        
        /** CREATE SPRITE FRAME FOR ONLY DEMO --- END*/

        this.anims.create({
            key: 'pulse',
            frames: this.anims.generateFrameNumbers('dynamicFrames', { start: 1, end: 2 }),
            frameRate: 8,
            repeat: -1
        });
    }

    create(){
    
        this.add.circle(60, 100, 20, 0xffffff);
        this.add.rectangle(55, 100, 45, 10, 0xffffff)
          .setOrigin(0, .5);
        
        let bullets = this.physics.add.group({
            classType: Bullet,
            maxSize: 10,
            runChildUpdate: true,
        });

         this.time.addEvent({
            delay: 1000,
            startAt: 0,
            loop: true,
            callback: _ => {
                bullets
                    .get(100, 100)
                    .fire(110, 100);
            }
        });
    }
}

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    physics: { default: 'arcade' },
    scene: [ Example ],
    banner: false
}; 

new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

score 1 · Answer 2 · answered Jul 10 '22 at 17:28

For future references, here is the solution using @winner solution.

var Bullet = new Phaser.Class({

    Extends: Phaser.GameObjects.Sprite,

    initialize:
    
    function Bullet (scene)
    {

        Phaser.GameObjects.Sprite.call(this, scene, 0, 0, "bullet");

        this.speed = Phaser.Math.GetSpeed(250, 1);

    },

    fire: function (x, y, direcao)
    {

        //Animação Bala
        this.anims.create({
            key: 'bulletAnimation',
            frames: this.anims.generateFrameNumbers('bullet', {frames: [0, 1, 3, 4, 6, 7, 9, 10]}),
            frameRate: 10,
            repeat: -1,
        });

        this.anims.play('bulletAnimation', true);

        this.direcao = direcao;

        if(direcao == 1){
            //Cima
           // console.log("Tiro Acima");
            this.setPosition(x, y - 10);

            this.setActive(true);
            this.setVisible(true);

        }else if(direcao == 2){
            //Baixo
         //   console.log("Tiro Abaixo");
            this.setPosition(x, y + 10);

            this.setActive(true);
            this.setVisible(true);

        }else if(direcao == 3){
            //Direita
          //  console.log("Tiro a direita");
            this.setPosition(x + 10, y);

            this.setActive(true);
            this.setVisible(true);

        }else if(direcao == 4){
            //Esquerda
          //  console.log("Tiro a esquerda");
            this.setPosition(x - 10, y );
            
            this.setActive(true);
            this.setVisible(true);

        }else{
            //Debug
            console.log("Não disparou");
        }
    
    },

    update: function (time, delta)
    {

        if(this.direcao == 1){
            //Cima
          //  console.log("Tiro Acima");
            this.y -= this.speed * delta;

        }else if(this.direcao == 2){
            //Baixo
          //  console.log("Tiro Abaixo");
            this.y += this.speed * delta;

        }else if(this.direcao == 3){
            //Direita
         //   console.log("Tiro a direita");
            this.x += this.speed * delta;

        }else if(this.direcao == 4){
            //Esquerda
        //    console.log("Tiro a esquerda");
            this.x -= this.speed * delta;

        }else{
            //Debug
           // console.log("Não disparou");
        }

        if (this.y < 0)
        {
           
            this.setActive(false);
            this.setVisible(false);
        }

        if (this.y > 480)
        {
            this.setActive(false);
            this.setVisible(false);
        }

        if (this.x < 0)
        {
            this.setActive(false);
            this.setVisible(false);
        }

          if (this.x > 960)
        {
            this.setActive(false);
            this.setVisible(false);
        }

    }
});

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jul 11 '22 at 21:08

Add a animated sprite to phaser objects

2 Answers2