Day 106 — Animated Tile Sets in Unity
Hey and welcome!
We’ve gotten pretty familiar with using Tilemap now so let’s see how we can use it to add in some animated sprites for our game! First though we need to import a repo into Unity that contains the scripts we need in order to get these animated tile sets added into the project.
The above link will lead you to the master branch of this repository which is currently only supported for Unity version 2021.1.0f1 onwards at the time of this article. If you’re using an older version then click on the branch dropdown in the top left which currently says Master and then choose the branch that matches up with your version number.
Once you’ve got the right one click on the code drop down and then Download Zip and save it somewhere on your computer.
Create a new folder in your Packages folder in your Unity project and name it com.unity.2d.tilemap.extras, this is one of those rare times where you need to make sure that the name for the folder matches what I’m naming it. Now extract the folder from the zip you downloaded which should be called along the lines of 2D-extras-master and open up this folder. You should see several files and folders now, go ahead and copy these over to the folder you created in your Unity project and you should be all set.
Now let’s sort out our sprites that we’re going to be animating. In Environment > Waterfall you should find 3 different waterfall images, go ahead and slice all three of these making sure that the dimensions are set to 256 x 256. If you’ve done it right you’ll be able to go through the sliced sprites using your arrow keys and see the animation playing out.
It’s time for the moment of truth to see if you got the 2D extra installed correctly. Head over to your tiles folder where you’re keeping the cavern and ground files etc and create a Waterfall folder. Right click the folder and if the install has worked you should be able to find a new option under 2D > Tiles > Animated Tile, click on that and save your tile as Waterfall_Center.
In the inspector for this tile you’ll see a property called Number of Animated Sprites, this will vary depending on the animation but our center waterfall has 30 sprites associated with it so set this number to 30. Now here comes the slightly awkward and tedious part, there isn’t a way currently to drag and drop all the sprites into here at once so you’ll have to do the manually 1 by 1 making sure the order is correct.
Now do the same process for your left waterfall and right waterfall and then set the Minimum and Maximum speed for each to 30.
Last part now, create a new Tile Palette for your waterfall and then drag and drop all three of your newly created waterfall tiles into the palette. It may put them in the palette out of order so make sure to organise them so that the left tile is on the left, the center tile is in the center and the right tile is on the right, this will make your life easier when painting it in.
Speaking of, make sure that you’re on a layer that’s in front of your ground layer and go ahead and paint this waterfall into your scene and then hit play to see it in action.
That’s not looking too shabby so far, we’ve got a nice atmosphere building here!
