Animated Tiles
In this tutorial, we'll see how to add animated tiles in gshtml5 using Tiled.
Before starting, make sure your tileset has all the necessary frames to mount the animated tiles in the same image file.
After importing your tileset, click on Edit Tileset:
A new tab in Tiled will open to edit your tileset.
Click on a tile that will become the animated tile to select it. Generally, I prefer the first frame tile to be the animated one. After clicking on it, click on the camera button Tile Animation Editor:
The Tile Animation Editor window will open. In this window, we'll select frame by frame to mount the animated tile and for each frame, we'll set its duration in ms. So first set the frame duration of the first frame, then double-click on the first frame of the animated tile. For the next frame, do the same thing, first set the frame duration, then double-click on the next tile representing the next frame. Close the window when you're done.
After you close the window, you'll notice that the frame you selected will have a stripe in the corner which means that's an animated frame. Save the tileset, close the Tileset editor tab. Now every time you want to use this animated tile, just place this specific frame in the map.
