Add sprite sheet animation to the add.group

Phaser 3
1 
function preload ()
{
    this.load.spritesheet('star', 'assets/coin.png', { frameWidth: 55, frameHeight: 48 });
}

function create ()
{

    this.anims.create({
        key: 'spin',
        frames: this.anims.generateFrameNumbers('coin', { start: 0, end: 6 }),
        frameRate: 10,
        repeat: 1
    });

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

How to add sprite sheet animation to

this,physics,add,group

I’m a beginner, tried to google it but found nothing with phaser3.

thanks for your help.

2

I guess you have a typo. Shouldn’t it be

this.load.spritesheet('coin',...
coins = this.physics.add.group...

instead of

this.load.spritesheet('star',...
stars = this.physics.add.group...

You have created the animation but you need to play it.
After you created the group, iterate through all children and play the animation.

coins.children.iterate(coin => {
  coin.play('spin')
})

and maybe (since it is a coin) you wan to set repeat: to -1 to spin it infinitely.

Hope this works :slight_smile:

1 Like
3

Thanks a lot, I need that the animation be infinite how can do this, should I set repeat to a long number?

and the second : reading api’s document is a little hard, how can I get familiar with api’s so fast, any book, video tutorial.

Thanks.

4

set it to -1

Yes, maybe video tutorials.

I use TypeScript with Phaser’s type definitions which is much easier to program with. It helped me a lot understanding and discovering the Phaser API.

If you use VisualStudio Code as your editor, it will show you a list of all available methods and properties if you press Ctrl+Space.

Try my Phaser TypeScript Starter Template if you want to start programming in TypeScript, else try the ES6 template which has also type definitions.

Also take a look at the Phaser 3 examples.

5

Groups also have a shortcut:

coins.playAnimation('spin');
2 Likes