Introduction To Animated Tiles

Looking to add some life to your tiles?

This tutorial covers how to do that!
Please follow along to learn how to create animated tiles.

Pre-requisites:

  • You have your tilesheet image prepare with a standard tile layout, preferably with the tiles to be animated next to each other. This tutorial uses the following tilesheet:

    animetile_sample

  • The tilesheet has been added to your Action Game Maker project (is visible in the FileSystem asset browser).

  • You have created a new Tileset for this tilesheet, or you have added the tilesheet to an existing Tileset.

  • You already know tile basics, such as from having followed this guide:
    Tutorial: Graphics Course #1 – Backgrounds and Tiles - GGG-Administrator の #5

Instructions

  1. From the FileSystem tab, select the Tileset configured with the tilesheet you wish to animate.

  2. Now choose “Select” function within the Tile Sources panel and select the base tile. It will be highlighted with a green border (if using the default UI).

  3. Scroll down the “Select” panel to find the Animation section and open the Frames subsection.

Checkpoint:
If you see “Bright Tiles”, those are tiles that Action Game Maker has already defined as a valid tile. If the tile is greyed out, then it has not been defined as a tile.

To make animations, make sure all tiles that will be used as animation frames are greyed.
You can right click a tile to delete the tile settings!

  1. Now click “Add Element” to add the 2nd frame of the animation.

  2. Action Game Maker will now automatically find and add in the tile next to the base tile as an animation frame. Continue adding tiles until your animation is complete.

Note: If the next tile is below the base tile, it will add tiles vertically. Make sure to configure the Columns option to determine how far right the system will look before going to the next row. In this sample, we are using 2 columns.

  1. Once the tiles are fully selected, confirm that it is working. Save your progress, then add the tile to any Scene.

  2. If your settings were correct, then the tile should be animated in the Editor preview panel!

And that’s it!

Congratulations on setting up an animated tile in Action Game Maker! From here, the next steps would be to adjust the frame timings as needed. Happy creating!