Is SKCropNode limited to a width below 5000? - swift

Question

I am trying to use a SKCropNode with a width of at least 5000 pixels, yet if the maskNode property width is greater than 4100 something strange happens -- the first 100-200 or so pixels are not cropped, and the cropping spans approx only 4100 pixels.
I'm on a Mac Mini M1, Ventura 13.0.1 and Xcode 14.1 (14B47b)
Here is the working code:
import SwiftUI
import SpriteKit
struct ContentView: View {
#State var spriteView : SpriteView!
var body: some View {
ScrollView(.horizontal, showsIndicators: true) {
ZStack {
if spriteView != nil {
spriteView
}
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
}
}
.padding()
.onAppear {
spriteView = .init(scene: myScene)
}
.frame(minWidth: 1000, minHeight: 500)
}
}
var myScene : SKScene {
let r = SKScene.init(size: .init(width: 2000, height: 500))
r.backgroundColor = .yellow
let maskRect = SKShapeNode.init(rect: .init(x: 0, y: 100, width: 5000, height: 300))
// let maskRect = SKShapeNode.init(rect: .init(x: 0, y: 100, width: 4096+2, height: 300))
maskRect.fillColor = .white
maskRect.lineWidth = 0
let redRect = SKShapeNode.init(rect: .init(origin: .zero, size: .init(width: 5000, height: 500)))
redRect.fillColor = .red
redRect.lineWidth = 0
let path = CGMutablePath.init()
path.move(to: .zero)
path.addLine(to: .init(x: 1000, y: 500))
let blueLine = SKShapeNode.init(path: path)
blueLine.strokeColor = .blue
blueLine.lineWidth = 12
redRect.addChild(blueLine)
let cropNode = SKCropNode.init()
cropNode.maskNode = SKNode.init()
cropNode.maskNode?.addChild(maskRect)
cropNode.addChild(redRect)
let blackRect = SKShapeNode.init(rect: .init(origin: .init(x: 0, y: 100), size: .init(width: 5000, height: 300)))
blackRect.fillColor = .black
blackRect.lineWidth = 0
r.addChild(blackRect)
r.addChild(cropNode)
return r
}
}
The result I get is
If I change the width to 4096 I get the correct result without the black rectangle on the left hand side, ie let maskRect = SKShapeNode.init(rect: .init(x: 0, y: 100, width: 4096, height: 300))
EDIT:
Using SKSpriteNode as suggested produced the same results for me:
let maskRect = SKSpriteNode.init(color: .black, size: .init(width: 5000, height: 300))
maskRect.position.x = 0 + maskRect.size.width/2
maskRect.position.y = 100 + maskRect.size.height/2

Answer 1

this appears to be an issue with SKShapeNode.
solution: use SKSpriteNode instead -- both for your mask and for any other large elements in the scene. here is an illustration (swap the red and green nodes to see the glitch):
import SwiftUI
import SpriteKit
struct GameSceneCrop: View {
#State private var scene = CropScene()
var body: some View {
SpriteView(scene: scene)
}
}
class CropScene: SKScene {
let skCameraNode = SKCameraNode()
var WIDTH:CGFloat = 5000
var HEIGHT:CGFloat = 1000
let container = SKNode()
override func didMove(to view: SKView) {
scaleMode = .aspectFill // Set the scale mode to scale to fit the window
backgroundColor = .yellow
anchorPoint = CGPoint(x: 0.5, y: 0.5)
//set up camera node
camera = skCameraNode
addChild(skCameraNode)
skCameraNode.setScale( 10000 )
addChild(container)
rebuild()
}
func rebuild() {
container.removeAllChildren()
//a green SKSpriteNode
let green = SKSpriteNode(color: .green, size: CGSize(width: WIDTH, height: HEIGHT))
//a red SKShapeNode
let red = SKShapeNode(rectOf: CGSize(width: WIDTH, height: HEIGHT))
red.fillColor = .red
//crop node
let mask = SKSpriteNode(color: .black, size: red.frame.size) //using SKSpriteNode here instead of SKShapeNode
let crop_node = SKCropNode()
crop_node.maskNode = mask
crop_node.addChild(green) //<--- replace green SKSpriteNode with red SKShapeNode to see clipping glitch
container.addChild(crop_node)
//draw outline around red block
let reference_frame = SKShapeNode(rect: red.frame.insetBy(dx: -50, dy: -50))
reference_frame.strokeColor = .black
reference_frame.lineWidth = 50
container.addChild(reference_frame)
}
override func update(_ currentTime: TimeInterval) {
let x = 0.65 + (sin(currentTime*2) + 1) / 4
WIDTH = 5000 * x
rebuild()
}
}