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

今日目标

• 认识 SpriteKit
• 创建 Game Playground
• 认识 SKView 及 SKScene

SpriteKit 是什麽？

SpriteKit 是 Apple 提供可以帮助开发2D动画及2D游戏的一个框架，非常适合用来制作 iOS 游戏。它可以帮助我们轻松创建游戏场景、在场景中绘制图形、图片、文字等等，可以制作动画效果，也有好用的物理效果可以套用，将游戏场景变成一个具有地心引力的世界。

如果有用过 Cocos Creator 开发游戏的人应该可以很容易上手，一些基本的元素像是：Scene、Node、Sprite、Label...等，以及座标系统、Anchor Point 的概念，都是非常相像的。像笔者本身是先学习 SpriteKit，才接触 Cocos Creator 开发，同样一款游戏，在已经写好 Swift SpriteKit 的版本後 (即程序逻辑、素材都已有)，重新用 Cocos Creator 开发一次，只花了一周就可以写出约90%相似度的游戏作品。所以我相信有了 SpriteKit 的开发经验後，要用其他种语言或开发工具制作游戏，应该没有什麽大问题。

友善的开发环境

Xcode 提供了一个非常无痛入门的环境，在新增一个专案 (Project) 时，可以选择 Game 模板 (Template)，就可以轻松快速建立一个可执行的游戏专案。
Xcode 也提供新增 Playground 时，可选用 Game 模板，让开发者可以快速地感受 SpriteKit 的威力。

新增 Playground

我们马上来新增一个游戏模板的 Playground：
首先在 Xcode 上排工具列点选 File -> New -> Playground

选择 Game template，点击 Next

接着选择你要储存的位置，点击 Create，就创建完成了
可以看到 Xcode 已经自动建立程序码了，接着点击下方的 Execute Playground 按钮後，就可以看到以下画面：

接着，我们开始进入SpriteKit的世界吧！

import

要使用 SpriteKit，首先要引入：

import SpriteKit

SKView

SKView 可以呈现 SKScene 的画面，只需要透过呼叫 presentScene 方法即可。通常我们会在专案的 View Controller 中的 viewDidLoad 方法中加上以下程序码，就可以呈现 GameScene 的画面了。
附注：fileNamed 带入的 "GameScene" 是指专案中建立的场景档名 (GameScene.sks)

override func viewDidLoad() {
    super.viewDidLoad()
    if let view = self.view as? SKView {
        if let scene = SKScene(fileNamed: "GameScene") {
            view.presentScene(scene)
        }
    }
}

SKView 除了呈现 SKScene 的画面之外，还可以加上场景之间转场的效果
SKTransition 类别提供了许多种转场的方法可以套用
例如加上淡入的转场效果：

let transition = SKTransition.fade(withDuration: 3)
self.view?.presentScene(nextScene, transition: transition)

SKScene

刚刚已经建立好 SKScene 了，SKScene具有一些属性可以设定，常用的如下：

使用 scene.size 可以设定场景的尺寸。
例如设定等於 view 的尺寸：

scene.size = view.bounds.size

使用 scene.scaleMode 可以设定缩放模式。
例如设定 aspectFill 让场景尺寸进行等比例缩放，并填满画面：

scene.scaleMode = .aspectFill

使用 scene.anchorPoint 可以设定 Scene 的定位点。
例如设定定位点位置在画面的左上角：

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

新增一个继承 SKScene 的类别

目前我们已经了解如何透过 SKView 呈现 SKScene了，接着要带大家认识如何在场景中加上东西。在场景中加上东西有两种方法，第一种是直接在.sks档案中新增 node ，另一种是目前要介绍的：新增一个类别，透过程序码在场景上加东西。

SKScene 提供了一些方法可以覆写：

• func sceneDidLoad()：当场景被呈现时
• func didMove(to: SKView)：当场景被 view 呈现时
• func willMove(from: SKView)：当场景将要被 view 移除时
• func didChangeSize(CGSize)：当场景的 size 发生变动时

在这些方法里印出 log，可以观察到 sceneDidLoad 会比 didMove 早触发，当此场景换到下个场景时，可以收到 willMove。而当改变场景的 size 时，会收到 didChangeSize。可以依照个人需求使用。

那就来新增一个 GameScene 类别吧，并加上一个蓝色的 SKSpriteNode：

class GameScene: SKScene {
    override func didMove(to view: SKView) {
        let spriteNode = SKSpriteNode(color: .blue, size: CGSize(width: CGFloat(20), height: CGFloat(20)))
        self.addChild(spriteNode)
    }
}

新增完之後，记得必须在 GameScene.sks 的右侧 Custom Class 栏位填上 GameScene

执行看看结果：

画面上成功出现了蓝色小方块！
以上，是 SKView 跟 SKScene 的基本介绍，明天将会介绍一些基本的 Node 用法。

参考来源：
SpriteKit Framework