从零开始的8-bit迷宫探险【Level 9】与 SpriteKit 的初次见面 (二)

今日目标

• 在 SKScene 中加入节点 (Node)
• 认识座标系统

SKNode

SKNode 是所有 SpriteKit Node 中的基础类别，像是绘制图形或图片 (SKSpriteNode) 及文字 (SKLabelNode) 等，都是他的子类别。他提供了基本的属性供子类别们使用，可以将它当作一个容器的概念，在 SKNode 中加入其他的子节点，当对父节点进行移动时，子节点也会跟着移动。

例如我们将前一天加的蓝色小方块改放到 SKNode 中，并把 SKNode 加到 Scene 中，运行起来的结果会跟将蓝色小方块直接加到 Scene 中无差异。

• 加入节点的方式：可使用 addChild 方法， 并带入要加入的节点。

let node = SKNode()
self.addChild(node)

let spriteNode = SKSpriteNode(color: .blue, size: CGSize(width: CGFloat(20), height: CGFloat(20)))
node.addChild(spriteNode)

接着若是对 SKNode 进行位置上的移动，蓝色小方块也会跟着移动

node.position = CGPoint(x: 0, y: 200)

这样做的好处是，当节点变多时，可以更有系统的管理加进Scene中的节点。

SKSpriteNode

SKSpriteNode 可以让我们绘制图形或图片

刚刚前面已经看过新增图形的范例，需配置他的颜色 (color) 及尺寸 (size)

let spriteNode = SKSpriteNode(color: .blue, size: CGSize(width: CGFloat(20), height: CGFloat(20)))
self.addChild(spriteNode)

而新增图片的方式，需配置档案名称 (imageNamed)。
在使用 Playground 时，可以拖拉图片放进左侧档案列表的 Resources 里。
若是在开发专案时，可以拖拉图片放进左侧档案列表的 Assets.xcassets 里。

接着写上程序码，把 "tree" 带进去：

let spriteImg = SKSpriteNode(imageNamed: "tree")
self.addChild(spriteImg)

画面中就出现一棵树了

座标系统

anchorPoint

在 SpriteKit 的世界中，画面的原点在左下角，用(0, 0)代表。

• (0, 0)：左下角
• (0, 1)：左上角
• (1, 0)：右下角
• (1, 1)：右上角
• (0.5, 0.5)：中央

可以透过 anchorPoint 属性来对 node 做个别的设定，预设系统会设定为中央 (0.5, 0.5)，因此刚刚加的树节点会出现在画面的正中间。

我们将 anchorPoint 改为左上角观察看看：

spriteImg.anchorPoint = CGPoint(x: 0, y: 1)

可以发现树本身以左上角当作定位点，而父层场景的定位点是(0.5, 0.5)，因此可以看到树的左上角定在父层的中心

若将场景的定位点也改成左上角：

self.anchorPoint = CGPoint(x: 0, y: 1)

可以看到整个场景被移到左上角了

position

position 属性代表的是自己在父节点中的位置，会依据父节点的 anchorPoint 来做位置上的移动，预设值是 (0.0, 0.0)。两个数字分别代表x轴及y轴的位置。
以 anchorPoint 为基准：

• 往右为正数
• 往左为负数
• 往上为正数
• 往下为负数

现在试着将树调整为对齐底部
我们先将刚刚调整的 anchorPoint 还原，先单纯将树的 position 调整至置底的位置，因场景的 anchorPoint 为预设 (0.5, 0.5)，故需取画面高度的一半，且是负数的。

spriteImg.position = CGPoint(x: 0, y: -self.size.height / 2)

可以看到树往下移动了

但因为现在树的 anchorPoint 还是 (0.5, 0.5)，需将树的 anchorPoint 改为置底

spriteImg.anchorPoint = CGPoint(x: 0.5, y: 0)

我们顺利达成想要的效果了！

SKLabelNode

我们可以直接在 .sks 场景中新增一个文字节点，像是 Playground 给的范例，画面中已经有 "Hello, World!"

也可以透过程序码的方式，使用 SKLabelNode 新增文字节点
新增一个文字节点到画面上，需带入它的文字内容

let labelNode = SKLabelNode(text: "Tree")
self.addChild(labelNode)

文字出现在画面正中间了

我们可以透过属性改变文字的样貌

• 使用 fontColor 给文字颜色
• 使用 fontSize 给文字大小

let labelNode = SKLabelNode(text: "Tree")
labelNode.fontColor = UIColor.green
labelNode.fontSize = CGFloat(60)
self.addChild(labelNode)

文字从小变大，而且变成绿色了

接着我们可以调整它的位置，想将它调整到画面的左上方
调整 position 为左上角的位置

• 透过 horizontalAlignmentMode 可以调整它的水平对齐模式
• 透过 verticalAlignmentMode 可以调整它的垂直对齐模式

我们将它调整为水平置左、垂直置顶

let labelNode = SKLabelNode(text: "Tree")
labelNode.fontColor = UIColor.green
labelNode.fontSize = CGFloat(60)
labelNode.position = CGPoint(x: -self.size.width / 2, y: self.size.height / 2)
labelNode.horizontalAlignmentMode = .left
labelNode.verticalAlignmentMode = .top
self.addChild(labelNode)

文字出现在画面左上角了

SpriteKit 的基本介绍到今天就告一段落。
明天会进入游戏设计的部分！

参考来源：
SpriteKit Framework