版本記錄

前言

SceneKit使用高級場景描述創(chuàng)建3D游戲并將3D內(nèi)容添加到應(yīng)用程序删性。 輕松添加動畫沃疮，物理模擬葫辐，粒子效果和逼真的基于物理性的渲染。接下來這幾篇我們就詳細的解析一下這個框架汗贫。感興趣的看下面幾篇文章身坐。
1. SceneKit框架詳細解析（一） —— 基本概覽（一）
2. SceneKit框架詳細解析（二） —— 基于SceneKit的簡單游戲示例的實現(xiàn)（一）

開始

在這部分中，您將開始制作游戲落包，順路學(xué)習(xí)Scene Kit節(jié)點部蛇。

我們再回來吧！

在上一個教程中咐蝇，您了解到SceneKit將游戲組件組織為一個稱為scene graph的層次結(jié)構(gòu)涯鲁。

游戲的每個元素 - 例如燈光，照相機嘹害，幾何體和粒子發(fā)射器 - 都稱為節(jié)點nodes撮竿，節(jié)點存儲在這種樹狀結(jié)構(gòu)中。

為了說明這是如何工作的笔呀，回想一下你可能聽過的童年童謠......

?? The hip bone’s connected to the back bone ?? The back bone’s connected to the shoulder bone… ??

你是對的！ 這是經(jīng)典歌曲Dem Dry Bones髓需。 如果你知道一個特別好用這個概念的經(jīng)典視頻游戲许师，那么獎勵積分。

考慮到這些歌詞僚匆，請看一下罕見的四指骨架的以下解剖學(xué)上正確的結(jié)構(gòu)：

為了幫助說明如何從此骨架構(gòu)建基于節(jié)點的層次結(jié)構(gòu)微渠，請將骨架中的每個骨骼視為節(jié)點node。

正如歌曲指出的那樣咧擂，肩骨與背骨相連松申。因此桌肴，將后骨骼視為肩骨的父節(jié)點，將肩骨骨骼視為后骨骼的子節(jié)點。

要將肩骨添加到場景中拳魁，請將其添加為后骨骼的子項。您可以繼續(xù)以這種方式構(gòu)建整個手臂卦尊，將子骨骼添加到父骨骼裙椭。

要定位骨骼，請相對于其父骨骼定位骨骼正驻。例如迈倍，要揮動骨架的左臂焕梅，只需按照小藍箭頭的指示來回旋轉(zhuǎn)肩節(jié)點即可蜗字。肩節(jié)點的所有子節(jié)點將與其父節(jié)點一起旋轉(zhuǎn)脂新。

恭喜挪捕！你剛剛通過骨骼解剖學(xué)！

從技術(shù)角度來看争便，單個節(jié)點由SCNNode類表示级零，并表示相對于其父節(jié)點在3D空間中的位置。節(jié)點本身沒有可見內(nèi)容滞乙，因此奏纪，當作為場景的一部分呈現(xiàn)時，它是不可見的斩启。要創(chuàng)建可見內(nèi)容序调，您必須向節(jié)點添加其他組件，如燈光兔簇，相機或幾何圖形（如骨骼）发绢。

場景圖(scene graph)包含一個特殊節(jié)點，它構(gòu)成了基于節(jié)點的層次結(jié)構(gòu)的基礎(chǔ)：根節(jié)點垄琐。要構(gòu)建場景边酒，可以將節(jié)點添加為根節(jié)點的子節(jié)點，也可以添加為根節(jié)點后代之一的子節(jié)點狸窘。

在本教程中墩朦，您將開始使用SceneKit中的一些簡單節(jié)點，例如相機和幾何節(jié)點翻擒。在本教程結(jié)束時介杆，您將在屏幕上呈現(xiàn)一個簡單的3D立方體！

Asset Catalogs

一旦你成為一名成功且富有經(jīng)驗的3D游戲設(shè)計師韭寸，你將有足夠的資金聘請你自己的圖形藝術(shù)家和音響工程師，這將讓你自由地專注于游戲代碼荆隘。SceneKit asset catalog專門設(shè)計用于幫助您與代碼分開管理游戲資產(chǎn)恩伺。

通過資產(chǎn)目錄，您可以在單個文件夾中管理游戲資產(chǎn)椰拒。 要使用它晶渠，只需將帶有.scnassets擴展名的文件夾添加到項目中凰荚，并將所有游戲資源保存在該文件夾中。 Xcode會在構(gòu)建時將目錄中的所有內(nèi)容復(fù)制到您的應(yīng)用包中褒脯。 Xcode保留您的資產(chǎn)文件夾層次結(jié)構(gòu)便瑟；這使您可以完全控制文件夾結(jié)構(gòu)。

通過與您的藝術(shù)家共享您的資產(chǎn)文件夾番川，他們可以快速解決任何問題到涂，例如一個不那么可怕的跨眼怪物，并為下一次構(gòu)建做好準備颁督，而無需將更改的資產(chǎn)復(fù)制回項目践啄。

1. Adding an Asset Catalog - 添加資產(chǎn)目錄

現(xiàn)在您已了解資產(chǎn)目錄的全部內(nèi)容，您將向Geometry Fighter添加一個沉御。

將GeometryFighter.scnassets文件夾從resources文件夾拖放到Xcode中的游戲項目中屿讽。 在出現(xiàn)的彈出窗口中，確保選中Copy items if needed吠裆，Create Groups和GeometryFighter目標伐谈，然后單擊Finish。

在項目導(dǎo)航器中選擇GeometryFighter.scnassets文件夾试疙。 請注意右側(cè)面板中資產(chǎn)目錄的其他獨有設(shè)置诵棵。 展開GeometryFighter.scnassets文件夾和子文件夾以查看有關(guān)資產(chǎn)的更多詳細信息：

資產(chǎn)目錄中有兩個文件夾：

• Sounds：包含游戲所需的所有聲音資源。
• Textures：包含您需要的所有圖像效斑。

隨意偷看每個文件夾里面的內(nèi)容非春。

2. Adding a Launch Screen - 添加啟動屏幕

現(xiàn)在您已導(dǎo)入資產(chǎn)目錄，您將負責(zé)一些基本的內(nèi)部處理步驟缓屠，包括在啟動屏幕上添加適當?shù)膱D像奇昙。

首先，單擊項目導(dǎo)航器中的Assets.xcassets敌完。 將GeometryFighter.scnassets / Textures / Logo_Diffuse.png拖放到AppIcon下面的資源中储耐。

接下來，單擊項目導(dǎo)航器中的LaunchScreen.storyboard滨溉。 選擇主視圖并將Background屬性設(shè)置為深藍色：

接下來什湘，將Logo_Diffuse圖像從Media Library拖動到視圖的中心。 將新圖像的Content Mode屬性設(shè)置為Aspect Fit：

你的啟動屏幕差不多完成了晦攒。 您需要做的就是添加一些約束闽撤，以便啟動圖像適用于所有設(shè)備。 單擊底部的Pin按鈕脯颜，切換所有四條邊的約束哟旗，然后單擊Add 4 Constraints，如下所示：

您已完成設(shè)置啟動屏幕！ 構(gòu)建并運行您的應(yīng)用程序; 你會看到你閃亮的新發(fā)布屏幕出現(xiàn)：

3. Adding a Background Image - 添加背景圖像

一旦你的啟動畫面消失闸餐，你就會被轉(zhuǎn)回空白的屏幕饱亮。 是時候添加一個漂亮干凈的背景，這樣你就不會覺得自己正盯著一個黑洞舍沙。

為此近上，請將以下代碼行添加到GameViewController.swift中setupScene（）的底部：

scnScene.background.contents = "GeometryFighter.scnassets/Textures/Background_Diffuse.png"

此行代碼指示場景從資產(chǎn)目錄中加載Background_Diffuse.png圖像，并將其用作場景背景的材質(zhì)屬性拂铡。

構(gòu)建并運行壹无；你現(xiàn)在應(yīng)該在游戲開始時看到藍色背景圖像：

您已完成項目的所有基本內(nèi)部處理任務(wù)。 你的游戲現(xiàn)在有一個華麗的應(yīng)用程序圖標和媳，一個啟動畫面和漂亮的背景格遭，它們都準備好顯示你將要添加到場景中的節(jié)點。

The SceneKit Coordinate System - SceneKit坐標系

在開始向場景添加節(jié)點之前留瞳，首先需要了解SceneKit的坐標系如何工作拒迅，以便將節(jié)點定位在所需位置。

在諸如UIKit或SpriteKit的2D系統(tǒng)中她倘，您使用一個點來描述x和y軸上的視圖或sprite的位置璧微。 要在3D空間中放置對象，還需要描述對象在z軸上的位置深度硬梁。
請考慮以下簡單說明：

SceneKit使用這個三軸系統(tǒng)來表示3D空間中的位置前硫。 紅色塊沿x軸放置，綠色塊沿y軸放置荧止，藍色塊沿z軸放置屹电。 軸正中心的灰色立方體表示原點，坐標為（x：0跃巡，y：0危号，z：0）。

SceneKit使用SCNVector3數(shù)據(jù)類型將三維坐標表示為三分量向量素邪。 以下是在代碼中創(chuàng)建向量的方法：

let position = SCNVector3(x: 0, y: 5, z: 10)

這將使用向量（x：0外莲，y：5，z：10）聲明position位置兔朦。 您可以輕松訪問矢量的各個屬性偷线，如下所示：

let x = position.x
let y = position.y
let z = position.z

如果您之前使用過CGPoint，則可以輕松地在它與SCNVector3之間進行比較沽甥。

注意：添加到場景中的節(jié)點的默認位置為（x：0声邦，y：0，z：0）摆舟，它始終相對于父節(jié)點翔忽。 要將節(jié)點放置在所需位置英融，您需要調(diào)整節(jié)點相對于其父節(jié)點的位置（本地坐標） - 而不是原點（世界坐標）。

Cameras - 相機

既然您已經(jīng)了解了如何在SceneKit中定位節(jié)點歇式，那么您可能想知道如何在屏幕上實際顯示某些內(nèi)容。 回想一下本教程系列第1部分中電影集的類比胡野。 要拍攝場景材失，您需要放置一個觀察場景的攝像機，并且從攝像機的角度來看該場景的結(jié)果圖像硫豆。

SceneKit以類似的方式工作龙巨；包含攝像機的節(jié)點的位置決定了您從中查看場景的視點。

下圖演示了攝像機在SceneKit中的工作原理：

上圖中有幾個關(guān)鍵點：

• 1） 攝像機的視線方向始終沿著包含攝像機的節(jié)點的負z軸熊响。
• 1） 視野（ field of view）是相機可視區(qū)域的限制角度旨别。 緊密的角度提供了狹窄的視野，而廣角提供了寬闊的視野汗茄。
• 1） 視錐體(viewing frustum)確定了相機的可見深度秸弛。 此區(qū)域外的任何東西 - 即距離相機太近或太遠 - 都將被剪裁，不會出現(xiàn)在屏幕上洪碳。

SceneKit攝像機由SCNCamera表示递览，其xPov和yPov屬性可讓您調(diào)整視野，而zNear和zFar可讓您調(diào)整視錐體瞳腌。

要記住的一個關(guān)鍵點是攝像機本身不會做任何事情绞铃，除非它是節(jié)點層次結(jié)構(gòu)的一部分。

1. Adding a Camera - 添加相機

是時候嘗試一下了嫂侍。 打開GameViewController.swift并在scnScene下面添加以下屬性：

var cameraNode: SCNNode!

接下來儿捧，在setupScene（）下面添加以下方法：

func setupCamera() {
  // 1
  cameraNode = SCNNode()
  // 2
  cameraNode.camera = SCNCamera()
  // 3
  cameraNode.position = SCNVector3(x: 0, y: 0, z: 10)
  // 4
  scnScene.rootNode.addChildNode(cameraNode)
}

仔細看看代碼：

• 1） 首先，創(chuàng)建一個空的SCNNode并將其分配給cameraNode挑宠。
• 2） 接下來菲盾，您將創(chuàng)建一個新的SCNCamera對象并將其分配給cameraNode的camera屬性。
• 3） 然后痹栖，將攝像機的位置設(shè)置為（x：0亿汞，y：0，z：10）揪阿。
• 4） 最后疗我，將cameraNode添加到場景中，作為場景根節(jié)點的子節(jié)點南捂。

通過調(diào)用viewDidLoad（）中剛剛添加的方法來完成任務(wù)吴裤，就在setupScene（）下面：

setupCamera()

沒有必要構(gòu)建和運行。 即使你剛剛在場景中添加了一個攝像頭溺健，仍然沒有什么可看的麦牺，這意味著你不會看到任何不同的東西。 但那即將改變！

Geometry - 幾何

要創(chuàng)建可見內(nèi)容剖膳，您需要將幾何對象添加到節(jié)點魏颓。 幾何對象表示三維形狀，并且由稱為定義多邊形polygons的vertices的許多點創(chuàng)建吱晒。

此外甸饱，幾何對象可以包含修改幾何體表面外觀的材質(zhì)對象。 通過材質(zhì)仑濒，您可以指定幾何體表面的顏色和紋理等信息叹话，以及幾何體應(yīng)如何響應(yīng)光線以及其他視覺效果。 頂點和材質(zhì)的集合稱為模型或網(wǎng)格（model 或者 mesh）墩瞳。

SceneKit包含以下內(nèi)置幾何形狀：

在前排驼壶，從左側(cè)開始，您有一個圓錐喉酌，一個圓環(huán)热凹，一個膠囊和一個管子。 在后排瞭吃，從左側(cè)開始碌嘀，你有一個金字塔，一個盒子歪架，一個球體和一個圓柱體股冗。

1. Adding ShapeTypes - 添加ShapeTypes

在開始向場景添加幾何形狀之前，請創(chuàng)建一個新的Swift文件和蚪，以定義您將在游戲中使用的不同形狀的ShapeType枚舉止状。

右鍵單擊GeometryFighter組并選擇New File ....選擇iOS / Source / Swift File文件模板，然后單擊Next：

將文件命名為ShapeType.swift攒霹，確保它包含在項目中怯疤，然后單擊Create。

創(chuàng)建文件后催束，打開ShapeType.swift并使用以下內(nèi)容替換其內(nèi)容：

import Foundation

// 1
enum ShapeType:Int {

  case box = 0
  case sphere
  case pyramid
  case torus
  case capsule
  case cylinder
  case cone  case tube

  // 2
  static func random() -> ShapeType {
    let maxValue = tube.rawValue
    let rand = arc4random_uniform(UInt32(maxValue+1))
    return ShapeType(rawValue: Int(rand))!
  }
}

上面的代碼相對簡單：

• 1） 您創(chuàng)建一個名為ShapeType的新枚舉集峦，枚舉各種形狀。
• 2） 您還定義了一個名為random（）的靜態(tài)方法抠刺，該方法生成隨機ShapeType塔淤。 此功能將在您的游戲中稍后派上用場。

2. Adding a Geometry Node - 添加幾何節(jié)點

您的下一個任務(wù)是創(chuàng)建一個方法速妖，該方法生成ShapeType中定義的各種隨機形狀高蜂。

將以下方法添加到GameViewController.swift，就在setupCamera（）下面：

func spawnShape() {
  // 1
  var geometry:SCNGeometry
  // 2
  switch ShapeType.random() {
  default:
    // 3
    geometry = SCNBox(width: 1.0, height: 1.0, length: 1.0,
      chamferRadius: 0.0)
  }  
  // 4
  let geometryNode = SCNNode(geometry: geometry)
  // 5
  scnScene.rootNode.addChildNode(geometryNode)
}

依次記錄每個編號的評論：

• 1） 首先罕容，創(chuàng)建占位符geometry變量以供稍后使用备恤。
• 2） 接下來稿饰，定義一個switch語句來處理ShapeType.random（）返回的形狀。 目前它還不完整露泊，只創(chuàng)造了一個盒子形狀喉镰；在本教程結(jié)束時，您將在挑戰(zhàn)中添加更多內(nèi)容滤淳。
• 3） 然后梧喷，創(chuàng)建一個SCNBox對象并將其存儲在geometry中。 您可以指定寬度脖咐，高度和長度以及倒角半徑（這是一種說明圓角的奇特方式）。
• 4） 在這里汇歹，您將創(chuàng)建名為geometryNode的SCNNode實例屁擅。 這次，您使用SCNNode初始化程序产弹，它使用geometry參數(shù)來創(chuàng)建節(jié)點并自動附加提供的幾何體派歌。
• 5） 最后，將節(jié)點添加為場景根節(jié)點的子節(jié)點痰哨。

現(xiàn)在你需要調(diào)用這個方法胶果。 將以下行添加到setupCamera（）下面的viewDidLoad（）：

spawnShape()

構(gòu)建并運行；你會看到屏幕上顯示一個白色方塊：

這里有幾點需要注意：

• 1） box節(jié)點是spawnShape（）的默認形狀斤斧，它位于場景中的（x：0早抠，y：0，z：0）撬讽。
• 2） 您正在通過cameraNode查看場景蕊连。 由于攝像機節(jié)點位于（x：0，y：0：z：10）游昼，因此該box位于攝像機可視區(qū)域的中心甘苍。

好吧，這不是很令人興奮烘豌，而且它幾乎不是三維的 - 但不要害怕......下一部分會改變所有這些载庭！

Built-in View Features - 內(nèi)置視圖功能

SCNView具有一些開箱即用的功能，可幫助您輕松生活廊佩。

將以下行添加到GameViewController.swift中的setupView（）囚聚，就在當前實現(xiàn)的下方：

// 1
scnView.showsStatistics = true
// 2
scnView.allowsCameraControl = true
// 3
scnView.autoenablesDefaultLighting = true

以下是對上述代碼的解釋：

• 1） showStatistics在場景底部啟用實時統(tǒng)計面板。
• 2） allowsCameraControl允許您通過簡單的手勢手動控制活動相機罐寨。
• 3） autoenablesDefaultLighting在場景中創(chuàng)建一個通用的全向燈靡挥，因此您不必擔(dān)心添加自己的光源。

構(gòu)建并運行鸯绿；這次事情應(yīng)該看起來更令人興奮跋破！

您可以使用以下手勢來控制場景中的活動相機：

• Single finger swipe - 單指滑動：圍繞場景內(nèi)容旋轉(zhuǎn)活動攝像機簸淀。
• Two finger swipe - 雙指滑動：在場景中向左，向右毒返，向上或向下移動或平移相機租幕。
• 雙指捏 - Two finger pinch：將相機放入和移出場景。
• 雙擊 - Double-tap：如果您有多個攝像頭拧簸，則會在場景中的攝像頭之間切換劲绪。 當然，由于場景中只有一臺攝像機盆赤，因此不會這樣做贾富。 但是，它還具有將相機重置為其原始位置和設(shè)置的效果牺六。

1. Working with Scene Statistics - 使用場景統(tǒng)計

找到屏幕底部的統(tǒng)計信息面板：

以下是每個元素含義的快速細分：

• fps：代表每秒幀數(shù)颤枪。這是在一秒內(nèi)完成的連續(xù)幀重繪總量的測量。這個數(shù)量越低淑际，你的游戲表現(xiàn)就越差畏纲。您通常希望您的游戲以60fps的速度運行，這將使您的游戲看起來更加流暢春缕。
• ◆：代表每幀的總繪圖調(diào)用盗胀。這通常是每個幀繪制的可見對象的總量。影響對象的燈光也會增加對象的繪制調(diào)用量锄贼。這個數(shù)量越低越好票灰。
• ▲：代表每幀的總多邊形。這是用于為所有可見幾何體繪制單個幀的多邊形總數(shù)咱娶。這個數(shù)量越低越好米间。
• ?：代表全部可見光源。這是當前影響可見對象的光源總量膘侮。 SceneKit指南建議一次不要使用3個以上的光源屈糊。

單擊+按鈕展開面板并顯示更多詳細信息：

此面板為您提供以下信息：

• Frame time - 幀時間：這是繪制單幀所花費的總時間。 需要16.7ms的幀時間來實現(xiàn)60fps的幀速率琼了。
• The color chart: - 顏色圖表：這為您提供了SceneKit渲染管道中每個組件的粗略幀時間百分比細分逻锐。

從這個例子中，您現(xiàn)在知道繪制一個幀的時間為22.3ms雕薪，其中±75％用于渲染昧诱，±25％用于GL Flush。

注意：稍后將更詳細地討論SceneKit渲染管道所袁。

您可以單擊-按鈕以再次最小化面板盏档。

所有這些功能都是內(nèi)置是不是很好？

Challenges - 挑戰(zhàn)

對您來說燥爷，練習(xí)您自己學(xué)到的知識非常重要蜈亩，本系列的許多部分都有一個或多個與之相關(guān)的挑戰(zhàn)懦窘。

我強烈建議嘗試所有的挑戰(zhàn)。雖然按照分步教程進行稚配，但您可以通過自己解決問題來學(xué)習(xí)更多知識畅涂。

1. Your First Challenge - 你的第一個挑戰(zhàn)

本教程中只有一個挑戰(zhàn)，但它很有趣道川。

您的挑戰(zhàn)是改進spawnShape（）中的switch語句以處理枚舉器中的其余形狀午衰。

使用Apple的官方SceneKit文檔（http://apple.co/2aDBgtH）作為各種幾何形狀的指南。另外冒萄，看一下ShapeType枚舉臊岸，看看要創(chuàng)建哪些形狀；他們的名字應(yīng)該讓你知道從哪里開始尊流。

不要過分擔(dān)心使用的尺寸扇单；試著讓它們與你之前制作的盒子大小相同。

在這次挑戰(zhàn)之后奠旺，您將牢牢掌握SceneKit中的一些最基本的概念！

后記

本篇主要講述了基于SceneKit的簡單游戲示例的實現(xiàn)施流，感興趣的給個贊或者關(guān)注~~~