iosswiftuistoryboardskview

How to size SKView sub view and SKScene correctly


I am trying to get / set the correct size of a subview (SKView).

I am using the storyboard to create a UIView, and a subview that is a SKView. I would like to the programmatically create a SKScene with the dimensions of the SKView.

My thought is that scene.size.height and scene.size.width will be equal to the SKView's height and width. To test this, I am drawing four blue circles in each corner, and red lines on the borders. I am only able to see the bottom left corner, when I am expecting to see all four blue corner dots and boarder lines.

Please ignore the black circles in the Scene, they are irrelevant.

iPhone 6 Screenshot (portrait)
iPhone 6 Screenshot (portrait)

iPhone 6 Screenshot (landscape) iPhone 6 Screenshot (landscape)

I added SW (South West), SE, NE, and NW labels

ViewController With SKView Reference This is where I create the SKSCene (see func newGame)

import UIKit
import SpriteKit


class CenterView: UIViewController, ActionDelegate {
    @IBOutlet weak private var navBar:UINavigationBar!
    @IBOutlet weak private var titleBar:UINavigationItem!
    @IBOutlet weak private var gameView:SKView!

    var navigation:NavigationDelegate?
    var action:ActionDelegate?
    var game:GameDelegate?

    override func viewDidLoad() {
        super.viewDidLoad()
        self.action = self
        newGame()
    }

    @IBAction func menuClick(sender: AnyObject) {
        navigation?.toggleLeftPanel()
    }

    func setTitleBarTitle(title: String) {
        titleBar.title = title
    }

    func newGame() {
        print("skview bounds: \(self.gameView.bounds.size)")
        let game = GameScene(size: self.gameView.bounds.size)
        self.game = game
        game.action = action
        game.scaleMode = .ResizeFill
        self.gameView.presentScene(game)
    }
}

Main.storyboard Main.storyboard

Constraints

Constraints

Adding Corner Circles & Border Lines

if let scene = self.scene {
            let dot = SKShapeNode(circleOfRadius: 10)
            dot.fillColor = UIColor.blueColor()
            dot.position = CGPoint(x: 0,y: 0)

            let dot1 = SKShapeNode(circleOfRadius: 10)
            dot1.fillColor = UIColor.blueColor()
            dot1.position = CGPoint(x: scene.size.width,y: 0)

            let dot2 = SKShapeNode(circleOfRadius: 10)
            dot2.fillColor = UIColor.blueColor()
            dot2.position = CGPoint(x: 0,y: scene.size.height)

            let dot3 = SKShapeNode(circleOfRadius: 10)
            dot3.fillColor = UIColor.blueColor()
            dot3.position = CGPoint(x: scene.size.width,y: scene.size.height)


            let left = SKShapeNode(rect: CGRect(x: 0, y: 0, width: 3, height: scene.size.height))
            let top = SKShapeNode(rect: CGRect(x: 0, y: scene.size.height, width: scene.size.width, height: 3))
            let right = SKShapeNode(rect: CGRect(x: scene.size.width, y: 0, width: 3, height: scene.size.height))
            let bottom = SKShapeNode(rect: CGRect(x: 0, y: 0, width: scene.size.width, height: 3))

            left.fillColor = UIColor.redColor()
            top.fillColor = UIColor.redColor()
            bottom.fillColor = UIColor.redColor()
            right.fillColor = UIColor.redColor()


            scene.addChild(dot)
            scene.addChild(dot1)
            scene.addChild(dot2)
            scene.addChild(dot3)

            scene.addChild(left)
            scene.addChild(top)
            scene.addChild(right)
            scene.addChild(bottom)
        }

Solution

  • It turned out that my constraints were not set up correctly.

    Constraints
    ios view constraints

    Result
    iPhone 4s portrait