Create a Bigger World with Tile Map Nodes

Like other nodes in SpriteKit, the SKTileMapNode class is a subclass of the SKNode class, which means you can set the usual node properties like position and name. You can also run actions and use shaders^[40] on these nodes. More important, though, you can define a tile set object using the SKTileSet class.

A tile set object stores an array of related tile groups. A tile group (SKTileGroup) can contain either a single tile (SKTileDefinition) or an array of tile group rules (SKTileGroupRule). A tile’s definition, along with the group rules, define how the tiles are placed within a tile map node.

Confused? I’m not surprised. The rabbit hole of tile maps and supporting classes can get pretty deep, especially when you travel down that hole using code. But there’s good news: you don’t have to build your maps using code. Instead, you can use a combination of the Scene Editor and the Tile Map Editor—but first, you need to add some assets.

Adding the Assets

To begin, open the valsrevenge project in Xcode.

In the Project Navigator, select the Assets.xcassets asset catalog and create a new sprite atlas (click the + button at the bottom of the Outline View and select New Sprite Atlas). Name the new atlas tiles_grass and delete the empty Sprite image set.

Xcode 12 and Sprite Atlas Creation
	In Xcode 12, the New Sprite Atlas option does not exist. To create a new sprite atlas, click the + button at the bottom of the Outline View and select AR and SceneKit ▶ Sprite Atlas.

Open Finder and drag the contents from the resources/tiles_grass folder into the newly created sprite atlas, like so:

Now that you’ve added the images to the asset catalog, you’re ready to set up your first tile set.

Setting up Your First Tile Set

Create a new file (⌘N). Select the iOS SpriteKit Tile Set template, as shown in the first image.

Click Next, and then using the Tile Set template drop-down list, select the Empty Tile Set option, as shown in the second image.

After making your selection, click Next.

Name the new file MainTileSet.sks, and verify that the Group and Targets options are both set to valsrevenge. Once confirmed, click Create.

You now have your first empty tile set aptly named Tile Set. Using the disclosure indicators, expand the Tile Set and new tile group objects, and you’ll see a single Tile object:

You can either rename what’s here or delete the default entries and start anew. Let’s remove what’s here and start fresh.

Select the Tile Set entry. Then, right-click and choose Remove Selected Items from the context menu, like this:

Excellent, you’re ready to begin making your own tile set.

In Xcode, you can use four types of tiles to build your tile map: Grid, Isometric, Hexagonal Flat, and Hexagonal Pointy. Each tile type has a different shape as shown in the image.

The type of tile you use depends largely on the design and style of your game—Val’s Revenges was designed using grid-style tiles, so that’s what you’ll use to build your map.

Click the + button at the bottom of the Outline View and select New Grid Tile Set or right-click a blank area in the Outline View and select New ▶ Grid Tile Set.

Select the New Grid Tile Set and open the Attributes Inspector. Here, you’ll see the following options:

Rename the tile set to Grass Tile Set, and verify that the Type is set to Grid and the Default Tile Size is set to (w: 32, h: 32). The size here doesn’t matter too much since it’ll automatically update once you select the tile’s texture.

The next step is to add a new single tile group. With the Grass Tile Set selected in the Outline View, either right-click and select New ▶ Single Tile Group or use the + button at the bottom of the Outline View and select New Single Tile Group.

Expand the tile set and the newly created tile group. Rename the new group to Grass and the Tile group rule to Base. Great, you’re essentially back where you started, but now you know how to add additional tile sets, groups, and rules.

Open the Media Library (⇧⌘L). Find and drag the grass_0 asset into the empty Base slot. You’ll use this tile for the grass. But having a solid green background for grass would be kind of boring, so you’ll add a little variety by adding new variants.

To create additional tile variants, drag the other grass tile resources (grass_1, grass_2, and grass_3) into the Add New Variant slot. A new slot will appear after you add each new variant. When you’re done, the image shows what you’ll end up with.

Select the grass_0 tile variant, and in the Attributes Inspector, you’ll see this:

Here, you can set up the properties for your tile, including its Placement Weight. The placement weight determines how likely a tile will get placed when you’re “painting” tiles. The higher the placement weight, the more likely that variation will get used. With variations, you can create more realistic scenes that don’t look like repeating patterns.

Set the following weights for each variant:

• grass_0: 100
• grass_1: 20
• grass_2: 10
• grass_3: 5

Another way to add more variants without adding more resources is to enable the Flip Vertically, Flip Horizontally, and/or Rotation options.

Using the Media Library, drag another grass_2 asset into the Add New Variant slot. Select the new grass_2 variant and in the Attributes Inspector, enable both the Flip Vertically and Flip Horizontally options. While you’re there, also set the Name to grass_2_alt and the Placement Weight to 8.

When you’re done, you’ll have the following five grass tile variants:

With your Grass Tile Set in place, you’re ready to create your first tile map node. But first, save the MainTileSet.sks file (⌘S).