How to implement a SpriteKit tiled background 2d Platform

1
votes

When it comes to SpriteKit, there is not a lot of "Good" tutorials out there, so I call on the Stack overflow Gods to help me out.

I'm building a 2d platformer game for iOS. the map will scroll in all directions depending on character movement. I will implement a parallax background as well, but that is not the question I have for today.

I'm obviously trying to do this the most efficient way as possible so that I can incorporate big levels, but I'm not exactly sure how to do it properly. Do I use a bunch of small images that represent the tiled background or do I use one big one ( I hear this is a no go). Do I use a sprite sheet image with all tiles on it and then chop it up into an array.

I'm not too sure on how to implement an array of images and only show the ones that are on the screen. Do I remove all tiles from the scene, and then check which ones are within the bounds of the camera and add those back to the scene.

I'm looking for any detailed help on how I would implement this specifically for the SpriteKit using swift.

Thanks for any help! I really appreciate it!!!!

1
swiftimagebackgroundsprite-kittiled
What have you tried so far? This tutorial (raywenderlich.com/137216/…) seems like a good place to start. – Dave Weston
I just found out about Tile map nodes, so I'm now looking at that tutorial. Thanks for the reference – Discoveringmypath
The entire point of tile nodes is to reuse the same textures to reduce texture memory, but you then end up using more CPU usage., So if you see a lot of the same patterns in your bg, you may want to consider using a tile map because the value you would save in usable memory would outweight the CPU time used. If your BG has no repeatable patterns, then you do not want to use tiles. – Knight0fDragon
@Knight0fDragon thanks for the explanation. So just to be sure. If I want 1 layer of my background to be a unique image for say an area of 5760x1080 px. I should use 1 image for this, instead of splitting it up into tiles? – Discoveringmypath
You are using a lot of texture memory, it would have to be 2 images, since max texture size is 4096x4096 – Knight0fDragon

1 Answers

1
votes

There is actually a very good way to implement tmx tiled maps in spritekit and has been explained well in the Ray Wenderlich tutorials. The following links should give you everything you need.

Read this to get familiar with tiled maps

Download and import the JSTilemap library into your spritekit project

Read this tutorial to learn how to import tilemaps and work with them on a 2D platformer

For implementing the parallax effect, use different background and foreground objects apart from the actual background image and set the appropriate zPosition for each object so that they objects that are closer are shown over the ones which are farther. And finally, as your player moves forward, and objects move backwards, the closer objects will move much faster than the far objects so set a higher velocity to the closest objects and lower velocity to objects that are far. The background should scroll the slowest. This will give you a nice parallax effect and as is shown in this tutorial.

Also, bless Ray Wenderlich before bed everynight.