What’s New In SpriteKit on iOS 10: A Look At Tile Maps

Hi there,

How much does this new tile functionality help with isometric maps/levels? I’ve seen tutorials for isometric games get very complicated because of movement, and depth sorting… will it be easier with the new tile classes?

Thanks!
Ian

The isometric tile map is just like the grid tile map only diamond shaped. So I don’t think it will help very much with movement and depth sorting. I haven’t had much success with it to date. Hopefully it will be a WWDC 2017 feature.

But WWDC 2016 tile maps are a great start.

Hello Caroline,

I hope you can assist me i am having some difficulties assigning physicsBody to my tiles.

My game is a 2D superMario style game and i want my player to move and jump on the tiles.

I have created the tileMap and assigned userData to each tile named it “tile” and gave it a boolean value.

I am having problem understanding the solutions you are giving @stefano and also failing to figure out the correct syntax to give each tile in my tileMap its own physicsBody.

I would very much appreciate your help.

thanks !

@mj86 - you can’t assign physics bodies to tiles. You will need to create SKNodes with physics bodies. The center of the SKNode should be at the center of the tile.

stephano’s solution involved an array of physics bodies. This array of physics bodies was then added to the tile map node.

In apple developer’s presentation on the new SpriteKit and tile maps, the guy presents a game similar to mine. A player moving over tiles and jumping. He mentioned that achieving this is done by giving tiles user data and then in code we look through each tiles for those with the user data and then generate physics properties so that the player collides with them …

so how can i simulate collision physics between the tiles and the player in code so that the player can jump on and off the tiles.

I know i am asking for details but i am still learning swift and struggling with this.

I have done the game in objective c but without using a tile map editor. Each tile is added as a sprite and given physics properties.

I could be wrong, but I believe that he is processing each tile and looking at the user data. If the user data has a “wall” property, for example, he creates an SKNode with physics properties.

This SKNode would be a child of the tile map node.

So you’ll need to loop through all your rows and columns in the tile map, and for each tile check the user data.

If the user data says it should be a wall, add an SKNode with the physics properties to that position.

Hi,

After I enter the code below at the end of the update(_), the app crash and I get >>fatal error: unexpectedly found nil while unwrapping an Optional value<< on line that we have let position = car.position

if tile == nil {
maxSpeed = waterMaxSpeed
print(“water”)
} else {
maxSpeed = landMaxSpeed
print(“grass”)
}

I am trying to fix it but with no luck till now.

Any tip?

Denis

@florjancic - it’s not immediately obvious. I can only suggest you compare your code with the final sample code

slightly off topic
I have the rubber duck tutorial and the Apple 2D book. Both use the tile map tool. I was wondering if there is some tutorial to create this in swift alone. I can do this in C# and GDI+ graphics without a problem but I have seen nothing for OSX especially where one can parse a tile sheet into 32x32 tiles and use a 2D array (well for swift a flattened array in one dimension) and build a tile map

Anything out there to demonstrate how this could be done?

Liked the rubber ducks by the way

@stan10785 - I think a tile atlas would be better than parsing a tile image. That way you have the easy job of adding the separate tile images into the app, and Xcode builds them up into a tile sheet (this is the atlas). So you get the efficiency of the single image, but you’re able to address the images singly.

Otherwise something like this I guess: iphone - how to crop image in to pieces programmatically - Stack Overflow

(Rubber ducks rule!)

I’ve an old projects with olds map builded with Tiled Map Editor (mapeditor.org).
My question is: Is it better to use this guide and follow all official Apple lines to re-make the map or anyone test this GitHub - mfessenden/SKTiled: Swift framework for working with Tiled assets in SpriteKit where I don’t change my tileset but directly work with TMX? What’s your opinions? Thank you.

@mrhevor - I can’t really answer that question. This tutorial shows pretty much everything that is available in Apple’s tile map API.

I think TME will work better if you are using isometric, as Apple’s API is not yet as sophisticated.

However, you have to consider these:

  1. Your code is already written and if it works, why fix it?
  2. TME is more mature
  3. Apple will continue to update their tile map editor probably faster than TME does.
  4. If you want to work cross platform, don’t use Apple’s tile map
  5. Apple’s APIs will 99% of the time work better than external code

The GitHub link you gave I think is in its infancy. This one GitHub - TomLinthwaite/SKTilemap: An addition to Apples Sprite Kit frame work for iOS & OSX which allows for the creation of tilemaps either programmatically or from a .tmx file (created in Tiled). SKTilemap is written purely in Swift and sets out to be a simple solution for all game programmers alike to add tilemaps to their Sprite Kit games. has been around longer, but I don’t know whether he is still updating it.

1 Like

@caroline Great point of view, thank you to your analisys.
I have really appreciated. My doubts revolve around to performances but you have answered to all questions.

I just really like the tile map. Thank you for sharing this to us. Great concept

1 Like

Hi Caroline,

I’m the author of SKTiled and just wanted to clarify that it’s definitely in release and actively being developed. It fully supports the latest versions of TME as well as Swift 3/iOS10+/macOS10+. I’ve kept the repository semi-private while I wrapped up the Swift 2 => 3 translation, but it’s stable and has been used in at least 3 game projects that I’m aware of as well as supporting almost all of TME’s features. AFAIK, it’s the most complete Swift-based solution for rendering TMX files in SpriteKit and has correctly rendering everything I’ve tested it with.

I did begin a branch that used my TMX parser to translate TMS files to Apple’s new tilemap format, but put it on hold as currently there are too many features that TME supports that don’t translate well to SpriteKit. Orthogonal maps render well, but SpriteKit doesn’t allow for tile maps and tile sets to use different tile sizes, which greatly reduces the appeal of SpriteKit in its current form, IMO.

Personally, I prefer using TME to set up scenes because it’s fast and easy to update. Using Xcode to layout tile maps is very intuitive, but it takes considerably longer to update your tile textures as you adjust the graphics. It’s simple to create a spritesheet with Photoshop (or your favorite image editing program) and export to TME, while Xcode’s map editor requires you to update each tile individually every time you change the master image.

Some of the TME features I’ve asked Apple to implement:

  • create tilesets from a single spritesheet image
  • independent tile sizes for tile maps and tilesets
  • adjustable hex side length for hexagonal maps
  • support for staggered isometric maps

If you have an questions or feature requests, please feel free to message me.

Regards,
Michael

SKTiled Documentation

1 Like

@mfessenden - Thank you so much for sharing this here. It’s always good to have choices, and SpriteKit is much younger than yours and doesn’t have all TME’s options. Especially, as you say, independent tile sizes and isometric are problematic.

1 Like

Great tutorial!
I’m have trouble getting GKObstacleGraph to work with the tilemap. Please help!
I tried to loop through all the tiles within the obstacle layer of the tilemap and create a polygon for each tile and store it in the GKObstacleGraph. Each tile in obstacle layer is a wall tile. The map looks like some type of dungeon crawler, so the wall is all over the places.
I have something like below:

for row in 0…<tileMapNode.numberOfRows {
for column in 0…<tileMapNode.numberOfColumns {
let tile = tileMapNode.tileDefinition(atColumn: column, row: row)
let tileCenter = tileMapName.centerOfTile(atColumn: column, row: row)
//find 4 corners of each tile from its center
let bottomLeft = float2(CGPointMake(tileCenter.x - tile.size.width/2, tileCenter.y - tile.size.height/2))
let bottomRight = float2(CGPointMake((tileCenter.x - tile.size.width/2, tileCenter.y + tile.size.height/2))
let topRight = float2(CGPointMake((tileCenter.x + tile.size.width/2, tileCenter.y + tile.size.height/2))
let topLeft = float2(CGPointMake((tileCenter.x - tile.size.width/2, tileCenter.y + tile.size.height/2))
var vertices = [topLeft , bottomLeft , bottomRight , topRight ]
let obstacle = GKPolygonObstacle(points: &vertices, count: 4)
obstacleGraph.add(obstacle)
}
}

However, when i run the app it shows that there are over 80000 nodes, way too many pathfinding pathes.
Any help would be appreciated.

@luckybob - I’m afraid I can’t help. I haven’t done much with GameplayKit.

Hello,

I have the same issue than @bcortens: the app crash when I run it on iPhone 5 with the following error:
2016-12-06 01:36:24.679 RDRescue[6501:404326] *** Terminating app due to uncaught exception ‘NSRangeException’, reason: ‘*** -[NSKeyedUnarchiver decodeInt32ForKey:]: value (9223372036854775807) for key (_defaultTileGroupIndex) too large to fit in 32-bit integer’

As I can see, this error happened each time we initialise a SKTileMapNode or SKTileSet from a given name (i.e.: car = childNode(withName: “car”)) on a 32bit device (the max value of Int64 seems to be used in some place).
Do you know if is there a way to prevent this issue ?

I want to create an app using Tile Maps which will be compatible with iPhone 5. That’s why it is very important for me to find a solution.

Thanks for this great tutorial !

  • ccolombel