CODEWITHSUNDEEP
iosiphonexcodeswiftsprite-kit
karoop
karoop

Reputation: 16

Show content outside border with AspectFit in SpriteKit

I'm trying to show content outside of the border of the scene when I use .AspectFit scale mode for the devices that don't match the aspect ratio of my scene. My scene is set up for iPhone 5 & 6 aspect ratio (1080 x 1920) and has some test nodes outside the area defined by the yellow border line:

enter image description here

The thick red lines around the white screen are just outside the border and should not be visible unless the content is letterboxed.

This is the code in my view controller that presents the scene:

override func viewDidLoad() {
    super.viewDidLoad()
    if let scene = GameScene(fileNamed:"MainMenu") {
        // Configure the view.
        let skView = self.view as! SKView
        skView.showsFPS = true
        skView.showsNodeCount = true
        skView.ignoresSiblingOrder = true

        /* Set the scale mode to scale to fit the window */
        scene.scaleMode = .AspectFit
        skView.presentScene(scene)
    }
}

When I run it in iPhone 6s simulator I see the expected result, which is just the squares in the corners. However, when I run it in the 4s simulator, instead of the red bars on the right and left, I see black bars:

enter image description here

How can I tell the view controller / application to use the scene content instead of black emptiness to fill in extra space when the scene is resized to fit on the screen?

Upvotes: 0

Views: 816

Answers (1)

max
max

Reputation: 11

I came across the same issue and came up with something "hacky" that works. Keep using .aspectFit and dynamically adjust the aspect of your content to match the screen.

This code assumes you are using the default 0.5, 0.5 anchor point in the .sks file and you will need to set originalSize to what you were using when you designed the scene.

Anyone using this would do well to add some error checking to it and/or optimise it so it's not continuously running on every frame.

override func update(_ currentTime: TimeInterval) {
    // hacky resize
    do {
        let originalSize = CGSize(720, 1140)
        let winSize = self.view!.frame.size
        let originalAspect = originalSize.width/originalSize.height
        let winAspect = winSize.width/winSize.height
        var newSize = originalSize; do {
            if winAspect > originalAspect {
                newSize.width = originalSize.height * winAspect
            } else if winAspect < originalAspect {
                newSize.height = originalSize.width / winAspect
            }
        }
        self.size = newSize
        self.scaleMode = .aspectFit
    }
}

Upvotes: 1

Related Questions