SpriteKit layout for beginner

Hello!

I'm developing for iOS for 4 years but I never dealed with SpriteKit before. Now I want to learn this framework an make a simple puzzle game. I used for UIKit layout (Autolayout, `layoutSubvies()`, etc.). What technologies do I use in SpriteKit? Everything seems to be fixed size. For example:

let backgroundNode = SKShapeNode(rectOf: CGSize(width: 100, height: 100))


I can create a rectangular SKShapeNode of size 100x100. But what if I want it to be resized according to scene size changes? What is the common approach?

Accepted Reply

For scene size use self.frame.width or self.frame.height


What trips up some SpriteKit developers initially is that if you use self.view?.frame.width or self.view?.bounds.width you don't actually get the scene width.


But it sounds like you aren't really using the Scene Editor to it's full potential here. A background image can easily be placed in the Scene Editor (the .sks file).


Now if you want the image / layout of GUI to be different for the iPad vs the iPhone, its a good idea to create a separate SKS file just for the iPad and one just for the iPhone. The scene is going to automatically size itself correctly for the various sizes within the device family (for example, iPad Pro, iPad Mini), so you don't have to worry about making an SKS file per device variant.


Most of my Universal games have an SKS file for the TV, iPhone and iPad. You can even check to see if a scene file exists with a suffix of "Pad" (for example "GameScenePad.sks") before loading the scene, so if there is an iPad only scene, it will load that. Otherwise you fall back to just using GameScene.sks


I cover this topic in almost all of my intensive game dev courses, but I'll try to record a standalone video on this topic soon.

Replies

For scene size use self.frame.width or self.frame.height


What trips up some SpriteKit developers initially is that if you use self.view?.frame.width or self.view?.bounds.width you don't actually get the scene width.


But it sounds like you aren't really using the Scene Editor to it's full potential here. A background image can easily be placed in the Scene Editor (the .sks file).


Now if you want the image / layout of GUI to be different for the iPad vs the iPhone, its a good idea to create a separate SKS file just for the iPad and one just for the iPhone. The scene is going to automatically size itself correctly for the various sizes within the device family (for example, iPad Pro, iPad Mini), so you don't have to worry about making an SKS file per device variant.


Most of my Universal games have an SKS file for the TV, iPhone and iPad. You can even check to see if a scene file exists with a suffix of "Pad" (for example "GameScenePad.sks") before loading the scene, so if there is an iPad only scene, it will load that. Otherwise you fall back to just using GameScene.sks


I cover this topic in almost all of my intensive game dev courses, but I'll try to record a standalone video on this topic soon.