SKTexture from UIImage that respects aspect ratio

Question

I'm setting an image as the background for a SKScene with code similar to the following

/* In SKScene subclass */
background = SKSpriteNode()
background.anchorPoint = CGPointMake(0,1)
background.position = CGPointMake(0, size.height)
background.zPosition = Layer.Background
background.size = view!.bounds.size
background.texture = SKTexture(image: <# UIImage #>)
addChild(background)

This works to insert the image as a background for the scene, but if the image isn't the same aspect ratio as the background node, it is stretched to fill it.

(on the left is the result when an image is cropped to fit the aspect ratio of the SKSpriteNode, and on the right is the result when the image is of a different aspect ratio)

Is there a way to make the SKSpriteNode respect the original aspect ratio of the image, in the way that a UIImageView can be set to use UIViewContentModeScaleAspectFill?

EDIT Changed mention of UIViewContentModeScaleAspectFit to UIViewContentModeScaleAspectFill, got them mixed up.

No, it's a square whose dimensions are equal to the width of the device (e.g. on a 4in iPhone it would be 320x320). — Ziewvater, Mar 11 '15 at 16:22
so you want the image to always fit the width of the device without changing the aspect ratio? — rakeshbs, Mar 12 '15 at 07:08
I just realized that I made a mistake with my question. I want it to copy `UIViewContentModeScaleAspectFill`, not `Fit`, whoops. So I would want the texture to completely fill the scene, while respecting the image's aspect ratio, even if it were to leave out parts of the image to do so. I'll edit my question to reflect my mistake. — Ziewvater, Mar 12 '15 at 15:38

score 18 · Answer 1 · answered Mar 13 '15 at 09:04

You can create an extension for SKSpriteNode to do this.

extension SKSpriteNode {

    func aspectFillToSize(fillSize: CGSize) {

        if texture != nil {
            self.size = texture!.size()

            let verticalRatio = fillSize.height / self.texture!.size().height
            let horizontalRatio = fillSize.width /  self.texture!.size().width

            let scaleRatio = horizontalRatio > verticalRatio ? horizontalRatio : verticalRatio

            self.setScale(scaleRatio)
        }
    }

}

To use it

let background = SKSpriteNode()
background.anchorPoint = CGPointMake(0,1)
background.position = CGPointMake(0, size.height)
background.texture = SKTexture(imageNamed: "1.png")
background.aspectFillToSize(view.frame.size) // Do this after you set texture
addChild(background)

score 2 · Answer 2 · answered Sep 15 '20 at 09:24

Rakeshbs's answer is great. But I think the key point of this solution is to change the size of SKSpriteNode dynamically. Don't need to sale the node . So I update his code as below

extension SKSpriteNode {
func aspectFillToSize(fillSize: CGSize) {
    if let texture = self.texture {
        let horizontalRatio = fillSize.width / texture.size().width
        let verticalRatio = fillSize.height / texture.size().height
        let finalRatio = horizontalRatio < verticalRatio ? horizontalRatio : verticalRatio
        size = CGSize(width: texture.size().width * finalRatio, height: texture.size().height * finalRatio)
    }
}

}

SKTexture from UIImage that respects aspect ratio

2 Answers2