TileMap: animated tiles

Problem

You’d like to use animated tiles in your TileMap.

Solution

The most straightforward way to approach this problem is to use the AnimatedTexture resource.

Creating an AnimatedTexture

For this example, we’ll use the following water tiles:

alt

Download these images: water.zip

Unzip the images into your project folder. In the Inspector, click the “Create a new resource” button:

alt

Choose AnimatedTexture and set the Frames property to 5. For each frame, drag the corresponding image to its Texture property.

alt

You can adjust the overall animation’s speed with the Fps property, as well as each individual frame’s Delay Sec.

Click the “Save” button to save the resource. Give it a name such as water_anim.tres.

Using AnimatedTexture in a TileMap

Now that the AnimatedTexture is saved, it can be used in a TileSet. Open a new or existing TileMap and select its Tile Set property. Click the button to add a new texture to the TileSet:

alt

Select the newly added texture and click “New Single Tile”. Draw a box around the texture (use “Enable Snap” to make this easier).

alt

Now you can select the tile in your TileMap and draw with it just like any other tile.

alt

You can download a complete project of this example: animated_tiles.zip

Comments

comments powered by Disqus