Safe Area Problems

Hey Guys!
I am very new to app development and I have been following Chris’ course for beginners on youtube. I am having trouble with this safe area where on the iPhone 8, it has a white margin around the sides. Here is a screen shot which might help you understand. I checked the superview and everything, and all the constraints are set to superview. Does anyone know how to understand this?

Hi Arshmeet,

Welcome to the Code Crew community

Have a close look at each constraint you have set. Select the constraint in your Document Outline view and see if there is a value in the Constant field. If there is then set it to zero for each constraint so that the image pins to the very edge of the screen rather than to the edge of the safe area.

The way you set the constraints in the first place will impact on what happens when you apply them.

    1. uncheck Constrain to margins

If you have done that correctly, your storyboard ViewController should look something like this.

I am in the same boat as you, so realize that my answer is not guaranteed to be correct, but it did worked for me.

I am doing everything via Xcode, no storyboarding.

In the GameViewController I added the code block below into override func viewDidLoad():

originalS.translatesAutoresizingMaskIntoConstraints = false
originalS.leftAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leftAnchor).isActive = true
originalS.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 0).isActive = true
originalS.rightAnchor.constraint(equalTo: view.safeAreaLayoutGuide.rightAnchor).isActive = true
originalS.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor , constant: -0).isActive = true

Then I created GameScene within a separate thread:

var scene : GameScene!
DispatchQueue.main.async {
scene = GameScene(size: CGSize(width: originalS.frame.width,
height: originalS.frame.height))
scene.anchorPoint = CGPoint(x: 0.0, y: 0.0)
scene.scaleMode = .aspectFit
myGlobalVars.passGo = true

Then in GameScene’s DidLoad started like this:

override func didMove(to view: SKView)
super.didMove(to: view)
backGround = SKSpriteNode(imageNamed: “background”)

 repeat {

} while myGlobalVars.passGo == false

And from then on, all the safeArea layout constraints work on every version of the simulator.

Again, can’t guarantee this is 100% correct, but it works.