Add a Dungeon Tile Map

You just finished creating a single tile with multiple variations. Now it’s time to up your game a bit by creating a tile group that uses adjacency rules for placement. With adjacency rules, you can create a map that looks a little more natural and less boxy using an 8-way adjacency group:

But before you can create this new group, you need to add some more assets.

Adding the Dungeon Tile Assets

In the Project Navigator, select the Assets.xcassets asset catalog. Once there, create a new sprite atlas and name it tiles_dungeon. Don’t forget to delete the default Sprite image set.

Open Finder and drag all of the image resources from the resources/tiles_dungeon folder into the newly created sprite atlas.

With the new sprite atlas in place, you’re ready to build your first 8-way adjacency group.

Creating an 8-Way Adjacency Group

Switch back to the MainTileSet.sks file. To create an 8-way adjacency group, right-click an open area in the Outline View and select New Grid Tile Set. After that, select the New Grid Tile Set item (to highlight it), then right-click and select New 8-Way Adjacency Group. The two-step process looks like this:

Rename the New Grid Tile Set to Dungeon Tile Set and the new tile group to Dungeon Floor.

Open the Media Library using the persistent option (hold down the ⌥ key as you click the + button in the top-right of the Xcode toolbar); this makes it easier to drag the individual tile assets to their respective group rule.

Drag all 13 assets using the filenames and group rule names as your guide. For example, drag the lower_left_edge media asset to the Lower Left Edge group rule space. When you’re done, your tile group will look like the image.

You may have noticed an asset named center_alt. Drag this asset into the Add New Variant spot of the Center tile. When you’re done, the Center Tile Group Overview will look like this:

Select the center tile, and in the Attributes Inspector, set the Placement Weight to 5. Select the center_alt tile and set its Placement Weight to 3. When you’re done making these changes, save the file. Remember, the Placement Weight determines how likely one tile over another is used when painting the map—the higher the number, the more likely it’ll be used.

With your dungeon floor tiles set up, you’re ready to build a new map node.

Adding the Dungeon Tile Map Node

In the Project Navigator, switch to the GameScene.sks file and add a new tile map node. Name this new map node Dungeon Tile Map.

Set the Dungeon Tile Map node’s position to (x: 0, y: 0), and select the Dungeon Tile Set from the Tile Sets drop-down list.

The default size of a map node is 24 × 24; however, you’ll make this map node a little smaller so that there’s a bit of grass showing around the edges. In the Attributes Inspector, change the Map Size to (columns: 23, rows: 23).

In the Scene Graph View, right-click the new Dungeon Tile Map node and select Edit Tile Map. With automapping enabled, start painting. Notice how it automatically chooses the correct tile from the 8-way group. If you zoom in, you can see the tiles better:

You’re welcome to paint your scene any way you’d like. Mine looks like the first image.

After you’re done painting your dungeon, don’t forget to move the Dungeon Tile Map node above the player node in the Scene Graph. Once you’ve done that, build and run the project.

Everything looks good, but the character and the controls feel a little too big, as shown in the second image. Let’s reduce their size by setting the x/y scale for the controller and attackButton nodes to 0.75 and the player node to 0.4. You can set the scale using the Attributes Inspector.

Build and run the project again, and notice that this time the sizes look a lot better as shown in the image.

The dungeon is starting to look good, but it could use a little something—how about some animated flames?