• 原文鏈接 : Trigonometry for Games – Sprite Kit and Swift Tutorial: Part 1/2
• 原文作者 : Nick Lockwood
• 譯文出自 : 開發(fā)技術(shù)前線 www.devtf.cn
• 譯者 : kmyhy

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

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

是否一提到數(shù)學(xué)就讓你恐懼？你是否曾經(jīng)因為數(shù)學(xué)成績不好而想放棄游戲開發(fā)這個職業(yè)？

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

有一個訣竅：作為一個開發(fā)者，你其實不需要學(xué)習(xí)多少數(shù)學(xué)技能。在我們的職業(yè)生涯中的絕大部分計算，其實都用最基本的數(shù)學(xué)技能就足以應(yīng)付。

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

在本教程中，你需要學(xué)習(xí)一些重要的三角函數(shù)，以及如何在游戲中使用它們。然后，你需要用學(xué)到的知識做一些練習(xí)，通過 Sprite Kit 開發(fā)一個簡單的太空射擊游戲。

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

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

注意：本教程中的游戲使用了加速計，因此你應(yīng)該使用真實的 iOS 設(shè)備以及一個開發(fā)者賬號。

開始：關(guān)于三角學(xué)

聽起來有點拗口，但三角數(shù)學(xué)（或簡稱三角學(xué)）的簡單定義就是與三角形有關(guān)的計算（三角學(xué)因此而來）。

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

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

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

因為我們知道每張飛船的 x,y 坐標，因此，我們可以算出新加的兩條線的長度。現(xiàn)在，你已經(jīng)獲得三角形兩條邊的長，通過三角函數(shù)，你可以算出對角線的長度——也就是飛船之間的距離。

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

只要在游戲中能夠以直角三角形描述的問題——比如兩個對象之間的空間關(guān)系——我們都可以用三角學(xué)函數(shù)進行計算。

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

例如，在這個太空飛行游戲中，可能會發(fā)生這些事情：

• 一只飛船向另一只飛船發(fā)射激光束

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

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

諸如此類的，你都會用到三角學(xué)！

三角函數(shù)

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

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

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

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

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

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

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

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

注意：三角函數(shù)的作用就像是把一個圓投影到直線上，要使用它們并不需要我們?nèi)ダ斫夂瘮?shù)是怎么實現(xiàn)的。如果你想知道其中細節(jié)，可以在許多站點或視頻中找到解釋，例如這個站點：Math is Fun

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

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

將上述值代入公式：

sin(45) = opposite / 10

進行等式變形，結(jié)果為：

opposite = sin(45) * 10

45 度角的 sin 值為 0.707(截取至 3 位小數(shù))，于是上式可變?yōu)?#xff1a;

opposite = 0.707 * 10 = 7.07

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

已知兩條邊之長，求夾角

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

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

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

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

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

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

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

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

這就需要用到三角學(xué)的勾股定理了。如果你已經(jīng)徹底忘光了以前學(xué)過的數(shù)學(xué)課，那么這個公式也許會勾起你的記憶：

a² + b² = c²

或者用三角學(xué)的專用名詞來說：

對邊² + 鄰邊² = 斜邊²

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

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

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

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

alpha + beta + 90 = 180

簡化之后變成：

alpha + beta = 90

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

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

好了，理論就學(xué)到這里。讓我們來做些練習(xí)。

跳過，還是不跳過？

接下來幾節(jié)，你會創(chuàng)建一個基本的 Sprite Kit 項目，這個 App 中有一艘太空飛船會在屏幕上根據(jù)加速計來移動。這不會涉及任何三角計算，你如果對 Sprite Kit 非常熟悉了，就像下面這個家伙一樣：

那么你可以跳過開頭的內(nèi)容，直接進入“開始三角計算”一節(jié)！——在那里，我會為你提供一個開始項目。

但如果你喜歡從頭開始編寫代碼，請繼續(xù)閱讀 :]

創(chuàng)建項目

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

打開 Xcode,選擇 File\New\Project…，選擇 iOS\Application\Game 模板。項目命名為 TrigBlaster，語言選擇 Swift，游戲技術(shù)設(shè)置為 SpriteKit，設(shè)備類型設(shè)置為 iPhone。然后點擊 Next:

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

從這里下載本教程所需資源。這個壓縮文件包含了圖片和聲音。解壓縮，將每張圖片拖到 Images.xcassets 文件夾，以備創(chuàng)建精靈時用到。你可以刪除/替換默認項目中的 Spaceship 精靈，如果你不想用它的話。

現(xiàn)在來添加聲音。將 Sounds 文件夾拖進 Xcode 中，確保選中 Create groups 選項。

好，準備工作已經(jīng)完成——現(xiàn)在讓我們來編寫代碼！

用加速計做方向盤

這是一個簡單游戲，你只需要在一個文件中完成絕大部分工作：GameScene.swift?，F(xiàn)在，這個文件中包含了一大堆你用不到的代碼。游戲運行的方向也不正確，我們先來搞定這個。

切換到橫屏模式

在項目導(dǎo)航窗口中點擊 TrigBlaster ,打開 Target 設(shè)置，選中 Target 列表中的 TrigBlaster。打開 General 標簽窗口，在 Deployment Info 一欄的 Device Orientation 下，反選所有方向，只勾選 Landscape Right(譯者注：原文是 Left,但圖中又是 Right，根據(jù)后面的內(nèi)容看應(yīng)該是 Right)：

運行程序， App 將以橫屏方向啟動。當前 App 打開了一個空的畫面，在 GameViewController.swift 的代碼中，這個畫面是來自于 GameScene.sks 文件。在 GameScene.swift 代碼中，添加了一個 Hello World 標簽。

將 GameScene.swift 中的代碼替換為：

import SpriteKitclass GameScene: SKScene {override func didMoveToView(view: SKView) {// set scene size to match viewsize = view.bounds.sizebackgroundColor = 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 viewsize = view.bounds.sizebackgroundColor = 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 坐標設(shè)置為 60，這樣會將它放到屏幕左下角的FPS(幀率)的上方。

注意：FPS 信息是用于調(diào)試的，但我們可以隱藏它，如果你不想看到它的話。在你將游戲提交給 App 商店之前，你可以這樣做。

運行程序，你將看到：

要讓飛船移動，你需要使用 iPhone 的內(nèi)置加速計。不幸的是，iOS 模擬器無法模擬加速計，因此從現(xiàn)在起，你就需要在真實物理設(shè)備上進行開發(fā)了。

注意：如果你不知道如何在設(shè)備上安裝 App，請看另外一個教程，該教程描述了如何獲取和安裝證書和設(shè)備授權(quán)文檔，已允許 Xcode 將 App 安裝到真實的 iPhone 或 iPad 上。雖然不是強制的，但你必須購買一個蘋果開發(fā)者證書。

要讓加速計能夠驅(qū)動飛船，我們需要將設(shè)備向一邊傾斜。這就是為什么我們要在項目設(shè)置中將設(shè)備方向固定為一個橫屏方向的原因，因為當你處于激烈戰(zhàn)斗中的時候，屏幕突然發(fā)生旋轉(zhuǎn)是一件非常悲劇的事情！

加速計的使用非常簡單，因為我們可以使用 Core Motion 框架。要獲取加速計數(shù)據(jù)有兩種方式：注冊一個通知讓加速計以某個周期不斷地向 App 發(fā)送消息并調(diào)用回調(diào)方法，或者在我們需要數(shù)據(jù)時主動拉取數(shù)據(jù)。蘋果建議我們不要使用“推”數(shù)據(jù)的方式除非有必要（比如進行精確測量或?qū)Ш椒?wù)）。因為這種方式會比較耗電。

你的游戲有一個地方非常適合“拉取”加速計數(shù)據(jù)：update()方法每一幀都會被 Sprite Kit 調(diào)用。你可以在這個方法中獲取加速計數(shù)據(jù)，并以此來移動飛船。

首先，在 GameScene.swift 頂部加入一個導(dǎo)入語句：

import CoreMotion

現(xiàn)在，Core Motion 框架會鏈接到 App，你可以使用它了。

接著，在類的實現(xiàn)中增加如下屬性：

var accelerometerX: UIAccelerationValue = 0 var accelerometerY: UIAccelerationValue = 0let 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 方法會檢測設(shè)備上是否具有加速計硬件，如果是，則開始收集數(shù)據(jù)。stop 方法則用于關(guān)閉加速計監(jiān)聽。

激活加速計的較合適的地方是在 didMoveToView() 方法里面。在這個方法的 addChild(playerSprite) 一行后加入：

startMonitoringAcceleration()

而停止加速計的時機是在類的解析函數(shù)里面。在類中增加一個方法：

deinit {stopMonitoringAcceleration() }

然后，新增這個方法，每當玩家角色位置發(fā)生改變時就調(diào)用這個方法讀取加速計的值：

func updatePlayerAccelerationFromMotionManager() {if let acceleration = motionManager.accelerometerData?.acceleration {let FilterFactor = 0.75accelerometerX = acceleration.x * FilterFactor + accelerometerX * (1 - FilterFactor)accelerometerY = acceleration.y * FilterFactor + accelerometerY * (1 - FilterFactor)} }

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

注意：加速計負責記錄當前施加到它身上的加速度。由于重力的作用iPhone 總是處于加速度的作用下（也因此 iPhone 總是知道哪個方向是屏幕的方向），但由于用戶是用手拿著 iPhone(手并永遠不會完全穩(wěn)定在一個地方)，因此重力會有細微波動。對于這些細微的波動我們不在乎，但比較大的改變就有可能是用戶改變了設(shè)備的方向。通過一個簡單的低通量過濾，我們可以只獲取方向改變信息而過濾掉無關(guān)的波動。

現(xiàn)在我們已經(jīng)讓設(shè)備方向固定為一個，又如何讓玩家的飛船移動呢？

基于物理引擎的移動通常是這樣實現(xiàn)的：

• 首先，基于用戶輸入（在這里就是加速計數(shù)據(jù)）改變加速度。

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

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

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

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

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

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

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 一般約定，將兩個常量的首字母大寫，以區(qū)別于普通的 let 變量。

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

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

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

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

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

新增一個 updatePlayer() 方法：

func updatePlayer(dt: CFTimeInterval) {// 1playerVelocity.dx = playerVelocity.dx + playerAcceleration.dx * CGFloat(dt)playerVelocity.dy = playerVelocity.dy + playerAcceleration.dy * CGFloat(dt)// 2playerVelocity.dx = max(-MaxPlayerSpeed, min(MaxPlayerSpeed, playerVelocity.dx))playerVelocity.dy = max(-MaxPlayerSpeed, min(MaxPlayerSpeed, playerVelocity.dy))// 3var newX = playerSprite.position.x + playerVelocity.dx * CGFloat(dt)var newY = playerSprite.position.y + playerVelocity.dy * CGFloat(dt)// 4newX = min(size.width, max(0, newX));newY = min(size.height, max(0, newY));playerSprite.position = CGPoint(x: newX, y: newY) }

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

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

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

將飛船的速度限制在 ± MaxPlayerSpeed 之內(nèi)，如果飛船速度為負值，不得小于 ﹣ MaxPlayerSpeed，如果飛船速度為正，不得大于 + MaxPlayerSpeed。

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

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

還有一件事情：你需要計算時間差（δ 時間 dt）。Sprite Kit 會重復(fù)調(diào)用 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 - currentTimelet deltaTime = max(1.0/30, currentTime - lastUpdateTime)lastUpdateTime = currentTimeupdatePlayerAccelerationFromMotionManager()updatePlayer(deltaTime) }

讓我們看一下是怎么實現(xiàn)的。

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

調(diào)用 updatePlayerAccelerationFromMotionManager() 方法根據(jù)加速計的值計算玩家的加速度。

最后，調(diào)用 updaePlayer() 方法去移動飛船，將 dt 引入到移動速度的計算中去。

在真實設(shè)備上（不要在模擬器上）運行程序?，F(xiàn)在你可以通過傾斜設(shè)備來控制飛船了：

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

skView.ignoresSiblingOrder = true

修改為：

skView.ignoresSiblingOrder = false

這一句將 Sprite Kit 繪制精靈時的一個優(yōu)化特性關(guān)閉。也就是說繪制精靈時，將按照精靈被加入的先后順序進行繪制。這一點將在后面用到。

開始三角計算

如果你跳過了前面的內(nèi)容，直接從這一節(jié)開始，請在這里下載開始項目。在你的設(shè)備上運行程序——你會看到一艘飛船，并可以用加速計來控制它移動。當然，這其中沒有使用任何三角學(xué)的內(nèi)容，因此接下來讓我們開始這部分的內(nèi)容！

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

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

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

如果你將它們重新排列一下，你就會發(fā)現(xiàn)這構(gòu)成了一個三角形：

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

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

因為我們求的是已知的兩邊邊長之間的夾角，因此用 arctan 函數(shù)即可找出飛船旋轉(zhuǎn)的角度。也就是：

angle = arctan(opposite / adjacent)

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

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

對于這個問題，用 atan2() 函數(shù)要比用 atan() 函數(shù)要簡單得多。atan2() 函數(shù)使用單獨的 x 參數(shù)和 y 參數(shù)，并能夠正確地判斷整個旋轉(zhuǎn)角度。

angle = atan2(opposite, adjacent)

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

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

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

運行程序，進行測試：

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

這是因為：飛船精靈的圖片是指向上方的，默認的旋轉(zhuǎn)角度是 0 度。但在數(shù)學(xué)中，0 度并不是指向上的，而是指向右的，即 X 軸的方向：

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

playerSprite.zRotation = angle - 90

你可以測試一下。

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

弧度、度和參考點

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

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

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

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

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

在 C 的數(shù)學(xué)庫中（它在 Swift 中是自動包含的）有一個常量 M_PI，就代表了一個 π，類型為 Double。Swift 嚴格的類型轉(zhuǎn)換規(guī)則使得這個常量并不是很好用，很多時候這個值需要被轉(zhuǎn)換成 CGFloat，因此最好重新定義一個常量。在 GameScene.swift 的類的定義之外，在文件頂部添加下列聲明：

let Pi = CGFloat(M_PI)

然后定義兩個常量，用于在度和弧度之間進行轉(zhuǎn)換：

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

接下來在 updatePlayer 方法中修改旋轉(zhuǎn)的代碼，引入 DegreesToRadians 常量：

playerSprite.zRotation = angle - 90 * DegreesToRadians

運行程序，你將看到飛船終于正確地轉(zhuǎn)向了。

從墻壁上彈回

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

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

首先將 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 = falseif newX < 0 {newX = 0collidedWithVerticalBorder = true } else if newX > size.width {newX = size.widthcollidedWithVerticalBorder = true }if newY < 0 {newY = 0collidedWithHorizontalBorder = true } else if newY > size.height {newY = size.heightcollidedWithHorizontalBorder = true }

這段代碼片段飛船是否飛到了屏幕的邊沿，如果是，將一個布爾變量設(shè)置為 true。當這樣的碰撞發(fā)生后會怎樣？讓飛船從邊緣彈回，你可以直接將速度向量和加速度向量取反。在 updatePlayer() 方法中繼續(xù)添加：

if collidedWithVerticalBorder {playerAcceleration.dx = -playerAcceleration.dxplayerVelocity.dx = -playerVelocity.dxplayerAcceleration.dy = playerAcceleration.dyplayerVelocity.dy = playerVelocity.dy }if collidedWithHorizontalBorder {playerAcceleration.dx = playerAcceleration.dxplayerVelocity.dx = playerVelocity.dxplayerAcceleration.dy = -playerAcceleration.dyplayerVelocity.dy = -playerVelocity.dy }

如果碰撞發(fā)生，將加速度和速度反向，讓飛船從墻上彈開。

運行程序，進行測試。

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

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

let BorderCollisionDamping: CGFloat = 0.4

現(xiàn)在，將 updatePlayer 方法中剛才新加的代碼修改為：

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

現(xiàn)在，我們將加速度和速度乘以了一個衰減系數(shù) BorderCollisionDamping。這樣就可以讓能量在碰撞后有所損失。當飛船撞上屏幕邊沿之后只保留原來速度的 40%。

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

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

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

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

事實上我們保存的并不是飛船的 speed（快慢）。我們保存的是飛船的 velocity (速度)，它是一個向量（關(guān)于 speed 和 velocity 的區(qū)別，請看這里），速度有兩個組件構(gòu)成，一個 x 方向上的速度，一個 y 方向上的速度。但為了表達最終這個飛船的速度有多快（比如它是否慢到不需要飛船轉(zhuǎn)向），我們需要將速度的 x 組件和 y 組件合并成一個單個的標量值。

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

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

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

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

從 updatePlayer() 中刪除以下代碼：

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

替換成以下代碼：

let RotationThreshold: CGFloat = 40let 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 }

運行程序。現(xiàn)在飛船在碰到邊緣后的轉(zhuǎn)向變得穩(wěn)定了。如果你奇怪 40 這個值是怎么來的，我的回答是“經(jīng)驗值”。在代碼中通過 “NSLog()” 語句打印飛船撞到墻上的速度值，然后不停地調(diào)整這個值，一直到你覺得可以就行了。

平滑轉(zhuǎn)向

但是，解決一個問題的同時又會帶來別的問題。讓飛船慢慢減速，直至停止。然后翻轉(zhuǎn)設(shè)備，讓飛船轉(zhuǎn)向并向另一個方向飛行。

如果是在之前，你會看到一個漂亮的轉(zhuǎn)向動畫。但因為我們添加了防止飛船在低速下改變方向的代碼，現(xiàn)在的轉(zhuǎn)向會變得非常突然。這只是一個小問題，但這個問題關(guān)系到我們能否制作出一個好的 App 和游戲。

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

var playerAngle: CGFloat = 0

將 updatePlayer() 中的轉(zhuǎn)向代碼修改為：

let RotationThreshold: CGFloat = 40 let RotationBlendFactor: CGFloat = 0.2let 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 變量包含了用混合系數(shù)乘以新角度和上一幀的角度。也就是說新的角度只占飛船實際轉(zhuǎn)向的 20% 的份額。隨著時間的增長，越來越多的新角度被累加進去，直到飛船最終指向了正確的方向。

運行程序，測試飛船從一個方向轉(zhuǎn)到另一個方向時不會再顯得突兀。

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

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

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

要解決這個問題，需要知道什么時候角度超過了閥值，并適當?shù)卣{(diào)整 playerAngle。在 GameScene 類中添加一個新屬性：

var previousAngle: CGFloat = 0

然后再一次修改旋轉(zhuǎn)代碼為：

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 = angleplayerAngle = angle * RotationBlendFactor + playerAngle * (1 - RotationBlendFactor)playerSprite.zRotation = playerAngle - 90 * DegreesToRadians }

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

運行程序。這樣飛船的轉(zhuǎn)向就不再有任何問題了。

用三角學(xué)發(fā)現(xiàn)目標

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

在 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() 方法中加入這兩個角色。將代碼放到創(chuàng)建 playSprite 之前，以便在飛船出現(xiàn)之前炮臺就已經(jīng)存在了：

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 屬性——但我們采用的是最簡單的方法。

炮臺由兩部分構(gòu)成：一個固定不動的底座，以及一個會旋轉(zhuǎn)瞄向玩家的炮塔。運行程序，你會看到一座全新的炮臺坐落在屏幕的中央。

給炮臺一個靶子吧！

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

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

我們?nèi)匀豢梢杂?atan2() 來計算這個角度。添加一個新方法：

func updateTurret(dt: CFTimeInterval) {let deltaX = playerSprite.position.x - turretSprite.position.xlet deltaY = playerSprite.position.y - turretSprite.position.ylet angle = atan2(deltaY, deltaX)turretSprite.zRotation = angle - 90 * DegreesToRadians }

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

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

然后來調(diào)用這個方法。在 update() 方法中的最后一句加上：

updateTurret(deltaTime)

運行程序，炮塔會自動對著飛船。很簡單是吧？這就是三角學(xué)的威力！

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

要實現(xiàn)這個，我們可以用新角度和老角度進行“混合”，正如我們先前在飛船轉(zhuǎn)向的過程中所做的一樣?；旌舷禂?shù)越小，炮塔瞄準飛船所需要的時間就越長。你可以試一下，看能否獨立實現(xiàn)這個功能。

### 加入血槽

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

在 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 動態(tài)地為它們繪制血槽。

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

而飛船是在不停運動著的，我們必須隨時修改 playerHealthBar 的位置。這個動作應(yīng)當在 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 contextUIGraphicsBeginImageContextWithOptions(barSize, false, 0)let context = UIGraphicsGetCurrentContext()// draw the outline for the health barborderColor.setStroke()let borderRect = CGRect(origin: CGPointZero, size: barSize)CGContextStrokeRectWithWidth(context, borderRect, 1)// draw the health bar with a colored rectanglefillColor.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 imagelet spriteImage = UIGraphicsGetImageFromCurrentImageContext()UIGraphicsEndImageContext()// set sprite texture and sizenode.texture = SKTexture(image: spriteImage)node.size = barSize }

這段代碼繪制了一個血槽。首先設(shè)定填充色和邊框色，然后創(chuàng)建圖形上下文，繪制兩個方框：一個用作血槽的邊框，它總是固定大小，另一個是血條，它是會變的，要看生命的點數(shù)。這個方法從上下文中返回一個 UIImage 并賦給 Sprite 的 texture 屬性。

我們需要調(diào)用這個方法兩次，一次是針對玩家對象，一次是針對炮臺。因為繪制血槽的代價相對昂貴（Core Graphics 繪圖不使用硬件加速），因此我們不想在幀刷新時繪制。相反，我們只應(yīng)該在玩家或者炮臺的生命值被改變的時候繪制。暫時，我們只調(diào)用它一次，用于顯示血槽滿血的狀態(tài)。

在 didMoveToView 方法最后加入：

updateHealthBar(playerHealthBar, withHealthPoints: playerHP) updateHealthBar(cannonHealthBar, withHealthPoints: cannonHP) ```運行程序，現(xiàn)在玩家和炮臺都有了血槽：### 用三角學(xué)進行碰撞檢測暫時，飛船直接從炮臺身上飛過不會導(dǎo)致任何后果。假設(shè)讓飛船在和炮臺發(fā)生碰撞后造成一定的傷害，則效果要更刺激（和更真實）一些。現(xiàn)在可以把你扔到碰撞檢測范圍內(nèi)試一試了（不好意思，開個玩笑了 :]）。這里，有許多游戲開發(fā)者會說:“我需要使用物理引擎！”。當然，你可以用 Sprite Kit 的物理引擎來做這個，但要自己實現(xiàn)碰撞檢測其實一點都不難，尤其是如果你的精靈使用了簡單的圓形建模時。檢測兩個圓形是否相交其實很簡單：你只需要計算二者之間的距離（*咳咳* 勾股定理），然后判斷是否小于二者半徑之和（或者兩個半徑）。在 GameScene.swift 頂部加入兩個新常量：```swift let CannonCollisionRadius: CGFloat = 20 let PlayerCollisionRadius: CGFloat = 10<div class="se-preview-section-delimiter"></div>

這是炮臺和玩家的碰撞環(huán)的大小。查看一下精靈位圖，炮臺圖片的大小實際上要比這里指定的值要略大（25 像素），不過保留一點緩沖空間是好的，我們不準備讓這個游戲過于苛求，否則玩家就毫無樂趣可言了。

事實上，飛船也根本不是圓形也沒有關(guān)系。對于各種形狀的精靈來說，使用圓形模擬都是不錯的，而且這樣做還有一個好處，即使三角計算更加簡單。這里，飛船的直徑約 20 像素（直徑是半徑的兩倍）。

新增一個方法用于碰撞檢測：

func checkShipCannonCollision() {let deltaX = playerSprite.position.x - turretSprite.position.xlet deltaY = playerSprite.position.y - turretSprite.position.ylet distance = sqrt(deltaX * deltaX + deltaY * deltaY)if distance <= CannonCollisionRadius + PlayerCollisionRadius {runAction(collisionSound)} }<div class="se-preview-section-delimiter"></div>

首先算出兩個精靈間的 x 和 y 距離，將 x 和 y 當成是直角三角形的兩條邊就可以算出斜邊，這就是二者間的直線距離。

如果這個距離小于兩個碰撞半徑之和，播放生效。這個地方會報一個錯誤，因為我們還沒有實現(xiàn)聲效代碼——耐心一點，待會實現(xiàn)。

在 update() 最后添加：

checkShipCannonCollision()<div class="se-preview-section-delimiter"></div>

在 GameScene 類頂部新加一個屬性：

let collisionSound = SKAction.playSoundFileNamed("Collision.wav", waitForCompletion: false)<div class="se-preview-section-delimiter"></div>

運行程序，將飛船飛到炮塔上方測試碰撞邏輯是否正確。

注意當碰撞發(fā)生時，聲效播放起來就沒完沒了。因為當飛船飛過炮臺時，會檢測到多次碰撞，一個接一個。不僅僅是一個碰撞，而是每秒 60 次碰撞發(fā)生了，而每次碰撞都會播放一次聲效。

碰撞檢測只是一方面的問題，另外一方面的問題是碰撞反應(yīng)。我們不但要在碰撞時播放聲效，也想有一個物理反應(yīng)——飛船會從炮臺上彈開。

在 GameScene.swift 文件頂部添加一個常量：

let CollisionDamping: CGFloat = 0.8<div class="se-preview-section-delimiter"></div>

然后在 checkShipCannonCollision() 的 if 語句內(nèi)加入以下語句：

playerAcceleration.dx = -playerAcceleration.dx * CollisionDamping playerAcceleration.dy = -playerAcceleration.dy * CollisionDamping playerVelocity.dx = -playerVelocity.dx * CollisionDamping playerVelocity.dy = -playerVelocity.dy * CollisionDamping<div class="se-preview-section-delimiter"></div>

就像我們讓飛船從屏幕邊沿彈開一樣。運行程序進行測試。

如果飛船在撞上炮臺時飛得很快，這個方法沒有什么問題。如果速度很慢，哪怕它從反方向彈開，飛船仍然會有一段時間處于碰撞半徑之內(nèi)，甚至再也無法離開。顯然，這個辦法也有問題。

如果不將速度取反來彈開飛船，則我們可以通過改變飛船的位置讓它離開碰撞半徑，真正地將飛船從炮臺身上推開，

這需要計算炮臺和飛船之間的向量，幸運的是，為了計算二者之間的距離，我們已經(jīng)在前面計算過這個了。那么，如何利用距離向量去移動飛船？

這個向量由一個 deltaX 和一個 deltaY 構(gòu)成，并且指向了正確的方向，但它的長度是不對的。我們需要的長度是碰撞半徑和當前長度之差——這樣，我們將可以將這個長度加到飛船當前位置，飛船就不再和炮臺發(fā)生交疊了。

當前向量的長度是 distance，而我們需要將它的長度變成：

CannonCollisionRadius + PlayerCollisionRadius – distance

如何改變一個向量的長度？

辦法是使用“向量規(guī)范化”。通過將向量的 x 和 y 分別除以向量長度（用勾股定理），就可以對這個向量進行規(guī)范化。規(guī)范化向量之后，向量的長度就變成了 1。

然后，將 x 和 y 乘以上面計算出來的長度，就得到飛船需要移動的距離。在上幾行代碼后面加入：

let offsetDistance = CannonCollisionRadius + PlayerCollisionRadius - distancelet offsetX = deltaX / distance * offsetDistance let offsetY = deltaY / distance * offsetDistance playerSprite.position = CGPoint(x: playerSprite.position.x + offsetX,y: playerSprite.position.y + offsetY )<div class="se-preview-section-delimiter"></div>

運行程序，你將發(fā)現(xiàn)飛船能夠從炮臺上正確地彈開了。

除了碰撞邏輯，我們還需要讓飛船和炮臺“掉一些血”，并刷新血槽。在 if 語句中加入：

playerHP = max(0, playerHP - 20) cannonHP = max(0, cannonHP - 5) updateHealthBar(playerHealthBar, withHealthPoints: playerHP) updateHealthBar(cannonHealthBar, withHealthPoints: cannonHP)<div class="se-preview-section-delimiter"></div>

運行程序，飛船和炮臺發(fā)生碰撞后都會損失一些生命點。

碰撞偏移

為使效果更好看，我們可以讓飛船在碰撞后發(fā)生一些旋轉(zhuǎn)。這些旋轉(zhuǎn)是額外的，不影響飛行的飛行；僅僅是使碰撞效果更顯眼一點（飛行員頭會更暈）。在 GameScene.swift 頂部加入一個新常量：

let PlayerCollisionSpin: CGFloat = 180<div class="se-preview-section-delimiter"></div>

設(shè)置旋轉(zhuǎn)的速度為每秒半圈就足夠了。在 GameScene 類中加入一個新屬性：

var playerSpin: CGFloat = 0<div class="se-preview-section-delimiter"></div>

在 checkShipCannonCollision() 中，在 if 語句中加入：

playerSpin = PlayerCollisionSpin<div class="se-preview-section-delimiter"></div>

Finally, add the following code to updatePlayer(), immediately before the line playerSprite.zRotation = playerAngle - 90 * DegreesToRadians:

然后，在 updatePlayer() 中，就在 playerSprite.zRotation = playerAngle - 90 * DegreesToRadians 一句之前加入：

if playerSpin > 0 {playerAngle += playerSpin * DegreesToRadianspreviousAngle = playerAngleplayerSpin -= PlayerCollisionSpin * CGFloat(dt)if playerSpin < 0 {playerSpin = 0} }

playerSpin 用于表示碰撞偏移過程中飛船偏移的角度，不計算速度的影響。偏移角度會隨時間遞減，因此飛船在一秒后停止偏移。在碰撞偏移過程中，我們修改 previousAngle 的值，使其和偏移角度匹配，這樣飛船才不會在偏移結(jié)束時突然轉(zhuǎn)到一個新的角度。

運行程序，查看飛船碰撞偏移的效果。

接下來做什么

這里是教程中使用到的完整示例項目。

一切都是三角形！通過三角函數(shù)我們處理移動、旋轉(zhuǎn)和碰撞偵測的問題，從而使我們的精靈具備了生命！

我們不得不承認，其實這些并不難學(xué)習(xí)。數(shù)學(xué)，如果將它用到有趣的事情上比如制作游戲是，就不會那么索然無味了！

但我們還有更多的內(nèi)容需要學(xué)習(xí)：在本教程的第二部分，你將在游戲中加入導(dǎo)彈，學(xué)習(xí)更多關(guān)于 sin 和 cos 的知識，學(xué)些更多在游戲中三角學(xué)的不同用途。

聲明：游戲中使用的圖片來自于 Kenney Vleugels，聲音來自于 freesound.org。

總結(jié)

以上是生活随笔為你收集整理的游戏中的三角学——Sprite Kit 和 Swift 教程（1）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。