使用SpriteKit绘制网格 [英] Draw a grid with SpriteKit
问题描述
使用这样的网格的最佳方法是什么? SpriteKit 2D游戏引擎?
要求:
What would be the best way to draw a grid like this by using the SpriteKit 2D game engine? Requirements:
- 以编程方式输入列数和行数(5x5,10x3,3x4等)。
- 使用
SKSpriteNode
或SKShapeNode
等编程方式绘制,因为只使用<的图像a href =https://upload.wikimedia.org/wikipedia/commons/d/dd/Square_-_black_simple.svg\"rel =noreferrer>这样的方块对我来说似乎不是很有效。 - 方块应该有一个固定的大小(假设每个方格都是40x40)。
- 网格应该在视图中垂直和水平居中。
- Input programatically the number of columns and rows (5x5, 10x3, 3x4 etc.).
- Draw it programmatically using something like
SKSpriteNode
orSKShapeNode
, since just using images of a square like this doesn't seem very efficient to me. - The squares should have a fixed size (let's say each is 40x40).
- The grid should be vertically and horizontally centred in the view.
我打算使用 SKSpriteNode
(来自图片)作为玩家在这个网格中移动不同的方块。
所以,我将在二维数组中保存每个方格的中心点(x,y),然后从玩家的当前位置移动到该位置。如果你对此有更好的建议,我也想听听。
I'm planning to use a SKSpriteNode
(from an image) as a player moving in different squares in this grid.
So, I'll save in a 2 dimensional array the central point (x,y) of each square and then move from the player's current position to that position. If you have a better suggestion for this too, I'd like to hear it.
我很感激Swift中的解决方案(最好是2.1),但Objective-C会也做。计划仅在iPhone设备上使用它。
我的问题是关闭到这个。任何帮助都表示赞赏。
I would appreciate a solution in Swift (preferably 2.1), but Objective-C would do too. Planning on using this only on iPhone devices.
My question is close to this one. Any help is appreciated.
推荐答案
我建议你将网格实现为 SKSpriteNode的纹理
因为Sprite Kit会在一次绘制调用中渲染网格。以下是如何执行此操作的示例:
I suggest you implement the grid as a texture of an SKSpriteNode
because Sprite Kit will renders the grid in a single draw call. Here's a example of how to do that:
class Grid:SKSpriteNode {
var rows:Int!
var cols:Int!
var blockSize:CGFloat!
convenience init?(blockSize:CGFloat,rows:Int,cols:Int) {
guard let texture = Grid.gridTexture(blockSize: blockSize,rows: rows, cols:cols) else {
return nil
}
self.init(texture: texture, color:SKColor.clear, size: texture.size())
self.blockSize = blockSize
self.rows = rows
self.cols = cols
}
class func gridTexture(blockSize:CGFloat,rows:Int,cols:Int) -> SKTexture? {
// Add 1 to the height and width to ensure the borders are within the sprite
let size = CGSize(width: CGFloat(cols)*blockSize+1.0, height: CGFloat(rows)*blockSize+1.0)
UIGraphicsBeginImageContext(size)
guard let context = UIGraphicsGetCurrentContext() else {
return nil
}
let bezierPath = UIBezierPath()
let offset:CGFloat = 0.5
// Draw vertical lines
for i in 0...cols {
let x = CGFloat(i)*blockSize + offset
bezierPath.move(to: CGPoint(x: x, y: 0))
bezierPath.addLine(to: CGPoint(x: x, y: size.height))
}
// Draw horizontal lines
for i in 0...rows {
let y = CGFloat(i)*blockSize + offset
bezierPath.move(to: CGPoint(x: 0, y: y))
bezierPath.addLine(to: CGPoint(x: size.width, y: y))
}
SKColor.white.setStroke()
bezierPath.lineWidth = 1.0
bezierPath.stroke()
context.addPath(bezierPath.cgPath)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return SKTexture(image: image!)
}
func gridPosition(row:Int, col:Int) -> CGPoint {
let offset = blockSize / 2.0 + 0.5
let x = CGFloat(col) * blockSize - (blockSize * CGFloat(cols)) / 2.0 + offset
let y = CGFloat(rows - row - 1) * blockSize - (blockSize * CGFloat(rows)) / 2.0 + offset
return CGPoint(x:x, y:y)
}
}
以下是如何创建网格并将游戏块添加到网格中
And here's how to create a grid and add a game piece to the grid
class GameScene: SKScene {
override func didMove(to: SKView) {
if let grid = Grid(blockSize: 40.0, rows:5, cols:5) {
grid.position = CGPoint (x:frame.midX, y:frame.midY)
addChild(grid)
let gamePiece = SKSpriteNode(imageNamed: "Spaceship")
gamePiece.setScale(0.0625)
gamePiece.position = grid.gridPosition(row: 1, col: 0)
grid.addChild(gamePiece)
}
}
}
更新:
要确定触摸了哪个网格方格,请将其添加到 init
To determine which grid square was touched, add this to init
self.isUserInteractionEnabled = true
这到网格
类:
override func touchesBegan(_ touches: Set<UITouch>, withEvent event: UIEvent?) {
for touch in touches {
let position = touch.location(in:self)
let node = atPoint(position)
if node != self {
let action = SKAction.rotate(by:CGFloat.pi*2, duration: 1)
node.run(action)
}
else {
let x = size.width / 2 + position.x
let y = size.height / 2 - position.y
let row = Int(floor(x / blockSize))
let col = Int(floor(y / blockSize))
print("\(row) \(col)")
}
}
}
这篇关于使用SpriteKit绘制网格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!