Search the Community

I have spent some time finding out how to animate tiles in a tile map loaded from a Tiled map exported to JSON. At first I built a utility class called TileMapAnimator (TMA) to animate some tiles using manual data and eventually I extended the class so that it could load animated tile data directly from the map files. With TMA you define your animations in Tiled and load them directly into your Phaser game! I'm sharing this code in the hope that others may find it useful. If you have invested into loading Tiled maps using the built in functions, I believe you can include animations in your game with very little retrofitting. TMA can animate hundreds of tiles without any notable performance degradation. Some usage restrictions apply: In TMA, each animation uses a fixed frame interval for all the tile frames. Tiled actually allows you to specify different durations per frame. Hence TMA picks the first duration as the frame interval. TMA requires tile animations to be defined on one of the tiles included in the animation. This is because TMA scans the map layer for these tiles and sets up the animated tiles at the designated locations Only one animated tile layer is supported for now. Perhaps I will extend TMA to support animation in multiple layers. How to use TMA Import the TMA class: import TilemapAnimator from "../graphics/TilemapAnimator"; In preload(), load the tile map and associated tile sets using the built-in Phaser map loading functions: this.load.tilemap('TileMap', 'assets/maps/world1/TileMap.json', null, Phaser.Tilemap.TILED_JSON); this.load.image('Ground', 'assets/graphics/world1/Ground.png'); Load the tile map again, but this time as a raw JSON file: this.load.json("TileMapAnimations", 'assets/maps/world1/TileMap.json'); In create(), set up the map and layers as usual: const tilemap = this.add.tilemap('TileMap'); const groundTileset = tilemap.addTilesetImage('Ground', 'Ground'); const groundLayer = tilemap.createLayer('Ground'); Create an instance of TMA, passing the game.time object, the tilemap and the layer containing the animations: const tilemapAnimator = new TilemapAnimator(this.time, tilemap, groundLayer); Load the animation into TMA, by specifying the cache key of the raw JSON object loaded in prefetch() using game.load.json(....) and start the tile animations: tilemapAnimator.addAnimationsFromTilemap("TileMapAnimations"); tilemapAnimator.start(); That's all there is to it! Note: I am no NPM expert, but if anyone is willing to turn this into an NPM package or some other practical library, please get in touch so we set it up! The TMA class file is attached below. TilemapAnimator.js