本节书摘来自异步社区《iOS和tvOS 2D游戏开发教程》一书中的第2章，第2.2节移动僵尸，作者 【美】raywenderlich.com教程开发组，更多章节内容可以访问云栖社区“异步社区”公众号查看

2.2　移动僵尸
我们打算通过5次迭代过程来实现僵尸移动的代码。这样，你可以看到初学者常犯的一些错误及其解决方案，最终，你会理解移动是如何一步一步实现的。

首先，实现一种简单但并不理想的方法，即在每一帧中将僵尸移动固定的数量。在开始之前，打开GameScene.swift并且在didMoveToView()中注释掉把僵尸的大小设置为其两倍的那一行代码，如下所示：

// zombie.setScale(2) // SKNode method

这一行只是一个测试，因此，我们不再需要它了。正常大小的僵尸，已经够让人害怕的了。

2.2.1　第1次迭代：每帧固定移动
在GameScene.swift中，添加如下的方法：

override func update(currentTime: NSTimeInterval) { 
    zombie.position = CGPoint(x: zombie.position.x + 8,
                                  y: zombie.position.y)
}

这里，我们沿着x轴将僵尸的位置更新为比上一次多8个点，而在y轴上保持相同的位置。这会让僵尸从左向右移动，如图2-5所示。

图2-5　

编译并运行，你将会看到僵尸从屏幕上走过。这是不错的内容，但是僵尸的移动给人感觉有点卡顿或不规则。为了探究原因，我们回到Sprite Kit游戏循环来看看。

还记得吧，Sprite Kit试图尽可能快地绘制帧。然而，通常其绘制每一帧所花的时间还是略有不同的，有的时候较慢，有的时候较快。

这意味着，调用update()的循环之间的时间间隔是不同的。为了亲眼看看这一点，可以添加一些代码来打印出自上一次update()调用后经过的时间。在GameScene的属性部分，紧接着zombie属性之后，添加如下这些变量：

var lastUpdateTime: NSTimeInterval = 0
var dt: NSTimeInterval = 0

这里，我们创建了属性来记录Sprite Kit上一次调用update()的时间和自上一次调用到现在经过的时间（即时间增量），后者简写为dt。

然后，将如下这些代码行添加到update()的开始处，在这里，我们计算了从上一次调用update()后经过的时间，并且将其存储到dt中，然后，以毫秒为单位（1秒等于1000毫秒）来显示出时间。

if lastUpdateTime > 0 {
   dt = currentTime - lastUpdateTime
} else {
   dt = 0
}
lastUpdateTime = currentTime
print("\(dt*1000) milliseconds since last update")

编译并运行，你应该会在控制台中看到如下所示的内容：

33.44  51289963908 milliseconds since last update
16.35  37669868674 milliseconds since last update
34.18  78019971773 milliseconds since last update
15.69  98310121708 milliseconds since last update
33.98  83069973439 milliseconds since last update
33.57  79220040422 milliseconds since last update

正如你所看到的，update()调用之间的时间间隔总是略有不同。

注意

Sprite Kit试图每秒钟调用update()方法60次（每次调用大约花费16毫秒）。然而，如果更新和渲染游戏的一帧所需的时间太长，Sprite Kit可能会减少调用更新方法的频次，并且FPS将会下降。在这里可以看到这一点，有些帧花了30毫秒以上。

之所以看到如此之低的FPS，是因为在模拟器上运行游戏。正如前面所提到的，不要指望模拟器提供准确的性能数据。如果尝试在一台设备上运行代码，应该会看到更高一些的FPS。

注意，即便你的游戏以60FPS平滑地运行，Sprite Kit调用更新方法的频度还是会有些变化。因此，在计算中需要考虑时间增量，接下来我们将学习如何做到这点。
由于你要以每帧固定的量来更新僵尸的位置，而不会考虑这一时间上的变化，你可能最终得到一个看上去有点卡顿或不规则的移动，如图2-6所示。

图2-6　

正确的解决方案是，搞清楚僵尸每秒钟想要移动多远，然后，将其和自上一次更新后经过的时间的因子相乘。让我们来尝试一下。

2.2.2　第2次迭代：速率乘以时间增量
首先在GameScene的开始处、紧跟在dt之后，添加如下的属性：

let zombieMovePointsPerSec: CGFloat = 480.0
这表示僵尸每秒钟应该移动480个点，大约是场景宽度的1/4。我们将其类型设置为CGFloat，因为将会使用它和CGPoint中的另一个CGFloat进行计算。

在这行代码之后，再添加一个属性：

var velocity = CGPoint.zero

到目前为止，我们已经使用了GPoint来表示位置。然而，使用GPoint来表示2D向量也是很常见且很方便的。

2D向量表示一个方向和一个长度。图2-7给出了可以用来表示僵尸的移动的一个2D向量的例子。可以看到，箭头的方向表示了僵尸应该移动的方向，而箭头的长度表示僵尸应该每秒钟移动多远的距离。方向和长度一起表示僵尸的速率，可以将其看作是僵尸在1秒钟之内应该在哪个方向上移动多远。

图2-7　

然而，注意，这个速率没有设置位置。毕竟，不管僵尸是从哪里开始移动的，我们应该能够让僵尸沿着这个方向、以这样的速度移动。

通过添加如下的方法来尝试这一点：

func moveSprite(sprite: SKSpriteNode, velocity: CGPoint) {
   // 1 
   let amountToMove = CGPoint(x: velocity.x * CGFloat(dt),
                                    y: velocity.y * CGFloat(dt))
   print("Amount to move: \(amountToMove)")
   // 2
   sprite.position = CGPoint(
      x: sprite.position.x + amountToMove.x,
      y: sprite.position.y + amountToMove.y)
}

我们将代码重新组织到一个可以复用的方法中，该方法让精灵开始移动，并且还有决定移动速率的一个向量。让我们一行一行地看看这段代码：

1．速率是每秒移动多少个点，并且你需要计算出僵尸在这一帧中移动多少个点。为了确定这一点，这里将每秒的点数乘以上一次更新之后的秒数的因子。现在，有了一个点来表示僵尸的位置，也可以将其看作是从原点到僵尸的位置的一个向量，另外，还有一个向量来表示僵尸在这一帧中移动的距离和方向，如图2-8所示。

2．要确定僵尸的新的位置，直接给僵尸的位置加上表示移动的向量就可以了，如图2-9所示。

可以用图2-9来表示，但是在代码中，直接将这个点的x坐标和y坐标和向量相加就可以了。

注意

要学习有关向量的更多知识，请查阅这个不错的指南：http://www.mathsisfun.com/algebra/ 。
最后，在update()中，用如下这一行代码来替代设置僵尸位置的代码行：

moveSprite(zombie,
   velocity: CGPoint(x: zombieMovePointsPerSec, y: 0))

图2-9

编译并运行，现在，僵尸从屏幕前移动的时候要平滑得多了。

看一下控制台日志，你将会看到现在僵尸会根据自上一次更新过去了多少时间，在每一帧中移动不同的点数。

0.0  milliseconds since last update
Amount to move: (0.0,0.0)
47.85  30780237634 milliseconds since last update
Amount to move: (11.4847387257032,0.0)
33.34  98929976486 milliseconds since last update
Amount to move: (8.00397431943566,0.0)
34.21  96339915972 milliseconds since last update
Amount to move: (8.21271215798333,0.0)

如果你的僵尸的移动看上去还是有些卡顿，确保在设备上而不是在模拟器上测试它，这可能会有不同的性能表现。

2.2.3　第3次迭代：朝着触摸的方向移动
到目前为止，一切都还不错，但是我们想要让僵尸朝着玩家触摸的位置移动。毕竟，每个人都知道僵尸是喜欢热闹的。

我们的目标是让僵尸朝着玩家点击的位置移动，并且持续移动甚至超过了点击的位置，直到玩家点击了另一个位置而吸引了僵尸的注意力。要做到这一点有4个步骤，让我们来逐步介绍。

步骤1：找到偏移向量
首先，我们需要搞清楚玩家点击的位置和僵尸的位置之间的偏移量。可以直接用点击的位置减去僵尸的位置来得到这个偏移量，如图2-10所示。

点和向量之间的减法，和将它们相加是类似的，但是，不是加上x坐标和y坐标值，而是减去x和y坐标值。

图2-10　

图2-10显示，如果用点击的位置减去僵尸的位置，将会得到表示偏移量的一个向量。如果将偏移向量移动到从僵尸的位置开始的话，我们可以更加清晰地看到这一点，如图2-11所示。

图2-11

通过将两个位置相减，我们得到了具有方向和长度的一个内容，称之为偏移向量。

尝试添加如下的方法：

func moveZombieToward(location: CGPoint) {
   let offset = CGPoint(x: location.x - zombie.position.x,
                            y: location.y - zombie.position.y)
}

步骤2：获得偏移向量的长度
现在，需要搞清楚偏移向量的长度，这是在步骤3中所需要的信息。

将偏移向量当做是一个直接三角形的斜边，其中，构成三角形的另外两条边的长度，就是由这个向量的x坐标和y坐标确定的，如图2-12所示。

图2-12　

我们想要得到斜边的长度。为了做到这一点，要使用勾股定理。你可能还记得几何学中的这个简单的公式，即斜边的长度等于另外两条边的平方之和的平方根，如图2-13所示。

图2-13　

根据勾股定理，在moveZombieToward()的末尾添加如下这行代码：

let length = sqrt(
   Double(offset.x * offset.x + offset.y * offset.y))

现在还没有完事呢！

步骤3：设置偏移向量的长度
现在，我们有了一个偏移向量：

它的方向指向了僵尸应该移动的方向。
它的长度是僵尸当前的位置和点击的位置之间的线段的长度。
而我们想要一个速度向量：

它的方向指向了僵尸应该移动的方向。
它的长度是zombieMovePointsPerSec，这个常量在前面已经定义为每秒480个点。
因此，我们已经实现了一半了，向量的方向是对的，但是长度不对。如何让一个向量指向和偏移向量相同的方向，但是又具有某个指定的长度呢？

第一步是将偏移向量转换为一个单位向量，这意味着，该向量的长度为1。根据几何学原理，可以直接将偏移向量的x坐标和y坐标分别除以偏移向量的长度，来做到这一点，如图2-14所示。

图2-14

将一个向量转换为一个单位向量的过程，叫做向量的正规化（normalizing）。

一旦有了这个单位向量，我们知道其长度为1，将它和zombieMovePointsPerSec相乘，可以很容易地得到想要的长度，如图2-15所示。

图2-15　

尝试一下，在moveZombieToward()的末尾添加如下的代码行：

let direction = CGPoint(x: offset.x / CGFloat(length),
                             y: offset.y / CGFloat(length))
velocity = CGPoint(x: direction.x * zombieMovePointsPerSec,
                       y: direction.y * zombieMovePointsPerSec)

现在，我们得到了拥有正确方向和长度的一个速度向量。只有一步之遥了！

步骤4：连接触摸事件
在Sprite Ki中，要在一个节点上获得触摸事件的通知，只需要将该节点的userInteractionEnabled属性设置为true，然后覆盖该节点的touchesBegan(withEvent:)、touchesMoved(withEvent:)方法或touchesEnded(withEvent:)方法。和其他的SKNode类不同，SKScene的userInteractionEnabled属性默认就是设置为true的。

要看看这是如何使用的，为GameScene实现如下这些触摸处理方法：

func sceneTouched(touchLocation:CGPoint) {
   moveZombieToward(touchLocation)
}

override func touchesBegan(touches: Set<UITouch>,
   withEvent event: UIEvent?) {
      guard let touch = touches.first else {
         return
      }
      let touchLocation = touch.locationInNode(self)
      sceneTouched(touchLocation)
}

override func touchesMoved(touches: Set<UITouch>,
   withEvent event: UIEvent?) { 
      guard let touch = touches.first else {
         return
      }
      let touchLocation = touch.locationInNode(self)
      sceneTouched(touchLocation)
}

最后，在update()中，修改对moveSprite()的调用，以传入一个速率（根据触摸），而不是使用预先设定的量：

moveSprite(zombie, velocity: velocity)
好了！编译并运行，现在，僵尸将会朝着你的点击而移动，如图2-16所示。不要离僵尸太近，它可是饥肠辘辘！

图2-16　

注意

还可以使用Sprite Kit的手势识别器。如果你试图实现复杂的手势的话，例如，捏取或旋转，这会特别方便。

可以在didMoveToView()中，将手势识别器添加到场景的视图中，并且可以使用SKScene的convertPointFromView()方法和SKNode的convertPoint(toNode:)方法，让触摸处于你所需要的坐标空间中。

为了展示这一点，请查看本章的示例代码，我在其中包含了一个注释掉的手势识别器的演示程序。由于它和你所实现的触摸处理程序所做的事情相同，如果在运行这个手势识别器的时候想要确定是手势在起作用，请先注释掉你自己的触摸处理程序。

2.2.4　第4次迭代：边界检测
当我们玩这款游戏的最新版的时候，可能会注意到，如果你让僵尸向前移动的话，它会很欢快地直接跑到屏幕之外。我们很羡慕僵尸的热情，但是在Zombie Conga游戏中，我们希望僵尸随时都待在屏幕之上，如果碰到屏幕边界的话，它可以弹回来。

为了做到这一点，我们需要检测新计算的位置是否超越了屏幕的任何边界，如果是的话，要让僵尸弹回来。添加如下这个新的方法：

func boundsCheckZombie() { 
   let bottomLeft = CGPointZero
   let topRight = CGPoint(x: size.width, y: size.height)

   if zombie.position.x <= bottomLeft.x {
      zombie.position.x = bottomLeft.x
      velocity.x = -velocity.x
   }
   if zombie.position.x >= topRight.x {
      zombie.position.x = topRight.x
      velocity.x = -velocity.x
   }
   if zombie.position.y <= bottomLeft.y {
      zombie.position.y = bottomLeft.y
      velocity.y = -velocity.y
   }
   if zombie.position.y >= topRight.y {
      zombie.position.y = topRight.y
      velocity.y = -velocity.y
   }
}

首先，设定表示场景的左下角和右上角坐标的常量。

然后，检查僵尸的位置，看看它是否超过了任何的屏幕边界，或者在边界之上。如果是的，让僵尸停止在该位置并且将速度部分取反，以使得僵尸朝着相反的方向弹回。

现在，在update()方法的末尾，调用这个新的方法：

boundsCheckZombie()
编译并运行，可以看到僵尸在屏幕上弹回了，如图2-17所示。

图2-17　

2.2.5　第5次迭代：游戏区域
在iPhone 6模拟器上运行你的游戏，并且将僵尸朝着屏幕顶端的方向移动。注意，僵尸移动到了屏幕之外而没有弹回，如图2-18所示。

图2-18　

在iPad模拟器上运行游戏，你会看到游戏像预期的那样工作（即僵尸会从顶部的边界弹回）。你是否知道发生了什么情况？

还记得在第1章的1.1.1小节“通用App支持”中，我们提到Zombie Conga设计为4:3的高宽比（屏幕分辨率为2048×1536）。然而，你想要支持16:9的高宽比，而这正是iPhone 5、iPhone 6和iPhone 6 Plus所使用的高宽比（屏幕分辨率分别为1136×640、1334×750和1920×1080）。

我们来看看在16:9的设备上发生了什么。由于我们已经将场景配置为使用AspectFill模式，Sprite Kit首先计算填充了2048×1536的空间的、最大的16:9的矩形，也就是2048×1152。然后，将这个矩形居中，并将其缩放到实际的屏幕大小，例如，iPhone 6的1334×750屏幕需要的缩放比例是0.64，如图2-19所示。

图2-19

这意味着，在16:9的设备上，场景的顶部和底部有192个点的空隙是不可见的（1536 -1152 = 384，384 / 2 = 192）。因此，应该避免在这些区域进行重要的游戏设置，例如，不要让僵尸移动到这些空隙中。

让我们来解决这个问题。首先，给GameScene添加一个新的属性来存储表示游戏区域的矩形：

let playableRect: CGRect

然后，添加如下的初始化函数来相应地设置这个值：

override init(size: CGSize) {
   let maxAspectRatio:CGFloat = 16.0/9.0 // 1
   let playableHeight = size.width / maxAspectRatio // 2
   let playableMargin = (size.height-playableHeight)/2.0 // 3
   playableRect = CGRect(x: 0, y: playableMargin,
                             width: size.width,
                             height: playableHeight) // 4
   super.init(size: size) // 5
}
required init(coder aDecoder: NSCoder) {
   fatalError("init(coder:) has not been implemented") // 6
}

我们来一行行地看看这些代码做些什么：

1．Zombie Conga支持的高宽比从3:2（1.33）到16:9（1.77）。这里，我们将这个常量设置为所支持的最大的高宽比16:9（1.77）。

2．使用AspectFill模式，不管高宽比是多少，游戏区域的宽度总是等于场景的宽度。要计算游戏区域的高度，用场景的宽度除以最大高宽比。

3．我们希望游戏区域矩形在屏幕上居中，因此，用游戏区域的高度减去场景的高度，然后将结果除以2，得到顶部和底部的边距。

4．综合起来，使得矩形在屏幕上居中，并具有最大的高宽比。

5．调用超类的初始化程序。

6．无论何时，当你覆盖Sprite Kit节点的默认初始化程序的时候，必须还要覆盖所需的NSCoder初始化程序，当从场景编辑器加载一个场景的时候，会使用该初始化程序。由于我们不会在这款游戏中使用场景编辑器，直接添加一个占位符实现以记录一个错误。

为了使其可视化，添加一个辅助方法将这个游戏区域绘制到屏幕上：

func debugDrawPlayableArea() {
   let shape = SKShapeNode()
   let path = CGPathCreateMutable()
   CGPathAddRect(path, nil, playableRect)
   shape.path = path
   shape.strokeColor = SKColor.redColor()
   shape.lineWidth = 4.0
   addChild(shape)
}

现在，先不要关心它是如何工作的，我们将在第11章中学习关于SKShapeNodes的所有内容。现在，将其当做是一个黑箱，它只是在屏幕上绘制调试矩形。

接下来，在didMoveToView()的末尾调用这个方法：

debugDrawPlayableArea()
最后，修改boundsCheckZombie()中的头两行代码，以考虑playableRect的y值：

let bottomLeft = CGPoint(x: 0,
                              y: CGRectGetMinY(playableRect))
let topRight = CGPoint(x: size.width,
                            y: CGRectGetMaxY(playableRect))

编译并运行，你将会看到僵尸现在能够根据游戏区域矩形正确地弹回了，如图2-20所示，这个游戏区域矩形用红色线条绘制并且和屏幕的边缘一致。

然后，在iPad模拟器上编译并运行，你将会看到僵尸在这里也会根据游戏区域矩形正确地弹回，如图2-21所示。

这个游戏区域带有红色边框，这就是在iPhone设备上所看到的区域，它拥有所支持的最大的高宽比，即16:9。

既然有了游戏区域矩形，只需要确保剩下的游戏设置都发生在这个矩形之中并且僵尸可以随处跳舞，就可以了。

图2-21　

注意

一种可选的方法，是根据当前设备的可视区域来限制僵尸的移动。换句话说，总是让僵尸能够在各个方向上移动到iPad的边缘，而不是将其限制在一个最小的游戏区域中。

然而，这可能会让游戏在iPad上更容易玩，因为iPad上有更多的空间可以躲避敌人。对于Zombie Congo来说，我们认为更重要的是让它在所有设备上具有相同的难度，因此，我们让核心游戏设置保持在有保证的游戏区域之中。