Use 2D Tilemap Extras to create animated tiles

Page update date :
Page creation date :

Verification environment

  • Windows 11
Unity Editor
  • 2021.3.3f1
Input System Package
  • 1.3.0

Prerequisites for this tip

The following settings have been made in advance as a premise for the description of this tip.

What are the prerequisites for this tip?

About borrowing map materials

It is borrowed from the following site. Only one row above is used.

About animated tiles

When playing a game that uses map chips, Even if you stop on the spot, you will often see animated map chips such as the flow of the waterfall moving and the flickering of fire. Although the implementation methods may differ, these are achieved in Unity through animation tiles.

Many of the animations in MapChips appear to be moving by switching between multiple MapTips at regular intervals. There are also those that are animated by processing on a pixel-by-pixel basis, and those that are animated by changing texture coordinates. The animation we will do this time will be achieved by switching the map chip.

Prepare MapTips for animated tiles

This time, we will prepare the following map chips and animate the movement of the waves by switching the map chips.

Splitting MapChips for animated tiles

After creating the project, place the MapChip you just created in the project and divide it. The work around here is the same as the explanation for the tilemap, so I will post only the image.

You don't need to add it to the tile palette yet.

Adding an Animated Tile

Select Create -> 2D -> Tile -> Animated Tile from the project to add it.

The name can be anything. You will not use this name anywhere else.

Select the Animated Tile you created to toggle the Inspector. Drop the maptip divided into this rectangular frame.

You can drop tiles individually, but if you drop the split source, you can register the divided MapChips in bulk.

Add a maptip and it will look like the image. Otherwise, this is the end of the creation of the Animated Tile.

Add to tile palette

Create a tile palette. If there is no tile palette tab, display it from "Window -> 2D -> Tile Palette" in the menu. The name of the palette can be anything. If you need more than one palette when creating your game, keep it easy to understand.

The tile palette settings are created in a new SeaPalette folder in the Scenes folder. The folder name and location are arbitrary.

Once you've created your tile palette, add maptips. In a normal tilemap, we placed a split maptip, but this time we will place the Animated Tile.

When placed, only one chip is displayed, but in the case of animated tiles, this is all you need.

Placing MapTips (Animated Tiles)

Add a tilemap to the hierarchy as you would for a tilemap.

Select Tilemap to display a grid in the view.

Let's place a maptip here. Select an animation tile from the palette.

Place it in the view. It looks no different from ordinary mapchips.

If you don't actually move it, it won't be animated, so let's run it.

If you run it, you can see that the maptip is switched and animated every 1 second. In this way, it is easy to implement MapTip animation with only extended functions without creating a program.

Other settings

Change animation speed

By default, the MapTip switching interval is 1 second. For example, if you want to change this every 0.5 seconds:

When you select a Tilemap added to the hierarchy, the Tilemap component in the Inspector has an "Animation Update Rate" that you can change here.

This number is the number of "how many times to switch in 1 second", so if you switch in 0.5 seconds, you will switch twice in 1 second, so set "2".

Try running it and see if the animation speed changes.

Randomize the animation time for each map chip

It is better to have the same animation interval for adjacent mapchips such as the seaside or the flow of a waterfall, but you may want to change the animation time for each object, such as the flickering of fire. In that case, you can randomize the time or change the starting position.

Select the Animated Tile and look at the bottom of the inspector to see some settings.

Minimum Speed and Maximum Speed can be specified as the upper and lower limits of the number of sheets to be switched per second. The placed MapTips will animate with one of these random numbers, so if you place multiple Maps, they will each animate at a different speed.

For example, if you run Minimum as 1 and Maximum as 2, you can see that they will animate at random speed.

By the way, since it is randomly determined at the decimal level, it is unlikely to be the same speed.

"Start Time" and "Start Frame" specify the starting maptip position of the animation, but I don't think they are used much. "Collider type" is a different processing story, so I will omit it.

Set the animation time for each MapTip type

For example, you may want to switch the movement of the waves every 1 second, but you want the flow of the waterfall every 0.5 seconds. This can be set as described earlier, "Minimum Speed" and "Maximum Speed". If you set Minimum and Maximum to different values, they will be random, so for example, if you want to set the switching speed to 0.5 seconds, if you set Minimum and Maximum to 2, they will all be doubled.