Creating a TileMap with SpriteKit (Swift Edition)

In this tutorial, we’re going to create a tile map in the TMX (Tiled) format, and add it to a Swift/SpriteKit project. Adding a tile map will allow you to create a 2D game like Super Mario Bros or Sonic the Hedgehog.

What you will need:

  1. Xcode v7.2 (7C68) or later
  2. Tiled (can also be downloaded directly here)
  3. Tiles
  4. JSTileMap source files (modified for this tutorial)

Create a Tile Map using Tiled

  1. Open Tiled, and click on File and New…
  2. For the Map Size, enter 100 for the width and 12 for the height and a tile size of 48×48.
  3. For the Tile Layer Format, select Base64 (zlib compressed)
  4. Drag and Drop the TileSet into the tileset view within Tiled.
  5. Add tiles to the map by clicking on the individual tiles and placing them where you like, similar to the image below.
  6. When you are satisfied with your map, save it as map.tmx.

map

Alternatively, you can download the completed TileMap here:

map.tmx
tiles.png

Add JSTileMap to your Project

  1. Create a new Swift/SpriteKit Game Project called “TileMapTutorial” in Xcode .
  2. Below the project name, drag and drop the following files:

    JSTileMap.h

    JSTileMap.m
    LFCGzipUtility.h
    LFCGzipUtility.mImportant: Ensure that “Copy Files if Needed” is checked when you drop the files into the project.
    1
  3. Click Create Bridging Header


    31
    Creating a bridging header allows you to import Objective-C files into Swift.
  4. Click on TileMapTutorial-Bridging-Header.h
  5. Add the following lines of code:

Add a reference to libz.tbd

Libz.tbd is a library used to uncompress files. Using compression with any mobile device should be considered due to space limitations, and iOS devices are no exception. To add this library to your project:

  1. Click on the Project and ensure that General is Highlighted
  2. Scroll down to Linked Frameworks and Libraries
    4
  3. Click the + button and search for libz.tbd. Select it and click Add5

Add the TileMap to Xcode

Drag and drop the map files to the project, again ensure that Copy Files if Needed is checked:

map.tmx
tiles.png

Add the Code

  1. Click on GameScene.swift and add a variable to reference the variable the following code below import SpriteKit:
  2. Create a variable to set up the location of the map:
  3. Replace the existing didMoveToView function with the following code:
  4. Replace the existing Update function with the following code:

Run the Project

Now run the Project (Command+R) using the iPhone 5 simulator and you should see your tile map scrolling until it reaches the end.

Congratulations! You’ve just added a TileMap to your Swift project using SpriteKit.

Download the entire project here.

  • Matthijs

    I was following this tutorial but i get stuck at downloading the file at http://2dgameworld.com/assets/swift-tilemap/JSTileMap.m because there’s nothing there..

  • timbojill

    Anyone know a good tutorial for a game like sonic boom? Please email me at timbojill@gmail.com.

  • Fabian Castillo Pineda

    Hi friend can you help me ? why the tile map doesn’t show it ? in swift 3 ? show the nodes 130 but I cannot see the map on the display