在 UIKit 和 SpriteKit 坐标系之间转换

Question

我是 iOS 编程新手，几乎没有使用 SpriteKit 的经验，所以如果这是一个荒谬的问题，请原谅我。

我一直在尝试用二维数组制作一个基本网格，我更愿意从左上角使用它0, 0。

在研究了 UIKit 和 SpriteKit 之间坐标系的差异之后，我遇到了 this answer 关于 Converting Between View and Scene Coordinates 但它似乎并没有像我想象的那样改变 y 值。我猜我没有正确使用它，或者这不是它的本意，我不知道。

当我尝试这个时：

let convertedCoordinates = convert(cellCoordinates, to: grid)
print(cellCoordinates.y, convertedCoordinates.y)

它似乎对 y 值没有任何影响。

我发现当我在let cellCoordinates = CGPoint(x: cx, y: cy) 行中更改为“y: -cy”时 然后它似乎确实按我希望的方式工作，但我不知道这是否是唯一的解决方案，或者这样做是否会在更复杂的情况下按预期工作。

这是我正在使用的代码：

import SpriteKit
import GameplayKit

class GameScene: SKScene {

   override func didMove(to view: SKView) {
      var background: SKShapeNode!
      background = SKShapeNode(rectOf: CGSize(width: frame.size.width, height: frame.size.height))
      background.fillColor = SKColor.lightGray
      self.addChild(background)

      let margin = CGFloat(50)
      let width = frame.size.width - margin
      let height = frame.size.height - margin

      let centerX = frame.midX - width / 2
      let centerY = frame.midY - height / 2

      var grid: SKShapeNode!
      grid = SKShapeNode(rectOf: CGSize(width: width, height: height))
      grid.strokeColor = SKColor.clear
      self.addChild(grid)

      let numRows = 2
      let numCols = 3

      let cellWidth = width / CGFloat(numCols)

      for r in 0..<numRows {
         for c in 0..<numCols {

            let cx = centerX + (cellWidth / 2) + (CGFloat(c) * cellWidth)
            let cy = centerY + (cellWidth / 2) + (CGFloat(r) * cellWidth)

            //***
            let cellCoordinates = CGPoint(x: cx, y: cy)
            //***

            let cellNode = SKShapeNode(rectOf: CGSize(width: cellWidth, height: cellWidth))

            let convertedCoordinates = convert(cellCoordinates, to: grid)
            print(cellCoordinates.y, convertedCoordinates.y)

            cellNode.strokeColor = SKColor.black
            cellNode.lineWidth = 5
            cellNode.fillColor = SKColor.darkGray
            cellNode.position = convertedCoordinates

            let textNode = SKLabelNode(text: String("\(r),\(c)"))
            textNode.fontName = "Menlo"
            textNode.fontSize = 60
            textNode.verticalAlignmentMode = .center
            textNode.position = convertedCoordinates

            grid.addChild(cellNode)
            grid.addChild(textNode)
         }
      }
   }
}

Answer 1

这更像是一个哲学答案，而不是一个实施答案。至于以某种方式翻转 SpriteKit 的坐标系，好吧，你将不断地与它作斗争。最好直接接受系统。

您的问题的本质更多是模型和视图的分离。当你说

我希望从左上角开始使用它，0, 0

您的意思是，您在心理上将游戏视为左上角有 0,0 的单元格网格。这是非常好的和自然的。那是你的游戏模型。但是你在代码中写了什么？

let cx = centerX + (cellWidth / 2) + (CGFloat(c) * cellWidth)
let cy = centerY + (cellWidth / 2) + (CGFloat(r) * cellWidth)
let cellCoordinates = CGPoint(x: cx, y: cy)
let convertedCoordinates = convert(cellCoordinates, to: grid)

这就是你难以摆脱的观点。你有一个抽象模型网格，你用左上角的 r,c 和 0,0 进行索引，并且它的坐标以单位步进向下和向右增加。然后是模型的视图，它可能取决于屏幕分辨率、纵横比、设备方向等。如果您将两者在精神上分开，您通常会发现您可以将两个系统之间的转换隔离到一个小接口。在这些地方，你可能需要做一些事情，比如缩放轴或翻转其中一个，或者在一个方向上拉伸东西以匹配纵横比。

在这种情况下，如果您从左上角首选 0,0 的心智模型开始，并考虑游戏的运作方式，则通常会根据单元格进行操作。好的，这表明二维数组或数组数组可能是自然的。也许细胞最终会成为你游戏中的一个类。他们可能会有一个 node 属性来存储 SpriteKit 节点。你可能会得到这样的结果：

struct boardPosition {
  let row: Int
  let col: Int
}

class Cell {
  let pos: boardPosition
  let node: SKNode

  init(pos: boardPosition, in board: Board) {
    self.pos = pos
    node = SKShapeNode(...)
    board.node.addChild(node)
  }
}

class Board {
  let cells: [[Cell]]
  let node: SKNode

  init(numRows: Int, numColumns: Int) {
    ...
  }

  func movePiece(from: boardPosition, to: boardPosition) {
    let piece = cell[from.row][from.col].removePiece()
    cell[to.row][to.col].addPiece(piece)
  }
}

游戏的运作将根据您的心智模型进行。随着行索引的增加，单元格的SKNode 节点的 y 坐标恰好减小的事实将被完全掩盖。

Answer 2

将所有适用的节点和场景的锚点设置为 0,1 以使其安装到左上角并设置您的世界节点（如果您没有，我建议添加它，它是您的基本 SKNode用于放置所有游戏节点，允许您为不适用于游戏世界的事物使用单独的节点，例如 hud 和覆盖）yScale 为 -1 以使 y 向下而不是向上递增。

编辑：

在处理 SKShapeNodes 时，您不必担心图像被反转，除非您的形状不明显。为晦涩的形状设计 CGPath 时，只需翻转即可。

shape.path = shape.path!.copy(using:CGAffineTransform(scaleX:1,y:-1))

更大的问题是 SKShapeNode 没有锚点。相反，您需要移动整个 CGPath

为此，请添加以下行：

shape.path = shape.path!.copy(using:CGAffineTransform(translationX:shape.frame.width/2,y:shape.frame.height/2))

如果将来处理 SKSprite 节点.... 这将导致您的资产倒置，因此您需要做的就是在导入之前翻转资产，使用辅助节点翻转 y 轴，或为所有节点分配 yScale 为 -1。在垂直导入之前翻转所有资产将是最便宜的方法，我相信你也可以在 xcassets 中翻转它，但是当我再次回到 MacOS 时，我需要验证这一点。