Animating Tiles

In the Project Navigator, select the Assets.xcassets asset catalog and create another new sprite atlas. Name this one tiles_animated and remove the empty Sprite image set.

Open Finder and drag all of the image assets from the resources/tiles_animated folder into the tiles_animated atlas. When you’re done, you’ll end up with something like this:

Switch to the MainTileSet.sks file—you’re about to add another Center variant.

Expand the Dungeon Tile Set and then the Dungeon Floor. Select the Center tile (it may already be selected from when you added the center_alt variant).

Open the Media Library and drag the fire_0 image asset into the Add New Variant empty space. Select the fire_ tile variant and open the Attributes Inspector.

Using the Media Library, drag the other fire assets (fire_1, fire_2, and fire_3) into the Textures area, like so:

In the Attributes Inspector, you’ll see a Time Per Frame setting, which is currently set to 0. Change this value to 0.25 to represent 0.25 seconds per frame, and you’ll see a fire animation appear as it cycles through all four frames in the order they appear in the Textures area:

Add Multiple Variants at Once
	If you’re looking to speed up your development, you can add multiple static or animated tiles by selecting multiple assets from the Medial Library and dragging them into the Add New Variant slot. You’ll then get prompted to Create multiple new definitions or Create new animated definition with a default Time Per Frame of 0.5.

Save the file and then switch back to the GameScene.sks file. You’ll see something like this:

The problem here (and I’m not sure if this is a bug or what) is that any time you make changes to the underlying tile set, regardless of the automapping setting, the tile map that uses that tile set gets wonky. To correct the problem, toggle the Enable Automapping setting on the Dungeon Tile Map node, which will correct and reset the map.

Once the map returns to what it once was before, you’re ready to make your edits—in this case, you’ll add some fire tiles and you’ll set up the edges of the dungeon floor.

Right-click the Dungeon Tile Map node and select Edit Tile Map. Now, disable the automapping option, and you’ll be able to select the individual tile definitions using the Select Tile tool:

Start by adding a few random fire tiles around the dungeon floor. When you’re done with that, you’re ready to add the outside edges.

For the outside edges, you’ll use the following eight tiles for the top, bottom, and corner edges:

The image shows how my updated map looks, with a portion of the map zoomed in so that you can better see the edges.

Tile Maps, Edges, and Automapping
	When mixing automapping and manual mapping, always start with automapping enabled. Otherwise, when you switch from manual to automapping modes, your pre-existing tiles may change, causing unexpected results.

If you were to build and run the project now, the player would be able to walk through walls. While this nifty talent works well for ghosts, the fearless Val doesn’t need this ability, so you’ll fix that problem next using physics bodies.