更新 2015/04/20：升級至 Xcode 6.3 和 Swift 1.2

更新說明：這是我們廣受歡迎的教程之一的第三個版本——第一個版本是 Cocos2D 的，由 Matthijs Hollemans 縮寫，第二個版本由 Tony Dahbura 升級為 Sprite Kit。最終的版本仍然是 Sprite Kit 的，但升級至 iOS 8 和 Swift。

是否一提到數學就讓你恐懼？你是否曾經因為數學成績不好而想放棄遊戲開發這個職業？

不要煩惱——數學其實很有趣，而且也很酷——這兩篇教程會證明這一點！

有一個訣竅：作為一個開發者，你其實不需要學習多少數學技能。在我們的職業生涯中的絕大部分計算，其實都用最基本的數學技能就足以應付。

對於編寫遊戲來說，在你的技能中擁有一些數學技能是有用的。不需要你是阿基米德或者艾薩克.牛頓，但需要知道一些三角學以及一些數學常識，你需要做好心理準備。

在本教程中，你需要學習一些重要的三角函式，以及如何在遊戲中使用它們。然後，你需要用學到的知識做一些練習，通過 Sprite Kit 開發一個簡單的太空射擊遊戲。

如果你之前從未使用過 Sprite Kit 或其它遊戲開發框架也不要擔心——本教程中涉及的數學技能對任何遊戲引擎都是有效的。你不需要做任何預習，我會一步一步地開始整個教程。

如果你已經具備一些基本的背景知識，本教程將讓加深對理解三角數學的理解，讓我們開始吧！

注意：本教程中的遊戲使用了加速計，因此你應該使用真實的 iOS 裝置以及一個開發者賬號。

開始：關於三角學

聽起來有點拗口，但三角數學（或簡稱三角學）的簡單定義就是與三角形有關的計算（三角學因此而來）。

你也許不知道，遊戲基本上是由三角形構成。例如，一個太空飛船遊戲，我們需要計算出飛船之間的距離：

假設你知道每張飛船的 x ，y 座標，如何計算出二者之間的距離？

從兩張飛船的中心畫一條連線，構造出一個三角形：

因為我們知道每張飛船的 x,y 座標，因此，我們可以算出新加的兩條線的長度。現在，你已經獲得三角形兩條邊的長，通過三角函式，你可以算出對角線的長度——也就是飛船之間的距離。

注意，這個三角形有一個 90 度的角。因此它是直角三角形（或者正三角形，隨便你怎麼稱呼它），這個教程中會針對這種三角形進行特別的處理。

只要在遊戲中能夠以直角三角形描述的問題——比如兩個物件之間的空間關係——我們都可以用三角學函式進行計算。

總之，三角學是用來計算直角三角形邊長和角度的數學。它們比你想象的還要有用。

例如，在這個太空飛行遊戲中，可能會發生這些事情：

• 一隻飛船向另一隻飛船發射鐳射束

• 一隻飛船向另一隻飛船追去

• 如果敵人的飛船靠得太緊，播放報警聲

諸如此類的，你都會用到三角學！

三角函式

首先介紹一些理論。別擔心，我會盡量簡短，已讓你儘快接觸到程式碼。一個直角三角形有以下幾部分組成：

在上圖中，三角形中傾斜的那條邊被叫做斜邊。它總是對著 90 度角（即直角）的那條邊，它是三條邊中最長的一條邊。

另外兩條邊叫做鄰邊和對邊，對邊是對著三角形某個角的那條邊，在這個例子裡，也就是位於左下角的角。

如果你從另一個角的角度（例如右上角）來看，則鄰邊和對邊恰恰相反。

α 和 β 是直角之外的兩個角。你可以隨便命名這些角（任何希臘字母），一般我們將第一個角叫做 α 角，另一個角叫做 β 角。同時，鄰邊和對邊是相對於 α 角而言的。

最酷的一件事情是，你只需要知道其中兩個變數，你就可以用三角函式 sin、cos 和 tan 算出其它所有的變數。例如，你知道任何一個角的大小和一條邊的長度，你就可以算出其它所有角的大小好邊長：

你可以把 sin、cos、tan 看成是係數——如果你知道 α 角和一條邊的長度，sin、cos 和 tan 則代表了兩條邊和角度之間的關係的係數。

以 sin 為例，cos 和 tan 函式就像一個”黑盒子“——將幾個數字放到盒子中，它就會返回結果。它們是標準庫函式，無論哪種程式語言都會有， Swift 也不例外。

注意：三角函式的作用就像是把一個圓投影到直線上，要使用它們並不需要我們去理解函式是怎麼實現的。如果你想知道其中細節，可以在許多站點或視訊中找到解釋，例如這個站點：Math is Fun

已知一個夾角和一邊之長，求三角形另兩邊之長

我們來舉一個例子。假設已知兩隻飛船之間的 α 角為 45 度，以及斜邊長度為 10。

將上述值代入公式：

sin(45) = opposite / 10

進行等式變形，結果為：

opposite = sin(45) * 10

45 度角的 sin 值為 0.707(擷取至 3 位小數)，於是上式可變為：

opposite = 0.707 * 10 = 7.07

還記得你在高中的時候學過的一個記住這些函式的小竅門嗎：SOH-CAH-TOA(SOH表示：sin 是對邊比斜邊，依次類推)，還有一首順口溜：Some Old Hippy / Caught Another Hippy / Tripping On Acid,有個老嬉皮士，抓住另一個嬉皮士，陷入了迷幻之中（有可能那個嬉皮士就是一個三角學搞多了的數學家:]）。

已知兩條邊之長，求夾角

當你知道角度的時候，上面的公式很有用，但這種情況就不行了——你只知道兩條邊求它們之間的夾角。這就需要用到反三角函數了，即 arc 函式（這跟自動引用計數毫無關係！）。

• 角度 = arcsin(對邊/斜邊)

• 角度 = arccos(鄰邊/斜邊)

• 角度 = arctan(對邊/鄰邊)

如果 sin(a) = b，則 arcsin(b) = a。在這些反三角函式中，反切函式 arctan 是最實用的，因為它能夠幫你找出斜邊（即TOA——對邊比鄰邊）。有時候這些函式也被寫成 sin-1,cos-1,tan-1，千萬別搞錯了。

是不是感覺有點老生常談？很好，因為理論課還沒有上完——在你能夠進行三角計算之前還有一些東西需要學習。

已知兩邊之長，求第三邊之長

有時候，你知道了兩條邊的長，想求取第三邊的長（例如本教程一開始的例子，想計算兩個飛船之間的距離）。

這就需要用到三角學的勾股定理了。如果你已經徹底忘光了以前學過的數學課，那麼這個公式也許會勾起你的記憶：

a² + b² = c²

或者用三角學的專用名詞來說：

對邊² + 鄰邊² = 斜邊²

如果你知道兩邊之長，用上面的公式通過開方能夠很容易計算出第三邊。在遊戲中經常需要這樣做，在本教程中你會反覆看到。

注意：要想牢牢記住這個公式，有一個很有趣的方式。在 YouTube 中搜索一首“Pythagoras song”的視訊吧，很有意思。

知道一個角，求取另一個角

最後，來求夾角。如果我們知道一個非直角的角的大小，則很容易得到另一個夾角的大小。在一個三角形中，所有角的大小之和總是 180 度。對於直角三角形，我們知道其中一個角肯定是 90 °，因此剩下兩個角就簡單了：

alpha + beta + 90 = 180

簡化之後變成：

alpha + beta = 90

剩餘兩個角之和總是 90 °。如果你知道 α 是多少，肯定能算出 β，反之亦然。

所有這些公式你都需要記住！要用哪一個公式，取決於已知條件。通常，要麼已知夾角和一條邊的邊長，要麼已知兩條邊之長。

好了，理論就學到這裡。讓我們來做些練習。

跳過，還是不跳過？

接下來幾節，你會建立一個基本的 Sprite Kit 專案，這個 App 中有一艘太空飛船會在螢幕上根據加速計來移動。這不會涉及任何三角計算，你如果對 Sprite Kit 非常熟悉了，就像下面這個傢伙一樣：

那麼你可以跳過開頭的內容，直接進入“開始三角計算”一節！——在那裡，我會為你提供一個開始專案。

但如果你喜歡從頭開始編寫程式碼，請繼續閱讀 :]

建立專案

首先，確保你安裝了 Xcode 6.1.1 或以上版本。因為 Swift 是一個嶄新的語言，它的每個版本的語法都會何之前的版本有細微的區別。

開啟 Xcode,選擇 File\New\Project…，選擇 iOS\Application\Game 模板。專案命名為 TrigBlaster，語言選擇 Swift，遊戲技術設定為 SpriteKit，裝置型別設定為 iPhone。然後點選 Next:

編譯執行程式。如果一切順利，你將看到：

從這裡下載本教程所需資源。這個壓縮檔案包含了圖片和聲音。解壓縮，將每張圖片拖到 Images.xcassets 資料夾，以備建立精靈時用到。你可以刪除/替換預設專案中的 Spaceship 精靈，如果你不想用它的話。

現在來新增聲音。將 Sounds 資料夾拖進 Xcode 中，確保選中 Create groups 選項。

好，準備工作已經完成——現在讓我們來編寫程式碼！

用加速計做方向盤

這是一個簡單遊戲，你只需要在一個檔案中完成絕大部分工作：GameScene.swift。現在，這個檔案中包含了一大堆你用不到的程式碼。遊戲執行的方向也不正確，我們先來搞定這個。

切換到橫屏模式

在專案導航視窗中點選 TrigBlaster ,開啟 Target 設定，選中 Target 列表中的 TrigBlaster。開啟 General 標籤視窗，在 Deployment Info 一欄的 Device Orientation 下，反選所有方向，只勾選 Landscape Right(譯者注：原文是 Left,但圖中又是 Right，根據後面的內容看應該是 Right)：

執行程式， App 將以橫屏方向啟動。當前 App 打開了一個空的畫面，在 GameViewController.swift 的程式碼中，這個畫面是來自於 GameScene.sks 檔案。在 GameScene.swift 程式碼中，添加了一個 Hello World 標籤。

將 GameScene.swift 中的程式碼替換為：

import SpriteKit

class GameScene: SKScene {

  override func didMoveToView(view: SKView) {

    // set scene size to match view
    size = view.bounds.size

    backgroundColor = SKColor(red: 94.0/255, green: 63.0/255, blue: 107.0/255, alpha: 1)
  }

  override func update(currentTime: CFTimeInterval) {

  }
}

執行程式，你將看到一個空的、紫顏色的畫面：

讓我們來乾點稍微有趣的事情，將一艘太空飛船新增到畫面中。將 GameScene 類修改為：

class GameScene: SKScene {

  let playerSprite = SKSpriteNode(imageNamed: "Player")

  override func didMoveToView(view: SKView) {

    // set scene size to match view
    size = view.bounds.size

    backgroundColor = SKColor(red: 94.0/255, green: 63.0/255, blue: 107.0/255, alpha: 1)

    playerSprite.position = CGPoint(x: size.width - 50, y: 60)
    addChild(playerSprite)
  }

  ...
}

這些程式碼太常見了，如果你以前用過 Sprite Kit 的話。playerSprite 屬性用於儲存飛船精靈，並將它放到螢幕的右下角。注意，Sprite Kit 的 y 座標零點位於螢幕最下邊，而不是 UIKit 中的螢幕最上邊。我們將 y 座標設定為 60，這樣會將它放到螢幕左下角的FPS(幀率)的上方。

注意：FPS 資訊是用於除錯的，但我們可以隱藏它，如果你不想看到它的話。在你將遊戲提交給 App 商店之前，你可以這樣做。

執行程式，你將看到：

要讓飛船移動，你需要使用 iPhone 的內建加速計。不幸的是，iOS 模擬器無法模擬加速計，因此從現在起，你就需要在真實物理裝置上進行開發了。

注意：如果你不知道如何在裝置上安裝 App，請看另外一個教程，該教程描述瞭如何獲取和安裝證書和裝置授權文件，已允許 Xcode 將 App 安裝到真實的 iPhone 或 iPad 上。雖然不是強制的，但你必須購買一個蘋果開發者證書。

要讓加速計能夠驅動飛船，我們需要將裝置向一邊傾斜。這就是為什麼我們要在專案設定中將裝置方向固定為一個橫屏方向的原因，因為當你處於激烈戰鬥中的時候，螢幕突然發生旋轉是一件非常悲劇的事情！

加速計的使用非常簡單，因為我們可以使用 Core Motion 框架。要獲取加速計資料有兩種方式：註冊一個通知讓加速計以某個週期不斷地向 App 傳送訊息並呼叫回撥方法，或者在我們需要資料時主動拉取資料。蘋果建議我們不要使用“推”資料的方式除非有必要（比如進行精確測量或導航服務）。因為這種方式會比較耗電。

你的遊戲有一個地方非常適合“拉取”加速計資料：update()方法每一幀都會被 Sprite Kit 呼叫。你可以在這個方法中獲取加速計資料，並以此來移動飛船。

首先，在 GameScene.swift 頂部加入一個匯入語句：

import CoreMotion

現在，Core Motion 框架會連結到 App，你可以使用它了。

接著，在類的實現中增加如下屬性：

var accelerometerX: UIAccelerationValue = 0
var accelerometerY: UIAccelerationValue = 0

let motionManager = CMMotionManager()

我們用這些屬性來儲存 Core Motion 管理器和加速計的值。你只需要儲存 x 的值和 y 值，z 座標的值在這個遊戲中暫時不需要。

然後，新增兩個工具方法：

func startMonitoringAcceleration() {

  if motionManager.accelerometerAvailable {
    motionManager.startAccelerometerUpdates()
    NSLog("accelerometer updates on...")
  }
}

func stopMonitoringAcceleration() {

  if motionManager.accelerometerAvailable && motionManager.accelerometerActive {
    motionManager.stopAccelerometerUpdates()
    NSLog("accelerometer updates off...")
  }
}

start 方法會檢測裝置上是否具有加速計硬體，如果是，則開始收集資料。stop 方法則用於關閉加速計監聽。

啟用加速計的較合適的地方是在 didMoveToView() 方法裡面。在這個方法的 addChild(playerSprite) 一行後加入：

startMonitoringAcceleration()

而停止加速計的時機是在類的解析函式裡面。在類中增加一個方法：

deinit {
  stopMonitoringAcceleration()
}

然後，新增這個方法，每當玩家角色位置發生改變時就呼叫這個方法讀取加速計的值：

func updatePlayerAccelerationFromMotionManager() {

  if let acceleration = motionManager.accelerometerData?.acceleration {

    let FilterFactor = 0.75

    accelerometerX = acceleration.x * FilterFactor + accelerometerX * (1 - FilterFactor)
    accelerometerY = acceleration.y * FilterFactor + accelerometerY * (1 - FilterFactor)
  }
}

這裡進行了過濾處理，目的是為了使加速計返回的資料更平滑，卡頓感更少。如果沒有資料，motionManager.accelerometerData 屬性有可能為 nil，因此要用 ?. 操作符和 if let … 語法訪問 acceleration 屬性，以確保當加速計資料為空時 if 語句不會被執行。

注意：加速計負責記錄當前施加到它身上的加速度。由於重力的作用iPhone 總是處於加速度的作用下（也因此 iPhone 總是知道哪個方向是螢幕的方向），但由於使用者是用手拿著 iPhone(手並永遠不會完全穩定在一個地方)，因此重力會有細微波動。對於這些細微的波動我們不在乎，但比較大的改變就有可能是使用者改變了裝置的方向。通過一個簡單的低通量過濾，我們可以只獲取方向改變資訊而過濾掉無關的波動。

現在我們已經讓裝置方向固定為一個，又如何讓玩家的飛船移動呢？

基於物理引擎的移動通常是這樣實現的：

• 首先，基於使用者輸入（在這裡就是加速計資料）改變加速度。

• 然後，將當前加速度加到飛船的當前速度中去。這會讓飛船基於加速度的方向進行加速或減速。

• 最終，用新的速度改變飛船的位置，使其移動。

在此，我們需要感謝一個偉大數學家艾薩克.牛頓，是他發明了這個位移公式！

我們需要將速度和加速度儲存到屬性中。玩家位置是不需要跟蹤的，因為 SKSpriteNode 已經儲存了這個值。

注意：實際上，Sprite Kit 也會記錄當前速度和加速度，這要用到 SKPhysicsBody 屬性。Sprite Kit 的物理引擎會記錄精靈所受的力，並自動更新加速度、速度和位置。但如果你要讓 Sprite Kit 的物理引擎來進行這些計算，那你就無法學習三角學了。因此在本教程中，你將自己完成這些數學計算。

在這個類中增加如下屬性：

var playerAcceleration = CGVector(dx: 0, dy: 0)
var playerVelocity = CGVector(dx: 0, dy: 0)

最好將飛船移動的速度做一個限制，否則飛船很難操控。不對加速度進行限制的話，將使飛船失控（讓可憐的飛行員變成果凍！），因此，讓我們來加一點限制。

直接在 import 語句後加入：

let MaxPlayerAcceleration: CGFloat = 400
let MaxPlayerSpeed: CGFloat = 200

這裡我們新加了兩個常量：最大加速度（400 畫素/秒²），以及最大速度（200 畫素/秒）。依照 Swift 一般約定，將兩個常量的首字母大寫，以區別於普通的 let 變數。

在 updatePlayerAccelerationFromMotionManager 方法的 if let … 一句的最後加入：

playerAcceleration.dx = CGFloat(accelerometerY) * -MaxPlayerAcceleration
playerAcceleration.dy = CGFloat(accelerometerX) * MaxPlayerAcceleration

加速計的取值範圍一般是 -1 到 +1 之間，因此要獲得最終的加速度，需要乘以最大加速度 MaxPlayerAcceleration。

注意：我們在 x 方向上用 accelerometerY 而在 y 方向上用 accelerometerX。這是正確的。注意這個遊戲是橫屏的，因此 x 方向的加速度是從上到下，y 方向上的加速度是從右到左。

繼續。接下來是將 playerAcceleration.x 和 playerAcceleration.dy 用到飛船的速度和位置上，這將放在 update() 方法中進行。這個方法每幀呼叫一次（即 60 次/秒）。因此這個地方是進行所有遊戲邏輯的好地方。

新增一個 updatePlayer() 方法：

func updatePlayer(dt: CFTimeInterval) {

  // 1
  playerVelocity.dx = playerVelocity.dx + playerAcceleration.dx * CGFloat(dt)
  playerVelocity.dy = playerVelocity.dy + playerAcceleration.dy * CGFloat(dt)

  // 2
  playerVelocity.dx = max(-MaxPlayerSpeed, min(MaxPlayerSpeed, playerVelocity.dx))
  playerVelocity.dy = max(-MaxPlayerSpeed, min(MaxPlayerSpeed, playerVelocity.dy))

  // 3
  var newX = playerSprite.position.x + playerVelocity.dx * CGFloat(dt)
  var newY = playerSprite.position.y + playerVelocity.dy * CGFloat(dt)

  // 4
  newX = min(size.width, max(0, newX));
  newY = min(size.height, max(0, newY));

  playerSprite.position = CGPoint(x: newX, y: newY)
}

如果你以前編寫過遊戲（或者學過物理），這些程式碼看起來會很熟悉。這是它們的大致作用：

1. 將當前加速度加到當前速度上。

   加速度以“畫素/秒”為單位（實際上是秒²，但這無關緊要）。而 update() 方法執行的頻率要遠遠大於“1次/秒”。因此，我們需要用加速度乘以 δ 時間（每幀所用的時間），即 dt。否則，飛船會比它理論上的速度要快 60 倍！

2. 將飛船的速度限制在 ± MaxPlayerSpeed 之內，如果飛船速度為負值，不得小於 ﹣ MaxPlayerSpeed，如果飛船速度為正，不得大於 + MaxPlayerSpeed。

3. 將當前速度加到位置計算中去。速度的單位是“畫素點/秒”，因此需要將它乘以 δ 時間（dt），然後才能加到當前位置中去。

4. 限制飛船的位置不要超出螢幕邊沿。我們不想讓飛船飛出螢幕以外，然後再也回不來了！

還有一件事情：你需要計算時間差（δ 時間 dt）。Sprite Kit 會重複呼叫 update() 方法並傳入一個當前時間，因此速度計算是 OK 的。

要記錄 δ 時間，需要增加一個屬性：

var lastUpdateTime: CFTimeInterval = 0

然後將 update 方法修改為：

override func update(currentTime: CFTimeInterval) {

  // to compute velocities we need delta time to multiply by points per second
  // SpriteKit returns the currentTime, delta is computed as last called time - currentTime
  let deltaTime = max(1.0/30, currentTime - lastUpdateTime)
  lastUpdateTime = currentTime

  updatePlayerAccelerationFromMotionManager()
  updatePlayer(deltaTime)
}

讓我們看一下是怎麼實現的。

用這一次 update() 方法呼叫的時間，減去上一次 update() 方法呼叫的時間，得到 δ 時間 dt。為了保險起見，將 dt 限制為最小不得小於 30 分之 1 秒。如果 App 的幀率因為某種原因變得波動較大的時候，飛船不至於在一幀之內突然就飛出螢幕。

呼叫 updatePlayerAccelerationFromMotionManager() 方法根據加速計的值計算玩家的加速度。

最後，呼叫 updaePlayer() 方法去移動飛船，將 dt 引入到移動速度的計算中去。

在真實裝置上（不要在模擬器上）執行程式。現在你可以通過傾斜裝置來控制飛船了：

還剩最後一件事情：在 GameViewController.swift 中，找到這行：

skView.ignoresSiblingOrder = true

修改為：

skView.ignoresSiblingOrder = false

這一句將 Sprite Kit 繪製精靈時的一個優化特性關閉。也就是說繪製精靈時，將按照精靈被加入的先後順序進行繪製。這一點將在後面用到。

開始三角計算

如果你跳過了前面的內容，直接從這一節開始，請在這裡下載開始專案。在你的裝置上執行程式——你會看到一艘飛船，並可以用加速計來控制它移動。當然，這其中沒有使用任何三角學的內容，因此接下來讓我們開始這部分的內容！

我們有一個不錯的想法——為了減少玩家的困惑——讓飛船根據它當前運動的方向旋轉，而不是一直將頭朝向一個方向：正前方。

要旋轉飛船，要先計算出它應該旋轉多少度。但你並不知道它是多少，你只有一個速度向量。通過這個向量能夠得到一個角度嗎？

讓我們想一下，我們已知的條件。玩家的速度由兩部分組成：一個 x 軸方向上的長度，和一個 y 方向上的長度：

如果你將它們重新排列一下，你就會發現這構成了一個三角形：

這裡，鄰邊（playerVelocity.dx)的長和對邊（playerVelocity.dy)的長是已知的。

你已知直角三角形的兩邊，想知道一個夾角（這符合“已知兩條邊之長，求角的大小”），因此我們需要用到下列反三角函式之一：arcsin、arccos、arctan。

因為我們求的是已知的兩邊邊長之間的夾角，因此用 arctan 函式即可找出飛船旋轉的角度。也就是：

angle = arctan(opposite / adjacent)

Swift 標註庫中有一個計算反切的 atan() 函式，但它有幾個限制：x 或 y 得到的結果和 -x 或 -y 是一樣的，因此對於兩個完全相反的速度向量來說，atan() 計算出來的角度是相同的。此外，這個角度也不是你最終想像的那樣——你想計算的是實際上是相對於某個軸的相對角度，在 atan() 返回的結果上加上 90 、180 或者 270 度偏移角度後的角度。

你可以寫一個四個分支的 if 語句，去計算正確的角度，將速度向量中的變數的符號也就是說向量所處的象限也考慮進去，然後再進行正確的偏移。但我們有一個更簡單的解決方法：

對於這個問題，用 atan2() 函式要比用 atan() 函式要簡單得多。atan2() 函式使用單獨的 x 引數和 y 引數，並能夠正確地判斷整個旋轉角度。

angle = atan2(opposite, adjacent)

在 updatePlayer 方法最後加入這兩句：

let angle = atan2(playerVelocity.dy, playerVelocity.dx)
playerSprite.zRotation = angle

注意首先傳入 y 座標。通常我們會寫成 atan(x,y)，但這錯的。記住，第一個引數是對邊，也就是這裡的 y 座標，位於我們想計算的角的正對面。

執行程式，進行測試：

呃，有點不對勁。飛船是會轉，但它指向的方向不是它正在飛行的方向！

這是因為：飛船精靈的圖片是指向上方的，預設的旋轉角度是 0 度。但在數學中，0 度並不是指向上的，而是指向右的，即 X 軸的方向：

為了解決這個問題，可以將旋轉角度減去 90 度，以便和精靈圖片的朝向相一致：

playerSprite.zRotation = angle - 90

你可以測試一下。

不！比剛才還要糟糕了！到底怎麼回事？

弧度、度和參考點

正常情況下，人們總是習慣於將角度看成是 0-360 度的值。但在數學中，通常用弧度來作為角度的地位，也就是說用 π （希臘字母 pi，讀“pie”，但卻不能吃）來表達角度。

一個弧度被定義為在圓上的一段長度和圓半徑相等的弧所對應的角度。因此，如果要用這個線段（一個弧度長）測量整個圓的長度，就需要用反覆測量 2π 次。

注意黃色的線段（半徑）和紅色的線段（圓弧）是等長。這個圓弧所夾的角度就是一個弧度！

當你用 3-360 °來衡量一個角度時，數學家卻將它看成是 0-2π 。絕大部分數學函式都使用弧度，因為計算的時候弧度更方便一些。Sprite Kit 在測量角度時一律使用弧度。atan2() 函式的返回值也是弧度，但你卻用它和 90 進行加減。

由於我們將同時使用弧度和度，因此將二者進行相互轉換是很有必要的。轉換非常簡單：因為不管 2π 還是 360° 都是一個圓，π 就等於 180°，從弧度轉換為度只需要除以 π 再乘以 180 即可。至於從度轉換到弧度，則除以 180 再乘以 π 即可。

在 C 的數學庫中（它在 Swift 中是自動包含的）有一個常量 M_PI，就代表了一個 π，型別為 Double。Swift 嚴格的型別轉換規則使得這個常量並不是很好用，很多時候這個值需要被轉換成 CGFloat，因此最好重新定義一個常量。在 GameScene.swift 的類的定義之外，在檔案頂部新增下列宣告：

let Pi = CGFloat(M_PI)

然後定義兩個常量，用於在度和弧度之間進行轉換：

let DegreesToRadians = Pi / 180
let RadiansToDegrees = 180 / Pi

接下來在 updatePlayer 方法中修改旋轉的程式碼，引入 DegreesToRadians 常量：

playerSprite.zRotation = angle - 90 * DegreesToRadians

執行程式，你將看到飛船終於正確地轉向了。

從牆壁上彈回

我們的飛船現在可以用加速計來控制移動了，同時我們通過三角計算讓它在飛行的同時保持正確的方向。這開了一個很好頭。

讓飛船在螢幕邊沿卡住不動並不是一個很好的做法。我們它替換成：當它飛到螢幕邊緣時，讓它反彈回來！

首先將 upatePlayer() 方法中的這幾行刪除：

// 4
newX = min(size.width, max(0, newX))
newY = min(size.height, max(0, newY))

替換為：

And replace them with the following:
var collidedWithVerticalBorder = false
var collidedWithHorizontalBorder = false

if newX < 0 {
  newX = 0
  collidedWithVerticalBorder = true
} else if newX > size.width {
  newX = size.width
  collidedWithVerticalBorder = true
}

if newY < 0 {
  newY = 0
  collidedWithHorizontalBorder = true
} else if newY > size.height {
  newY = size.height
  collidedWithHorizontalBorder = true
}

這段程式碼片段飛船是否飛到了螢幕的邊沿，如果是，將一個布林變數設定為 true。當這樣的碰撞發生後會怎樣？讓飛船從邊緣彈回，你可以直接將速度向量和加速度向量取反。在 updatePlayer() 方法中繼續新增：

if collidedWithVerticalBorder {
  playerAcceleration.dx = -playerAcceleration.dx
  playerVelocity.dx = -playerVelocity.dx
  playerAcceleration.dy = playerAcceleration.dy
  playerVelocity.dy = playerVelocity.dy
}

if collidedWithHorizontalBorder {
  playerAcceleration.dx = playerAcceleration.dx
  playerVelocity.dx = playerVelocity.dx
  playerAcceleration.dy = -playerAcceleration.dy
  playerVelocity.dy = -playerVelocity.dy
}

如果碰撞發生，將加速度和速度反向，讓飛船從牆上彈開。

執行程式，進行測試。

呃，彈是會彈了，只不過看起來有點過於靈敏了。問題是你並不想讓飛船像一隻橡皮球一樣彈來彈去——每次碰撞後它都會消耗掉一些能量，因此經過碰撞之後速度會比之前的要小。

另外定義一個常量，就放在 let MaxPlayerSpeed: CGFloat = 200 之後：

let BorderCollisionDamping: CGFloat = 0.4

現在，將 updatePlayer 方法中剛才新加的程式碼修改為：

if collidedWithVerticalBorder {
  playerAcceleration.dx = -playerAcceleration.dx * BorderCollisionDamping
  playerVelocity.dx = -playerVelocity.dx * BorderCollisionDamping
  playerAcceleration.dy = playerAcceleration.dy * BorderCollisionDamping
  playerVelocity.dy = playerVelocity.dy * BorderCollisionDamping
}

if collidedWithHorizontalBorder {
  playerAcceleration.dx = playerAcceleration.dx * BorderCollisionDamping
  playerVelocity.dx = playerVelocity.dx * BorderCollisionDamping
  playerAcceleration.dy = -playerAcceleration.dy * BorderCollisionDamping
  playerVelocity.dy = -playerVelocity.dy * BorderCollisionDamping
}

現在，我們將加速度和速度乘以了一個衰減係數 BorderCollisionDamping。這樣就可以讓能量在碰撞後有所損失。當飛船撞上螢幕邊沿之後只保留原來速度的 40%。

如果你有興趣，可以修改 BorderCollisionDamping 的值，看看效果會有什麼不同。如果你將值改成大於 1 的數，則飛船甚至可以從碰撞中獲得能量！

你會注意到還有一個小問題：如果你將飛船瞄準螢幕底部，讓它反覆不停地撞向螢幕邊沿，則它會在向上和向下的方向之間打轉。

用 arctan 函式計算 x 和 y 元件之間的夾角是 OK 的，但這個 X 和 Y 值必須足夠大。在這裡，由於衰減係數的存在，速度被降低到接近於 0。當我們用 atan2() 計算飛船小的 x 和 y 值時，一個很小的波動就會導致算出的角度出現非常大的改變。

一個辦法是當速度變得很低時，就不要改變角度了。嗯，是該打個電話問候下我們的老朋友畢達哥拉斯（勾股定理的發明者）了。

事實上我們儲存的並不是飛船的 speed（快慢）。我們儲存的是飛船的 velocity (速度)，它是一個向量（關於 speed 和 velocity 的區別，請看這裡），速度有兩個元件構成，一個 x 方向上的速度，一個 y 方向上的速度。但為了表達最終這個飛船的速度有多快（比如它是否慢到不需要飛船轉向），我們需要將速度的 x 元件和 y 元件合併成一個單個的標量值。

這就是前面我們講過的“已知三角形兩邊之長，求第三邊之長。”

如圖所示，飛船真正的速度是——它每秒鐘在螢幕上移動的畫素——即螢幕上三角形的斜邊，它又是由 x 方向上的速度和 y 方向上的速度構成。

使用畢達哥拉斯公式（勾股定理）就是：

真實速度 = √(playerVelocity.dx² + playerVelocity.dy²)

從 updatePlayer() 中刪除以下程式碼：

let angle = atan2(playerVelocity.dy, playerVelocity.dx)
playerSprite.zRotation = angle - 90 * DegreesToRadians

替換成以下程式碼：

let RotationThreshold: CGFloat = 40

let speed = sqrt(playerVelocity.dx * playerVelocity.dx + playerVelocity.dy * playerVelocity.dy)
if speed > RotationThreshold {
  let angle = atan2(playerVelocity.dy, playerVelocity.dx)
  playerSprite.zRotation = angle - 90 * DegreesToRadians
}

執行程式。現在飛船在碰到邊緣後的轉向變得穩定了。如果你奇怪 40 這個值是怎麼來的，我的回答是“經驗值”。在程式碼中通過 “NSLog()” 語句列印飛船撞到牆上的速度值，然後不停地調整這個值，一直到你覺得可以就行了。

平滑轉向

但是，解決一個問題的同時又會帶來別的問題。讓飛船慢慢減速，直至停止。然後翻轉裝置，讓飛船轉向並向另一個方向飛行。

如果是在之前，你會看到一個漂亮的轉向動畫。但因為我們添加了防止飛船在低速下改變方向的程式碼，現在的轉向會變得非常突然。這只是一個小問題，但這個問題關係到我們能否製作出一個好的 App 和遊戲。

解決辦法是不要立馬將方向切換到新的角度，而是在每一幀逐步“混合滲入”新角度和舊角度。這種方式不但重新生成了轉向動畫而且仍然能夠防止飛船在低速下轉向。“混合滲入”聽起來很神奇，但實際上卻不難實現。但是它需要你記錄下飛船每幀的角度，因此我們要在 GameScene 類中新增一個屬性：

var playerAngle: CGFloat = 0

將 updatePlayer() 中的轉向程式碼修改為：

let RotationThreshold: CGFloat = 40
let RotationBlendFactor: CGFloat = 0.2

let speed = sqrt(playerVelocity.dx * playerVelocity.dx + playerVelocity.dy * playerVelocity.dy)
if speed > RotationThreshold {
  let angle = atan2(playerVelocity.dy, playerVelocity.dx)
  playerAngle = angle * RotationBlendFactor + playerAngle * (1 - RotationBlendFactor)
  playerSprite.zRotation = playerAngle - 90 * DegreesToRadians
}

playerAngle 變數包含了用混合係數乘以新角度和上一幀的角度。也就是說新的角度只佔飛船實際轉向的 20% 的份額。隨著時間的增長，越來越多的新角度被累加進去，直到飛船最終指向了正確的方向。

執行程式，測試飛船從一個方向轉到另一個方向時不會再顯得突兀。

現在，飛出幾個圓環，反時針和順時針都試一試。你會看到在圓環的某些點上，飛船會突然反方向旋轉 360°。這種現在總是出現在圓環上的某幾個位置。這是怎麼回事？

atan2() 返回一個 +π 到 -π (+180°到-180°)之間的角度。也就是說如果當前角度接近 +π 時，並在轉動過程中轉過了一小點，那麼他會反過來轉到 -π（反之亦然）。

這兩個位置實際上是同一個位置（ -180 和 +180 在圓上是同一個位置），但混合演算法還不夠智慧，沒有意識到這點——它認為角度整個改變了 360 度（2π 弧度），因此飛船做了反方向旋轉 360°。

要解決這個問題，需要知道什麼時候角度超過了閥值，並適當地調整 playerAngle。在 GameScene 類中新增一個新屬性：

var previousAngle: CGFloat = 0

然後再一次修改旋轉程式碼為：

let speed = sqrt(playerVelocity.dx * playerVelocity.dx + playerVelocity.dy * playerVelocity.dy)
if speed > RotationThreshold {
  let angle = atan2(playerVelocity.dy, playerVelocity.dx)

  // did angle flip from +π to -π, or -π to +π?
  if angle - previousAngle > Pi {
    playerAngle += 2 * Pi
  } else if previousAngle - angle > Pi {
    playerAngle -= 2 * Pi
  }

  previousAngle = angle
  playerAngle = angle * RotationBlendFactor + playerAngle * (1 - RotationBlendFactor)
  playerSprite.zRotation = playerAngle - 90 * DegreesToRadians
}

這裡，我們判斷當前和之前的角度之差，看是否超過了這個閥值：0 到 π（180°）。

執行程式。這樣飛船的轉向就不再有任何問題了。

用三角學發現目標

我們有了一個很好的開始——我們擁有了一艘能夠靈活飛行的飛船。但這艘飛船的日子未免也太舒服、太一帆風順了。給它添點刺激怎麼樣？我們將為它增加一個敵人：一挺炮臺！

在 GameScene 類中加入兩個屬性：

let cannonSprite = SKSpriteNode(imageNamed: "Cannon")
let turretSprite = SKSpriteNode(imageNamed: "Turret")

You’ll set these sprites up in didMoveToView(). Place this code before the setup for playerSprite, so that the spaceship always gets drawn after (and therefore in front of) the cannon:

我們將在 didMoveToView() 方法中加入這兩個角色。將程式碼放到建立 playSprite 之前，以便在飛船出現之前炮臺就已經存在了：

cannonSprite.position = CGPoint(x: size.width/2, y: size.height/2)
addChild(cannonSprite)

turretSprite.position = CGPoint(x: size.width/2, y: size.height/2)
addChild(turretSprite)

注意：還記得我們之前寫的 skView.ignoresSiblingOrder=false 一句嗎？這句程式碼讓精靈按照它們新增到場景的先後順序繪製。雖然還可以用別的方式來決定精靈繪製的順序——比如使用 zPosition 屬性——但我們採用的是最簡單的方法。

炮臺由兩部分構成：一個固定不動的底座，以及一個會旋轉瞄向玩家的炮塔。執行程式，你會看到一座全新的炮臺坐落在螢幕的中央。

給炮臺一個靶子吧！

我們想讓炮臺的炮塔隨時都能指向玩家。要達到這個目的，我們需要計算出炮塔和玩家之間的角度。

這個計算和讓飛船轉向前進方向的計算差不多。不同的是這個三角形不是用飛船的速度來構成，而是用飛船和炮臺之間的連線來構成：

我們仍然可以用 atan2() 來計算這個角度。新增一個新方法：

func updateTurret(dt: CFTimeInterval) {

  let deltaX = playerSprite.position.x - turretSprite.position.x
  let deltaY = playerSprite.position.y - turretSprite.position.y
  let angle = atan2(deltaY, deltaX)

  turretSprite.zRotation = angle - 90 * DegreesToRadians
}

deltaX 和 deltaY 變量表示了玩家和炮塔之間的距離。將這兩個值代入到 atan2() 中，就可以得到它們之間的夾角。

同前次一樣，我們需要將這個角度偏轉到 X 軸方向（90°），以使炮塔的方向正確。注意，atan2() 只會返回一個由斜線和 0 度線構成的夾角，而不是三角形的內角。

然後來呼叫這個方法。在 update() 方法中的最後一句加上：

updateTurret(deltaTime)

執行程式，炮塔會自動對著飛船。很簡單是吧？這就是三角學的威力！

挑戰：實際上真正的炮臺是不會瞬移的——它實際是預判目標下一個位置在哪裡。它總是追趕著目標，略略地尾隨著飛船的位置。

要實現這個，我們可以用新角度和老角度進行“混合”，正如我們先前在飛船轉向的過程中所做的一樣。混合係數越小，炮塔瞄準飛船所需要的時間就越長。你可以試一下，看能否獨立實現這個功能。

### 加入血槽

在第二部分，你將實現玩家向炮臺開火的功能，而炮臺也可以給飛船造成損壞。要顯示二者剩餘的生命值，我們需要為角色新增血槽。讓我們開始吧。

在 GameScene.swift 中新增如下常量：

let MaxHealth = 100
let HealthBarWidth: CGFloat = 40
let HealthBarHeight: CGFloat = 4

在 GameScene 類中加入如下新屬性：

let playerHealthBar = SKSpriteNode()
let cannonHealthBar = SKSpriteNode() 
var playerHP = MaxHealth
var cannonHP = MaxHealth

在 didMoveToView() 方法中，在 startMonitoringAcceleration() 一句前插入：

addChild(playerHealthBar)
addChild(cannonHealthBar)

cannonHealthBar.position = CGPoint(
  x: cannonSprite.position.x,
  y: cannonSprite.position.y - cannonSprite.size.height/2 - 10
)

playerHealthBar 和 cannonHealthBar 都是 SKSpriteNode 物件，但我們沒有為它們指定任何圖片。相反，我們將用 Core Graphics 動態地為它們繪製血槽。

注意，我們將 cannonHealthBar 放到炮臺稍下一點的位置，但卻沒有指定 playerHealthBar 所在的位置。因為炮臺不會動，只需要設定一次它的位置就可以了。

而飛船是在不停運動著的，我們必須隨時修改 playerHealthBar 的位置。這個動作應當在 updatePlayer 中完成。在這個方法的最後加入：

playerHealthBar.position = CGPoint(
  x: playerSprite.position.x,
  y: playerSprite.position.y - playerSprite.size.height/2 - 15
)

剩下是就是繪製血槽自身了。在這個類中新加一個方法：

func updateHealthBar(node: SKSpriteNode, withHealthPoints hp: Int) {

  let barSize = CGSize(width: HealthBarWidth, height: HealthBarHeight);

  let fillColor = UIColor(red: 113.0/255, green: 202.0/255, blue: 53.0/255, alpha:1)
  let borderColor = UIColor(red: 35.0/255, green: 28.0/255, blue: 40.0/255, alpha:1)

  // create drawing context
  UIGraphicsBeginImageContextWithOptions(barSize, false, 0)
  let context = UIGraphicsGetCurrentContext()

  // draw the outline for the health bar
  borderColor.setStroke()
  let borderRect = CGRect(origin: CGPointZero, size: barSize)
  CGContextStrokeRectWithWidth(context, borderRect, 1)

  // draw the health bar with a colored rectangle
  fillColor.setFill()
  let barWidth = (barSize.width - 1) * CGFloat(hp) / CGFloat(MaxHealth)
  let barRect = CGRect(x: 0.5, y: 0.5, width: barWidth, height: barSize.height - 1)
  CGContextFillRect(context, barRect)

  // extract image
  let spriteImage = UIGraphicsGetImageFromCurrentImageContext()
  UIGraphicsEndImageContext()

  // set sprite texture and size
  node.texture = SKTexture(image: spriteImage)
  node.size = barSize
}

這段程式碼繪製了一個血槽。首先設定填充色和邊框色，然後建立圖形上下文，繪製兩個方框：一個用作血槽的邊框，它總是固定大小，另一個是血條，它是會變的，要看生命的點數。這個方法從上下文中返回一個 UIImage 並賦給 Sprite 的 texture 屬性。

我們需要呼叫這個方法兩次，一次是針對玩家物件，一次是針對炮臺。因為繪製血槽的代價相對昂貴（Core Graphics 繪圖不使用硬體加速），因此我們不想在幀重新整理時繪製。相反，我們只應該在玩家或者炮臺的生命值被改變的時候繪製。暫時，我們只調用它一次，用於顯示血槽滿血的狀態。

在 didMoveToView 方法最後加入：

updateHealthBar(playerHealthBar, withHealthPoints: playerHP)
updateHealthBar(cannonHealthBar, withHealthPoints: cannonHP)
```