itch.io

Today I learned the magic of centerRect to stretch a sprite while keeping the edges at the original scale. It's very useful to resize buttons.

Here's the code I used in an Xcode Playground:

import UIKit
import SpriteKit
import PlaygroundSupport

let sceneView = SKView(frame: CGRect(x: 0, y: 0, width: 320, height: 480))
let scene = SKScene(size: CGSize(width: 320, height: 480))
scene.anchorPoint = CGPoint(x: 0.5, y: 0.5)
sceneView.presentScene(scene)
PlaygroundPage.current.needsIndefiniteExecution = true
PlaygroundPage.current.liveView = sceneView

// Original
let btnNode = SKNode()
btnNode.position = CGPoint(x: 0, y: 200)
let btn = SKSpriteNode(imageNamed: "yellow_button00")
btnNode.addChild(btn)
let btnLabel = SKLabelNode(fontNamed: "Avenir-Black")
btnLabel.text = "Original sprite"
btnLabel.fontColor = .black
btnLabel.fontSize = 16
btnLabel.horizontalAlignmentMode = .center
btnLabel.verticalAlignmentMode = .center
btnNode.addChild(btnLabel)
scene.addChild(btnNode)

// X stretched without centerRect
let btnNode2 = SKNode()
btnNode2.position = CGPoint(x: 0, y: 130)
let btn2 = SKSpriteNode(imageNamed: "yellow_button00")
btn2.size = CGSize(width: 300, height: 49)
btnNode2.addChild(btn2)
let btnLabel2 = SKLabelNode(fontNamed: "Avenir-Black")
btnLabel2.text = "X stretched without centerRect"
btnLabel2.fontColor = .black
btnLabel2.fontSize = 16
btnLabel2.horizontalAlignmentMode = .center
btnLabel2.verticalAlignmentMode = .center
btnNode2.addChild(btnLabel2)
scene.addChild(btnNode2)

// X stretched with centerRect
let btnNode3 = SKNode()
btnNode3.position = CGPoint(x: 0, y: 60)
let btn3 = SKSpriteNode(imageNamed: "yellow_button00")
btn3.centerRect = CGRect(x: 10.0/190.0, y: 10.0/49.0, width: 170.0/190.0, height: 29.0/49.0)
btn3.xScale = 300.0/190.0
btn3.yScale = 49.0/49.0
btnNode3.addChild(btn3)
let btnLabel3 = SKLabelNode(fontNamed: "Avenir-Black")
btnLabel3.text = "X stretched with centerRect"
btnLabel3.fontColor = .black
btnLabel3.fontSize = 16
btnLabel3.horizontalAlignmentMode = .center
btnLabel3.verticalAlignmentMode = .center
btnNode3.addChild(btnLabel3)
scene.addChild(btnNode3)

// X/Y stretched without centerRect
let btnNode4 = SKNode()
btnNode4.position = CGPoint(x: 0, y: -40)
let btn4 = SKSpriteNode(imageNamed: "yellow_button00")
btn4.size = CGSize(width: 300, height: 100)
btnNode4.addChild(btn4)
let btnLabel4 = SKLabelNode(fontNamed: "Avenir-Black")
btnLabel4.text = "X/Y stretched without centerRect"
btnLabel4.fontColor = .black
btnLabel4.fontSize = 16
btnLabel4.horizontalAlignmentMode = .center
btnLabel4.verticalAlignmentMode = .center
btnNode4.addChild(btnLabel4)
scene.addChild(btnNode4)

// X/Y stretched with centerRect
let btnNode5 = SKNode()
btnNode5.position = CGPoint(x: 0, y: -160)
let btn5 = SKSpriteNode(imageNamed: "yellow_button00")
btn5.centerRect = CGRect(x: 10.0/190.0, y: 10.0/49.0, width: 170.0/190.0, height: 29.0/49.0)
btn5.xScale = 300.0/190.0
btn5.yScale = 100.0/49.0
btnNode5.addChild(btn5)
let btnLabel5 = SKLabelNode(fontNamed: "Avenir-Black")
btnLabel5.text = "X/Y stretched with centerRect"
btnLabel5.fontColor = .black
btnLabel5.fontSize = 16
btnLabel5.horizontalAlignmentMode = .center
btnLabel5.verticalAlignmentMode = .center
btnNode5.addChild(btnLabel5)
scene.addChild(btnNode5)