2D SpriteKit Games on iPhone X

[vipul_arvind]

I am developing SpriteKit based Game and following this book. This book extensively uses the concept of Playable area (for universal app design). However I have noticed that this approach doesnt handles iPhone X and the top of the game goes below the iPhone X notch at top. I need help on how to handle this.

[h1i2j3]

I’m on chapter 2, Zombie Conga.

If it’s happening in the Launch Screen it might be a story board issue.
See page 43 Launch Screen

When pinning the Image View, you had to not select constrain to margins, AND click the drop down on the 0 value and change it from Safe Area to View (current distance = 0)

Note: Note that you selected the top of the view, not the safe area. This is important so that the splash screen displays properly on the iPhone X.

---

If it’s about the GameScene not fitting correctly (ie top & bottom background cuts off):

I was able to modify the iPhone X’s gameScene so the visible area wasn’t scaled by 1.19, via a computed var to handle the logic of choosing the correct gameScene. Doing this with a switch or case pattern approach would also work.

iPhone X (before image)

iPhoneX (after) (Note: I changed background to yellow to highlight difference.)
The image needs to be wider, previously the background was zoomed in until horizontally the image met the sides (aspectFill does this)

class GameViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()
  
    var gameScene: GameScene {
      let width = view.frame.size.width
   // print("test width: \(width)")
      return 812 == width ?
        GameScene(size:CGSize(width: 2436, height: 1125)) : //iPhoneX
        GameScene(size:CGSize(width: 2048, height: 1536))   //other iPhone
    }
    
    let scene = gameScene

[vipul_arvind]

Thanks Rebecca. I had issue in both (Launch Screen & Actual Game scene). Now, I have fixed both of them. Its just I was testing just on iPhone 8+ so far and didn’t realize it earlier.

[h1i2j3]

@vipul_arvind

Now, I have fixed both of them.

Nice!

I got to the end of the chapter, and it had me create a playable rect with red boundary lines.
I modified my original code to be more precise/dynamic, and adjusted the playableRect code to work on the iPhone X.

GameViewController.swift

override func viewDidLoad() {
  super.viewDidLoad()
  // modified for more accurate calculations
  let aspectRatio = view.frame.size.width / view.frame.size.height
  let scene = aspectRatio < 2.0 ?
    GameScene(size: CGSize(width: 2048, height: 2048 / aspectRatio)) :
    GameScene(size: CGSize(width: 2436, height: 1125)) // iPhone X

  //scene.scaleMode = .aspectFill // removed
  // Not needed anymore, the logic above now handles this.

GameScene.swift

On page 74 - creates an override init(size:) for GameScene.
I changed the first line - the definition of maxAspectRatio - it now allows the playableRect’s bounds to show on an iPhone X

override init(size: CGSize) {
  let maxAspectRatio: CGFloat = size.width == 2048 ? 16.0/9.0 : 2.17 
// The true ratio is 2.1653
// but 2.17 allows for the red lines to be seen clearly on the X

Everything else in chapter 2 was left unchanged.

Cheers!
Rebecca

[h1i2j3]

Chapter 5: Camera :: A Scrolling Background

page 130

There is a method called backgroundNode()that handles placing a second image named background2 next to background1 - effectively elongating the scene.

The code for the method is found on Page 130, Chapter 5: Camera :: A Scrolling Background.

func backgroundNode() -> SKSpriteNode { 
  // ... lots of code ...
  return backgroundNode
}

I added that method to GameScene.swift, and then modified these 3 lines in didMove(to:)

/// Original
// let background = SKSpriteNode(imageNamed: "background1")
// background.anchorPoint = CGPoint(x: 0.5, y: 0.5)
// background.position = CGPoint(x: size.width / 2, y: size.height / 2)

/// Changes
let background = backgroundNode()
background.anchorPoint = CGPoint.zero
background.position = CGPoint(x: 0, 
                              y: -(background.size.height - frame.height) / 2)

iPhone X

I’ve tested these added changes to work starting from chapter 2.

I’m enjoying this book so much, the challenges at the end of the chapters are awesome!

Cheers!
Rebecca

[vipul_arvind]

You are the best…