I am new to SpriteKit, and I am trying to practice by making a simple 2D game. I’ve gotten so far as to have my map displayed on the screen, and cropped to only fill about 1/3 of the screen (so that I can leave space for other controls, etc).

However, applying the rotation and zooming in gestures to the map are giving me a headache. I’ve figured out that if I rotate the camera (SKCameraNode), then my whole screen rotates, and that is not what I want. You can see my attempt at: https://youtu.be/UHIifaoGQQw if you want to. In the video, I’d like the map to rotate and zoom within the green rectangle, and be cropped neatly within the green rectangle only. But as you can see, the whole thing rotates.

I tried to place my SKCameraNode inside the SKCropNode, but that didn’t help.

Also, I’ve tried to apply rotations to my SKTileMapNode object, and that is actually working correctly and cropping the visible map area to 1/3 of the screen. However, the rotation does not seem to be centered around the user’s center view, and the axis of rotation is always somewhat left or right of the viewed map center. This makes it very hard to rotate and zoom the map in any useful way.

Is there any way to utilize SKCameraNode and have it cropped “correctly”? If I rotate the whole SKTileMapNode, then I would need to do some advanced mathematics to calculate the new position of the SKTileMapNode after rotation, in order to center it to the view, and it seems to be very hard for me (not a math buff here, sorry).

This is how I render my map:

private func renderMap() {
  guard let map = currentMap else { return }
  guard let textureAtlas = textureAtlas else {
    print("Texture atlas not loaded")
    return
  }
  let tileSet = createTileSet(from: textureAtlas)
  let columns = map.mapData[0].count
  let rows = map.mapData.count
  let tileMap = SKTileMapNode(tileSet: tileSet, columns: columns, rows: rows, tileSize: tileSize)
  tileMap.anchorPoint = CGPoint(x: 0.5, y: 0.5)  
  // Fill the tile map with tiles based on the mapData
  for row in 0 ..< rows {
    for column in 0 ..< columns {
      let tileName = map.mapData[row][column]
      if let tileGroup = tileSet.tileGroups.first(where: { $0.name == tileName }) {
        tileMap. setTileGroup(tileGroup, forColumn: column, row: row)
      }
    }
  }
  // Create a crop node
  let cropNode = SKCropNode()
  let cropWidth = tileSize.width * 3
  let maskNode = SKShapeNode(rect: CGRect(x: 0, y: 0, width: cropWidth, height: 300))
  maskNode.fillColor = .white
  cropNode.maskNode = maskNode
  cropNode.addChild(tileMap)
  self.addChild(cropNode)
}

Here is my rotation handler:

// Handle rotation
@objc private func handleRotation(gesture: UIRotationGestureRecognizer) {
  print("handleRotation")
  guard let camera = camera else { return }
  if gesture. state == .changed | | gesture.state == .ended {
  camera.zRotation -= gesture.rotation
  gesture.rotation = 0.0 // Reset rotation factor
  print("handleRotation complete")
}