Animate Tiles using Tileset indices

Phaser 3
1

Hello, I haven’t found anything relating to this topic so I’m posting it here.

What I have is a tilemap on which I can draw static tiles using the embedded tileset:

Map: 0

Tileset: 2

What I want to achieve is essentially playing an animation 0-1-2-3 on any of the tiles in the map, providing the indices of the tiles in the tileset I want to use. I place tiles in the map like so:

this.map.putTileAt(index, x, y, …);

Is there a way I could provide this function with an array of indices indicating what tiles to use for an animation, or is that something I need to create from scratch?

this.map.putTileAndAnimateAt([tile0, tile1, tile2, tile3], x, y, …);

Please let me know if I should provide any more specifics, thank you.

2

Hi,

There’s a plugin for Tiled animated tiles, perhaps you can find what you want in the source code, or use the plugin…

3

Unfortunately, the plugin has not been updated in a while, so I don’t think it works with the latest version. I used the following code to mimic animation:

In the init function, set a variable framecounter = 0

Then in the update(time, delta) function I did:

frameCounter += delta;
frameCounter %= 2250;
const animationFrameIndex = Math.floor(frameCounter / 75);
backgroundImage.setTexture('background_images', frames[animationFrameIndex]);

where there were 30 different tiles I wanted to loop through (stored in frames), and each tile I wanted to only be there for 75 loops (and 30 * 75 = 2250, the modulus is necessary to ensure you access the correct index). Of course that assumes that you are starting at tile 0, otherwise you’ll have to do some arithmetic manipulation if you want a certain range.

You would also replace the last line of code with however you replace tiles in Phaser. My example was replacing a background image.

4

I agree with you , it’s not an active plugin, but it works with phaser 3.52 that is not so old.