Creating a TileMap and Implementing it With SpriteKit

Update! See the Swift version here.

In this tutorial, we will create a TileMap and add it to a SpriteKit project using the Objective-C language. Adding a tilemap will allow you to create a 2D Super Mario or Sonic The Hedgehog style game.

What you will need:

  1. Xcode
  2. Tiled (can also be downloaded directly here)
  3. TileSet 1 and TileSet 2
  4. JSTileMap (keep reading for source files)

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 16 for the height and a tile size of 16×16
  3. Drag and Drop the TileSet into the tileset view within Tiled.
  4. Add tiles to the map by clicking on the individual tiles and placing them where you like, similar to the image below:
  5. When you are satisfied with your map, save it as level1.tmx

Add JSTileMap to your Project

  1. Create a new SpriteKit Project in Xcode called Map.
  2. Under the project name, create a new group called JSTileMap
  3. Add the following files to the group:

Important: Ensure that “Copy Files if Needed” is checked when you drop the files into the project.

JSTileMap.h
JSTileMap.m
LFCGzipUtility.h
LFCGzipUtility.m

Add the TileMap to Xcode

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

-level1.tmx
-tileSet.png
-tileSet@2x.png

Add a reference to libz.dylib

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

  1. Click on the Project and ensure that General is Highlighted
  2. Scroll down to Linked Frameworks and Libraries
  3. Click the + button and search for lib.dylib. Select it and click Add.

Set the Device Orientation

  1. Click on the General tab
  2. Below Deployment Info, ensure that Portrait is unchecked.

Add the Code

  1. Click on GameScene.m and add the following code:

Now, add the following code to GameViewController.m:

Run the Project

Now run the Project (Command+R) and you should see a screen scrolling until it reaches the end.

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

Download the entire project here.

  • stratusdodge

    I like the zoom effect during the intro, I’d like to develop a game where the zoom goes in and out at times to give the player an overall view of the world. Never seen anything quite like this for iOS yet!

  • Ali Jaf

    Hi,

    I am following your example but i have a couple of issues. I am hoping you can hel me out.

    I have my own set of tiles and i created the map and added it to the project and added the code you had also, but when i tried to run it i had an error.

    It says failed to load basically all the tiles i had in my map .. Now i added the map of the tiles but where do i add the tiles themselves ?

    I added the tiles in the assets folder as you’d normally do in a project but still same issue ..

    I notice you added tilseset.png and tilesetx2.png with the tilemap is that what i’m missing ?

    I dont have a png image with all the tiles like you do and i even tried copying urs into Tiled but it wouldnt accept it .

    Any idea what’s going on ?