尝试使用Swift以编程方式创建等距网格

Question

我以编程方式尝试此操作的唯一原因是我可以访问每个磁贴的位置,从而可以操作网格.我已经查看了大约15种使用其他编程语言的不同教程,但即使有了这些知识,我仍然很难在Swift中创建一个.

我已经尝试创建一个嵌套的for循环,但我甚至不确定循环中的代码是否具有创建等距网格的逻辑意义,我只是将其从我发现的其中一个教程中删除:

func generateGrid() {
    for (var i = 0; i < 5; i++) {
        for (var j = 5; j >= 0; j--){
            tile.position = CGPoint(x: (j * Int(tile.size.height) / 2) + 
                                       (i * Int(tile.size.width) / 2), 
                                    y: (i * Int(tile.size.height) / 2) - 
                                       (j * Int(tile.size.width) / 2))
            addChild(tile)
        }
    }
}

然后我尝试在"didMoveToView"函数中调用它,但显然你不能多次添加同一个节点.

请给我任何方向.

Answer 1

这是一个如何在SpriteKit中创建等距网格的示例:

定义网格设置

let tileHeight:CGFloat = 16.0
let tileWidth:CGFloat = 32.0
let numRows = 5
let numCols = 6

创建网格元素并将其添加到适当位置的场景中

let size = CGSizeMake(tileWidth, tileHeight)
for row in 1...numRows {
    for col in 1...numCols {
        // Create a new tile object
        let tile = newTile(size)
        // Convert (col,row) to (x,y)
        tile.position = tilePosition(col, row: row)
        self.addChild(tile)
    }
}

此功能将网格位置转换为x和y场景坐标.使用此选项可以创建网格并在网格上添加建筑物.

func tilePosition(col:Int, row:Int) -> CGPoint {
    let x = (CGFloat(row) * tileWidth  / 2.0) + (CGFloat(col) * tileWidth  / 2.0)
    let y = (CGFloat(col) * tileHeight / 2.0) - (CGFloat(row) * tileHeight / 2.0)
    return CGPointMake(x+100.0, y+100.0)
}

此功能创建一个新的菱形 SKShapeNode

func newTile(size:CGSize) -> SKShapeNode {
    let shape = SKShapeNode()
    let path = UIBezierPath()
    path.move(to: CGPoint(x:0, y:size.height / 2.0))
    path.addLine(to: CGPoint(x:size.width / 2.0, y:0))
    path.addLine(to: CGPoint(x:0, y:-size.height / 2.0))
    path.addLine(to: CGPoint(x:-size.width / 2.0, y:0))
    path.close()
    shape.path = path.cgPath
    shape.lineWidth = 1.0
    shape.fillColor = SKColor.gray
    return shape
}

此功能确定适当的z位置,以确保放置在网格上的建筑物将以正确的顺序渲染.

func buildingZPosition(col:Int, row:Int) -> CGFloat {
    return CGFloat(row*numCols + numCols-col)
}

图1.使用上面的代码创建的等距网格

Answer 2

要像这样创建等距网格

一个人必须创建一个两个循环.其中一个遍历行,另一个遍历列.请注意,每个其他列的中心向上移动了平铺高度的一半,并且每隔一行移动相同.为了弥补这一点,我们检查行和列是偶数还是奇数并相应地进行调整.潜在的功能看起来像这样:

func generateGrid() {

    for i in 0..<5 {

        // Every other line needs to be shifted
        var offsetX = 0
        if i % 2 == 0 {
            offsetX = 0
        } else {
            offsetX = tile.size.width / 2.0
        }

        for j in 0..<5 {
            var tile = Tile()

            // Every other line needs to be shifted
            var offsetY = 0
            if i % 2 == 0 {
                offsetX = 0
            } else {
                offsetX = tile.size.height / 2.0
            }

            tile.position = CGPoint(x: (i * tile.size.width) - offsetX, y: (j * tile.size.height) - offsetY)
            addChild(tile)
        }
    }
}