New features of SpriteKit in iOS 10: Tile Maps (Part 1)

Introduction

Apple showed off a ton of new goodies at WWDC 2016. One of them was the SpriteKit Tile Editor. This tool is easy to use and seems to be very fast.

In this tutorial, you will learn all about tile images in the Tile Editor, including how to import and render tile images in the Tile Editor. Specifically, I will show you how to use this new technology to make the rubber duck walk along a specified path when designing your new game Rubber Duckie Rescue.

Preparation

First, please download the starter project of the game Rubber Duckie Rescue (https://cdn1.raywenderlich.com/wp-content/uploads/2016/06/RDRescue-Starter.zip) and make sure you have installed Xcode 8. Note: At the time of writing this article, it is only in beta version.

At this point, the game is just the beginning; by the end of the tutorial, you'll be controlling a car, which you'll drive through an exciting landscape to rescue pesky ducks.

Now, build and run the program you downloaded above. You should now have a car that responds to your touch. You can touch it to send it to a specific location, or pan it to follow your touches. Right now, the background is just solid grey. But don't worry! You can change that later.

What is a Tile Map?

When creating a background, you can choose to use a larger image or smaller images, called tiles. These tiles are then carefully placed together, piece by piece, to create a complete image.

For example, if you were creating a golf game, you might want to use grass tiles and bunker tiles. You might also want to use tiles that define the edges of the grass and bunkers.

Advantages of using tile maps

Controls: Previously, each tile corresponded to a new SKSpriteNode, so just placing these nodes was a nightmare.

Now, all you have to do is place an SKTileMapNode and render tiles on it. It's easy to place individual tiles on top, and render the entire background in a matter of seconds. You can even animate tiles!

You can put a village on one tile layer and put grass on a lower layer. To change from summer to winter, just replace the lush green grass layer with a bleak terracotta layer, while leaving the village layer unchanged.

Performance: In addition to making it easier to draw tiles, performance will also be greatly improved. Large images take up a lot of memory, while small tiles can be reused, thus taking up less resources.

Flexibility: Each tile can be controlled in code. This means that you need to know clearly the location of the tile where your game protagonist is located.

In this tutorial, you create a game background environment that uses grass and water tiles that have different effects on the movement of the car. In addition, you create tiled areas where ducks are randomly placed and you drive to rescue them.

Tile map type

There are four types of tilesets in the game. Specifically, you can create a grid, isometric, hexagonal pointed, or hexagonal flat tile set. In actual development, you only need to choose the tile type according to the style of your game.

The Rubber Ducky Rescue game in this article uses a square grid. This is a top-down game, but you can also use grid tiles to scroll left and right.

The isometric tiles are all diamond-shaped, like those used in the Ravenwood Fair game.

There are two ways to place hexagons: with the pointy end facing up or with the flat side facing up. The image below shows an example of a hexagonal tiling grid with the pointy end facing up:

The game Sid Meier's Civilization used an isometric grid in its Civ 4 version, and a hexagonal grid in its Civ 5 version.

How to create a tile map

In the Rubber Duck Rescue game, you will first draw two simple background tile maps with grass and water, replacing the current gray background. Later, you will create new tile maps in the background code using the objects that the car needs to collect.

To create a tile map, you first need some tile images. Fortunately, there are some free resource websites that provide developers with some ready-made game image data for free.

Our game will be using assets from kenney.nl (http://kenney.nl/) This is a great website that provides a large number of tiles and other sprites that can be used for free.

Using Asset Catalog to manage image data

The starter project above already has an asset directory named Assets.xcassets, which contains all the tiles and sprite images needed for this tutorial.

Tile images exist in texture atlases, not in folders. A texture atlas looks and behaves like a folder, except that its icon is four small squares instead of one large square.

The advantage of using texture atlases is performance. When rendering your game, SpriteKit sends a "draw call" command to the GPU for each texture you send to it. If you combine multiple images into a single texture, called a texture atlas, then only one "draw call" command is generated instead of multiple calls, which is more efficient.

The Asset Catalog can automatically combine your sprite images into texture atlases, and you don’t need to worry about how to figure out the position of the sprite images in the texture atlas—SpriteKit automatically handles all related operations for you.

In this game, you will also use images from the Asset Catalog to create tilesets.

Creating a tile set

Before diving into the details, you'll take a quick look at the tile creation and painting process. Later, you'll learn to create and paint a more complex tile set.

First, navigate to File\New\File, then select the iOS\Resource\SpriteKit Tile Set template and click the "Next" button. Please refer to the figure below.

Name the tile set Tiles and click the "Create" command.

Next, select the file Tiles.sks from the project navigator. A mesh tileset and tile group will be automatically created for you. There is one group for each tileset. In this tutorial, you will create groups for the grass and water.

First, select the Tile Set. Then, in the Attributes Inspector, rename the tile set to Groud Tiles.

Now, select the new tile group in the Tile Set List panel and rename it Water Tile in the Attributes Inspector.

Then, in the lower part of the Attributes Inspector, select Media Library. If you haven't used the Media Library before, you'll quickly find that it's very convenient to use it to create tilesets.

Locate the WaterCenter image file and drag it to an empty tile area.

[Note 1] The Tile Set Editor allows you to drag images directly from the Finder into a Tile Group at design time. This will appear to work correctly, but when you run the application they will show a red X. To avoid this, import your images into the Asset Catalog and then find them in the Tile Set Editor via the Media Library.

The first tile group is defined above, and now you will create the second tile group.

[Note 3] In the current beta of Xcode 8, if you only create one tile group, the Scene Tile Editor may not recognize it when you draw tiles. To fix this, you can just add a second group.

Now, select Ground Tiles in the Collection List panel, click the plus sign (+) at the bottom, and select New Single Tile Group. Refer to the image below.

Select "new tile group" and change the name of the newly created tile group to "Grass Tile" in the Properties Inspector. Then, define the image file GrassCenter1 in the Media Library and drag it to the empty tile area.

Using Tile Variants

Click with the left mouse button on the grass tile in the center of the screen, see the image below.

At the bottom of the screen, you can add new tile variants. When you draw a tile, the editor will automatically select one of these variants at random; this way, you will have many variants in your map. Each variant can have a Placement Weight value set in the Properties Inspector. For example, if you set a Placement Weight value of 1 for one variant and 2 for the second variant, the second variant will be placed twice as large horizontally as the original when you draw it.

Drag the GrassCenter2 image to an empty Variant slot, and then drag the GrassCenter3 image to the adjacent empty Variant slot. See the image below.

Now that you have created your first tileset, the next task is to draw it.

Tile Map Editor

Select the file GameScene.sks. Currently, the scene only contains a car sprite. Then, drag a Tile Map node from the object library in the lower right corner to the scene.

In the Properties Inspector your Ground Tiles set is automatically selected as the only tileset in the project. The Tile Size is automatically set to the size of the tiles in that tileset. Then, change the size of the map to 32 columns x 24 rows. Make sure both the Position X and Y are set to 0 and the Scale X and Y are set to 1.

Double-click the tile map node in the scene editor to start the tile editor. Alternatively, select Editor\Edit Tile Map with the tile map node selected to start the tile editor. If you have already created a tile map node layer, the second menu option is more convenient.

If you don't see a grid, you can zoom in on the scene editor until you see it.

There is a new toolbar at the top of the Scene Editor view with the Brush Tool already selected and the water tile selected by default. You can now click and drag on the tile map to start painting.

To change the tile, you can click the icon immediately to the left of the brush icon in the toolbar and select the Grass tile from the drop-down list box.

Keep drawing. You'll notice that three random variations of Grass have been drawn. Of course, you'll see more interesting things later on.

The icons on the toolbar are similar to those in other drawing programs and are generally used from left to right.

The Hand tool allows you to drag the scene around.

The Eyedropper tool is used to select a tile from those already drawn.

l You have already seen the use of the tile selection tool (Select Tile) and the brush tool (Brush), so I will not introduce them here.

The Flood Fill tool is used to fill consecutive tiles with tiles of your choice.

The Erase tool will delete tiles.

If you are painting a large area, the Select Brush Size tool allows you to change the size of the brush.

The two Stamp Tools are interesting. Select the Create Stamp Tool (the one with the little circle stamp). Then, click in one square, then click in another square (to the right and slightly down) to select the tile (or multiple tiles) in a rectangular selection. You have now created a stamp.

Select the Select Stamp tool (the one labeled with the little stamp tool) and all the stamps you just created will appear in a drop-down menu. Click on a stamp to select it and then you can paint with it. The shaded area that appears shows where the stamp will go. This tool makes painting large areas pretty easy.

The Randomize tool will clear the existing tiles and paint randomly using the currently selected tile. This is also a good way to paint large areas.

When you have finished experimenting (feel free to try it out if this is your first time), select the water tile to fill the entire map. You can quickly fill in the empty areas. This will generate the game background. Of course, you could probably cover it with more detail with a second tilemap node.

Now that you understand how to create and draw tiles, we'll create a more complex tileset using edge tiles.