Xcode Tile Map Editor Introduction

Xcode includes a tile map editor you can use to build levels in SpriteKit games. Unfortunately the tile map editor is not intuitive to use, and Apple does not provide any documentation on using the tile map editor. This article should help you get started using Xcode’s tile map editor.

If you haven’t used Xcode’s scene editor before, read the following article:

Introducing Xcode’s Scene Editor

Using Xcode’s tile map editor requires you to do the following:

Add a Tile Set to Your Project

The first thing you must do to create tile maps is add a tile set to your project. A tile set contains a group of tiles.

Press Cmd-N or choose File > New > File in Xcode to add a new file to your project. The New File Assistant opens. The file template for a tile set is in the Resource section.

Tile Set File Template

Select the SpriteKit Tile Set template and click the Next button.

Next you’ll be asked to choose the type of tile set to add. You can choose from the following tile set options:

Choose Empty Tile Set if you have an existing set of tiles you want to add to your game. The other options help if you want to experiment with painting tiles in the scene editor.

Add Your Tiles to the Project

To add tiles to your project, you must add the tile image files to your project’s Assets catalog.

Select the Assets item from the left side of the project navigator to open the Assets catalog. Add the image files for your tiles to the Assets catalog.

Assets Catalog

Either drag and drop the image files from the Finder to the Assets list or click the Add button at the bottom of the list and choose Import.

Add a Tile Group to the Tile Set

Select the tile set from the left side of the project window to open the tile set editor. The tile set editor looks similar to the following screenshot:

Tile Set Editor

The left side of the editor has a list that shows the hierarchy of the tile set. Selecting an item from the list shows the details in the right side of the editor.

A tile set contains a list of tile groups. The screenshot shows four tile groups: grass, cobblestone, sand, and water.

Clicking the disclosure triangle next to a group shows the group’s rules. SpriteKit tile map rules can contain a list of tile definitions and an adjacency group.

A tile definition represents a single tile. An adjacency group defines how neighboring tiles are placed. Suppose you have water tiles in your tile map. You can create an adjacency group that has tiles that show part water and part sand to represent the edges of a body of water.

Select an item from the left side of the tile set editor, right-click, and choose New > Single Tile Group to add a tile definition. Choose New > 8-Way Adjacency Group to create an adjacency group.

Adding Tiles to the Group

Open Xcode’s Library window so you can add tile images to the tile groups in the tile set editor. Hold down the Option key and choose View > Show Library to open the Library window. Holding the Option key when opening the Library keeps the Library window open.

Tile Library Window

Drag a tile image from the Library window to a slot in the tile set editor.

Tile Set Editor

For an adjacency group, you must supply 13 tile images, one for each slot in the group.

For a single tile, you must supply at least one tile image. If you want to create variants of the tile, you can supply additional images by dragging them to the Add New Variant slot. If you create variants, the tile map editor chooses a tile variant at random when you paint a tile in that group. The point of variants is to create large areas that don’t look exactly the same.

Build the Level

To build a level with Xcode’s tile map editor, you must do the following:

Add a Tile Map Node to Scene

Press Cmd-Shift-L or choose View > Show Library to access the Library. Select the Tile Map Node item from the Library and drag it to the scene canvas.

Choose the Tile Set for the Tile Map

  1. Select the tile map item from the scene graph view.
  2. Open the attributes inspector on the right side of the project window. Cmd-Option-4 is the keyboard shortcut.
  3. Choose a tile set from the Tile Sets menu.

Tile Map Attributes Inspector

Use the attributes inspector to set the map size, tile size, and position.

Edit the Tile Map

It’s not obvious how to edit the tile map in Xcode’s scene editor. Select the tile map node from the scene graph view. Choose Editor > Edit Tile Map to start editing the tile map.

Tile Map Editor Buttons

When you start editing the tile map, the tile map editor buttons appear above the canvas.

Tile Map Editor Buttons

The buttons, running from left to right, are the following:

Painting a Single Tile

Take the following steps to paint a single tile:

  1. Click the Select Tile button.
  2. Choose a tile from the popover.
  3. Click where you want to place the tile in the canvas.

If you make a mistake, click the Erase button and click the tile you want to erase.

Click the Hand button to move around the canvas.

Click the Done button when you are finished painting tiles.

Painting Larger Areas

Painting a large map one tile at a time can be tedious. Xcode’s tile map editor provides the following ways to paint larger areas:

Increasing the brush size paints multiple rows and columns with a single tile. Click the Select Brush Size button to increase the brush size.

Flood fill fills a large area with a single tile. Click the Flood Fill button to perform a flood fill.

Stamps let you select a group of placed tiles and create a template you can use to paint that group with one click in the canvas. Take the following steps to create a stamp:

  1. Click the Create Stamp button.
  2. Click the tile in the tile map that should be the upper left part of the stamp.
  3. Click the tile that should be the lower right part of the stamp.

Click the Select Stamp button to select a stamp to use.