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

第1章 精灵
iOS和tvOS 2D游戏开发教程
Ray Wenderlich撰写

既然你已经知道了什么是Sprite Kit以及为什么要使用它，现在我们来自己尝试一下。我们将要构建的第一款小游戏叫做Zombie Conga，其完成后的样子如图1-1所示。

图1-1　

在Zombie Conga中，你负责扮演无忧无虑的、只是想参加舞会的僵尸。好在，僵尸所占据的海边小镇有足够多的小猫。你只需要咬住这些小猫，它们就会加入到僵尸的舞队中来。

不过要小心疯狂的猫女士！这些身穿红色的衣服的老太太，对于想要偷走她们心爱的小猫的任何人都会毫不客气，并且会拼尽全力让僵尸平静下来——让它们永久地平静下来。

我们将在接下来的7章中构建这款游戏。

第1章　精灵。你已经开始阅读本章了。我们将开始给游戏添加精灵，主要是一个背景以及僵尸。

第2章　手动移动。我们将让僵尸跟随对屏幕的触摸而移动，并且我们会在本章快速学习基本的2D向量数学。

第3章　动作。把小猫和疯狂的猫女士添加到游戏中，并且添加了基本的碰撞检测和游戏设置。

第4章　场景。我们将给游戏添加一个主菜单，还添加了获胜或失败的画面。

第5章　相机。我们将让游戏从左向右滚动，并且最终添加其自己的康茄舞队。

第6章　标签。我们将添加一个标签来显示僵尸的生命值，以及它所吃到的小猫的数目。

第7章　初识tvOS。我们将让Zombie Conga游戏在tvOS上运行，而这只需要几个简单的步骤就可以做到。

让我们开始开发这个游戏吧！

1.1　开始
启动Xcode并且从主菜单中选择FileNewProject...。选择iOSApplicationGame模板，并且点击Next按钮，如图1-2所示。

图1-2　

在Product Name字段中输入ZombieConga，在Language栏选择Swift，在Game Technology栏选择SpriteKit，在Devices栏选择Universal，然后点击Next按钮，如图1-3所示。

图1-3　

选择想要将工程保存在硬盘上的什么位置，并且点击Create按钮。此时，Xcode将会生成一个简单的Sprite Kit初始工程。

看一下所生成的Sprite Kit工程。在Xcode的工具栏上，选择iPhone 6并点击Play按钮，如图1-4所示。

在一个简短的开始屏幕之后，可以看到一个标签显示“Hello, World!”。当在该屏幕上点击的时候，会出现一个旋转的飞船，如图1-5所示。

在Sprite Kit中，有一个叫做场景的对象，它可以控制你的App的每一个“界面”。场景是Sprite Kit的SKScene类的一个子类。

图1-5　

现在，这个App只有一个单个的场景，就是GameScene。打开GameScene.swift，你将会看到显示这个标签和旋转的飞船的代码。理解这些代码并不是很重要，我们打算完全删除它，并且一步一步地来构建自己的游戏。

现在，删除GameScene.swift中的所有内容，并且用如下的代码替代。

import SpriteKit

class GameScene: SKScene { 
   override func didMoveToView(view: SKView) {
      backgroundColor = SKColor.blackColor()
   }
}

didMoveToView()是Sprite Kit在向你展示一个场景之前所调用的方法，这个方法是对场景的内容进行一些初始设置的好地方。在这里，我们直接将背景颜色设置为黑色。

Zombie Conga设计为以横向模式运行，因此，要为App进行这一设置。从工程导航器中选择ZombieConga工程，然后选择ZombieConga Target。点击General标签页，并且确保只有Landscape Left和Landscape Right选项选中，如图1-6所示。

图1-6　

还需要进行一些修改。打开Info.plist并找到Supported interface orientations (iPad)条目。删除在这里所看到的Portrait (bottom home button)和Portrait (top home button)条目，而只保留横向模式的相关选项，如图1-7所示。

图1-7　

Sprite Kit模板自动创建了一个名为GameScene.sks的文件。可以使用Xcode内建的场景编辑器来编辑这个文件，以可视化地布局游戏场景。请将这个场景编辑器当做是Sprite Kit的一个简单的Interface Builder。

我们将在本书第7章中介绍场景编辑器，但是我们不会在Zombie Conga游戏中用到它，因为对于这款游戏来说，通过编程来创建精灵要更为容易和直接。

因此，按下Control键并点击GameScene.sks，选择Delete，然后选择Move to Trash。由于不再使用这个文件了，还必须相应地修改模板代码。

打开GameViewController.swift，并且用如下的内容替换它。

import UIKit
import SpriteKit

class GameViewController: UIViewController {
   override func viewDidLoad() {
      super.viewDidLoad()
      let scene =
         GameScene(size:CGSize(width: 2048, height: 1536))
      let skView = self.view as! SKView
      skView.showsFPS = true
      skView.showsNodeCount = true
      skView.ignoresSiblingOrder = true
      scene.scaleMode = .AspectFill
      skView.presentScene(scene)
   }
   override func prefersStatusBarHidden() -> Bool {
      return true
   }
}

之前，视图控制器从GameScene.sks加载场景，但是现在，它通过在GameScene上调用一个初始化程序来创建场景。

注意，当创建该场景的时候，通过直接编码为2048×1536的大小，并且将缩放模式设置为AspectFill。现在，很适合介绍一下如何将这款游戏设计为一个通用App。

1.1.1　通用App支持
注意
本小节是可选的内容，适合那些特别感兴趣的读者。如果你只想要尽可能快地编写代码，可以跳到下一个小节阅读。
我们在本书中的所有游戏都是作为通用的App而设计的，这意味着它们在iPhone和iPad上都能运行。

本书中的这款游戏的场景已经设置为2048×1536，或者说是横屏模式（和竖屏模式相反），其缩放模式设置为AspectFill。AspectFill让Sprite Kit缩放场景的内容以填充整个屏幕，即便Sprite Kit在这么做的时候可能需要裁切一部分内容。

这会导致场景似乎显示于iPad Retina上，而iPad Retina的分辨率是2048×1536，但是，在iPhone上会进行缩放/裁剪以适应手机较小的屏幕以及不同的高宽比。

如下的几个例子，展示了本书中的游戏在不同的设备上的横屏模式显示的样子，包括从最小高宽比到最大的高宽比，如图1-8所示。

图1-8　

iPad Retina [4:3或1.33]：显示很适合2048×1536的屏幕大小。
iPad Non-Retina [4:3或1.33]：AspectFill将把一个2048×1536的可见区域缩放到0.5，以适应1024×768的屏幕。
iPhone 4S [3:2或1.5]：AspectFill将把一个2048×1536的可见区域缩放到0.47，以适应960×640的屏幕。
iPhone 5 [16:9或1.77]：AspectFill将把一个2048×1152的可见区域缩放到0.56，以适应1136×640的屏幕。
iPhone 6 [16:9或1.77]：AspectFill将把一个2048×1152的可见区域缩放到0.64，以适应1334×750的屏幕。
iPhone 6 [16:9或1.77]：AspectFill将把一个2048×1152的可见区域缩放到0.93，以适应1920×1080的屏幕。
由于AspectFill会针对iPhone从顶部和底部裁剪场景，我们把本书中的游戏设置为拥有一个主要的“游戏区域”，从而保证其在所有的设备上都可见。基本上，游戏将会在横屏模式的顶部/底部或者竖屏模式的左边/右边拥有192个像素的边距，你应该避免将基本内容放置到这个边距之中。在本书稍后，我们将向你可视化地展示这一点。

注意，你只需要为此指定一组美工图片就可以工作，图片适合于最大的屏幕尺寸2048×1536就可以了。在iPad Retina之外的其他设备上，这些图片将会缩小。

注意

这种方法的缺点是，图片会比某些设备实际所需的大小还要大，例如对于iPhone 4s这样的设备，这会造成材质内存和空间的浪费。这种方法的优点是，游戏在所有设备上都显示的更好且更容易显示，并且能很好地工作。

这种方法的一个替代方案是，针对每种设备和缩放比例来添加不同的图像（例如，iPad@1x、iPad @2x、iPhone@2x、iPhone @3x），这要借助Apple的强大的资源目录来实现。然而，在编写本书的时候，Sprite Kit并不能在所有情况下根据各种设备和缩放从资源目录加载正确的图像，因此，我们现在仍然使用简单的做法。

1.1.2　添加图像
接下来，我们需要给工程添加游戏图像。

在Xcode中，打开Assets.xcassets，选择Spaceship条目并且按下删除键以删除它，遗憾的是，我们这个游戏并不是关于太空僵尸的游戏！现在，只有AppIcon还保留着，如图1-9所示。

图1-9　

选中AppIcon之后，从starterresourcesicons中将合适的图标拖放到每一组之中，如图1-10所示。

然后，将starterresourcesimages中的所有文件拖放到左边的边栏中，如图1-11所示。

通过将图像包含到资源目录中，Xcode将会在后台建立材质图册以包含这些图像，并且在游戏中使用它们，这会自动地提高性能。

图1-11　

1.1.3　启动界面

注意
本小节是可选内容，因为它对游戏的运行不会有任何的影响，这只是为游戏“锦上添花”。如果你想要直接进行编码，可以跳到下一个小节阅读。
让游戏迈上正轨之前，还有最后一件事情要做，就是配置启动界面。

启动界面是当你的App初次加载的时候，iOS所显示的内容，它通常会显示几秒钟的时间。启动界面使得玩家一开始就能够快速对你的App有印象，当然，至少它不是黑色的屏幕。对于Zombie Conga来说，我们将显示带有游戏名称的一个启动界面。

你的App实际上已经有了一个启动界面。你之前启动App的时候，可能已经注意到了有一个简短的、空白的白色界面，那就是启动界面。

在iOS中，App有一个特殊的启动界面文件，它基本上就是一个故事板，在这个工程中就是LaunchScreen. storyboard文件；可以配置它从而在App加载的时候在屏幕上显示一些内容。和只是显示一幅图像的老办法相比，这种方法的优点是，你可以使用Auto Layout来更精细地控制这个界面在不同的设备上的样子。

让我们来尝试一下。打开LaunchScreen.storyboard。将会看到如图1-12所示的内容。

图1-12　

在右边栏的Object Library中，拖动一个图像视图到视图之中，并且重新调整其大小以填充整个区域，如图1-13所示。

图1-13　

接下来，需要设置这个图像视图，以便它总是和其包含视图具有相同的宽度和高度。要做到这一点，确保选中了图像视图，然后点击右下方的Pin按钮（它看上去就像是一架战斗机）。在Add New Constraints窗口中，点击4条红色的线条，以便图像视图锁定到每一个边上。确保Constrain to margins没有选中，并且所有的值都设置为0，然后点击Add 4 Constraints按钮，如图1-14所示。

图1-14　

保持图像视图仍然是选中的，确保选择了Attributes检视器，这是右边的第4个标签页。将Image设置为MainMenu，并且将View Mode设置为Aspect Fill，如图1-15所示。

图1-15　

再次编译并运行App。这一次，你会看到简短的Zombie Conga启动界面，如图1-16所示。

很快，接下来就是一个空白的、黑色界面，如图1-17所示。

图1-17　

这看上去可能还不太像样子，但是现在，有了一个起点，我们可以在此基础上构建第一个Sprite Kit游戏。

让我们继续下一个任务，这也可能是在制作游戏的时候最重要和最常见的任务之一，即在屏幕上显示图像。