Tile Animations
Define animated tiles with frame sequences and timing.
Tile animations let you make tiles cycle through a sequence of frames — for water, torches, flickering lights, conveyor belts, and more. Animations are defined per tile on the tileset, not per cell on the map. Every instance of that tile on any map will animate the same way.
Opening the Animation Editor
Right-click a tile in the tileset palette and select Edit Animation. The Tile Animation Editor dialog opens.
Defining Animation Frames
Each animation is a list of frames. Each frame has:
- Tile ID — the local tile ID within the tileset to display for this frame
- Duration — how long this frame is shown, in milliseconds
To add a frame, enter the tile ID and duration, then click Add Frame. You can reorder frames by dragging them in the list.
Live Preview
The editor shows a real-time preview of the animation playing at the defined frame rates. This lets you fine-tune timing before closing the dialog.
Rendering on the Map
Animated tiles are rendered on the map canvas using a requestAnimationFrame loop. The animation cycles through frames based on elapsed time. All tiles with animations update simultaneously.
The animation loop runs continuously but has negligible performance cost when no animated tiles are present on the map.
Palette Indicators
Tiles with animation data show a blue play icon in the tileset palette, making them easy to identify at a glance.
Export Format
Tile animations are stored in the tileAnimations Map on the editor state, keyed by global tile ID. Each entry is an array of {tileId, duration} objects.
In TMJ export, animations appear as tiles[].animation arrays on the tileset — the standard Tiled format. In TMX export, they are included as <animation> elements.
Game engines that support Tiled maps (Godot, Phaser, Unity with SuperTiled2Unity) will automatically play these animations.