[SceneKit專題]22-3D平衡球遊戲Marble-Maze

說明

本系列文章是對<3D Apple Games by Tutorials>一書的學習記錄和體會

此書對應的程式碼地址

SceneKit系列文章目錄

更多iOS相關知識檢視github上WeekWeekUpProject

11-Materials材質

建立專案

1. 開啟Xcode,建立一個新的iOS版SceneKit遊戲專案,命名為MarbleMaze.
2. 刪除art.scnassets資料夾.
3. 從resources資料夾中拖拽一個新的art.scnassets到專案中.
4. 我們只使用豎屏模式,所以取消Landscape Left和Landscape Right來禁用旋轉:

   

替換GameViewController.swift中的內容:

import UIKit
import SceneKit
class GameViewController: UIViewController {
  var scnView:SCNView!
  override func viewDidLoad() {
    super.viewDidLoad()
// 1
    setupScene()
    setupNodes()
    setupSounds()
}
// 2
  func setupScene() {
      scnView = self.view as! SCNView
      scnView.delegate = self
      scnView.allowsCameraControl = true
      scnView.showsStatistics = true
}
  func setupNodes() {
  }
  func setupSounds() {
  }
  override var shouldAutorotate : Bool { return false }
  override var prefersStatusBarHidden : Bool { return true }
}
// 3
extension GameViewController: SCNSceneRendererDelegate {
  func renderer(_ renderer: SCNSceneRenderer,
    updateAtTime time: TimeInterval) {
  }
}
複製程式碼

程式碼含義:

1. 在viewDidLoad()中呼叫這些空的方法;稍後會向其中新增程式碼.
2. 將self.view轉換為SCNView並儲存下來.並設定self為渲染迴圈的代理.
3. 實現SCNSceneRendererDelegate協議中的方法.

天空盒子,載入場景

在art.scnassets中找到空的game.scn場景檔案.開啟並選中預設的camera node,然後選中右上方的Scene Inspector.從右下方的媒體庫中找到img_skybox.jpg拖拽到場景的背景屬性上.:

在GameViewController類中新增下面屬性:

var scnScene:SCNScene!
複製程式碼

在setupScene()中新增下面程式碼:

// 1
scnScene = SCNScene(named: "art.scnassets/game.scn")
// 2
scnView.scene = scnScene
複製程式碼

執行一下,看看神聖的天空景象:

12-Reference Nodes引用節點

主角--小球

拖拽一個空的SceneKit場景檔案到你的專案,放到art.scnassets中,命名為obj_ball.scn:

選中art.scnassets/obj_ball.scn,展開場景樹,選中預設的攝像機節點.所有的新建場景都包含一個預設的攝像機節點,但作為引用節點被使用時就很不爽,所以我們刪除它:

下面開始建立木質小球.從物件庫中拖拽一個球體到場景中:

開啟節點檢查器.將小球命名為ball,放置位置為**(x:0, y:0, z:0)**:

現在的小球太大了.開啟屬性檢查器,更改半徑為0.45,提升分段數為36來讓它顯得更圓一些:

材質設定

漫反射設定

法線設定

高光設定

反射設定

發光設定

隨著各個貼圖的新增,效果漸變如下:

然後需要做的是將小球作為引用節點新增到場景中去. 選中art.scnassets/game.scn,然後拖拽art.scnassets/obj_ball.scn到場景中.設定位置為**(x:0, y:0, z:0)** 並命名為ball:

這樣,小球就作為一個引用節點被新增到場景中了.

執行一下:

挑戰--建立木箱,小石塊,大石塊,柱子的引用節點

這是一個小小的挑戰:

1. 為每個物件建立一個空的場景.
2. 刪除預設的攝像機. 試著建立下面的物件:

   

• obj_crate1x1:命名為crate並設定尺寸為 (x:1, y:1, z:1).使用img_crate_diffuse紋理作為漫反射貼圖,img_crate_normal作為法線貼圖.高光顏色設為中灰色;如果設為純白色,木箱會看起來像塑料的.
• obj_stone1x1:命名為stone並設定尺寸為 (x:1, y:1, z:1).使用img_stone_diffuse和img_stone_normal紋理作為貼圖,將法線intensity改為0.5. 設定高光色為White.
• obj_stone3x3:命名為stone並設定尺寸為 (x:3, y:3, z:3).紋理設定同上,高光仍為White.但是需要使用紋理縮放設定,及WrapT和WrapS來使其生效.
• obj_pillar1x3:命名為pillar並設定尺寸為 (x:1, y:3, z:1).使用img_pillar_ 紋理;還有高光紋理也要用上.還有應用縮放及wrap設定.

當設定3x3方塊時,可參照下面步驟:

設定過程中,會看到如下的依次變化:

最終完成版在12-Reference Nodes中的projects/ challenge/MarbleMaze/ 資料夾.

13-Shadows陰影

組織場景

選中art.scnassets/game.scn.組織一下場景樹如下:

建立一個空節點命名為follow_camera:

將camera節點放到follow_camera下,成為它的子節點,並設定位置為 (x:0, y:0, z:5),旋轉為 (x:0, y:0, z:0):

建立另一個空節點命名為follow_light:

新增幾個空節點作為佔位節點,設定位置為零;

• pearls:待收集的珍珠分組.
• section1, section2, section3, section4:這些分組用來盛放本關卡的不同章節.

建立最後一個空節點,命名為static_light:

燈光

首先是固定燈光 拖拽一個泛光燈和一個環境光到場景中,並按順序放置在static_lights組節點中:

選中omni light,開啟節點檢查器,命名為omni,位置,角度設為零:

開啟屬性檢查器,設定顏色為深灰色:

選中ambient light,開啟節點檢查器:

開啟屬性檢查器,設定顏色為深灰:

檢視一下場景中的小球:

接著新增跟隨燈光 拖拽一個聚光燈到場景中,放置在follow_light組節點下面:

選中聚光燈,開啟它的節點檢查器,設定位置如下:

這個燈光是follow_light的子節點, follow_light的位置是 (x:0, y:0, z:0),旋轉角度 (x:-25, y:-45, z:0);

然後選中聚光燈,開啟屬性檢查器,設定金黃色模擬環境中的陽光:

完成後的效果:

重用集合體

將遊戲中重複出現的結構做成重用集合體,方便在需要的時候直接呼叫. 此處我們製作的是休息點,它由一塊3x3的石塊和上面的4根柱子組成.

拖拽一個空的SceneKit場景檔案到專案的根目錄中,然後在彈出框中選擇art.scnassets,點選Create按鈕.

拖拽一個obj_stone3x3.scn的引用節點到空場景的,放置在**(x: 0, y: 0, z:0)**.

拖拽一個obj_pillar1x3.scn引用節點到時大石塊的頂部.設定位置在**(x: -1, y: 3, z: 1)**,即右上角位置.

使用⌥⌘ (Option +Command) +點選拖拽,複製三個柱子,位置如下:

• Top-Left. Positioned at (x: -1, y: 3, z: -1).
• Top-Right. Positioned at (x: 1, y: 3, z: -1).
• Bottom-Right. Positioned at (x: 1, y: 3, z: 1).

  

記得刪除場景中預設的攝像機.

選中game.scn,然後拖放新建立的set_restpoint.scn到場景下方.位置設為 (x: 0, y: -2, z: 0)

執行一下,會看到漂亮的陰影:

建立其它部件

現在還需要建立幾個其他的集合體,以便在主場景中直接引用. 比如straight_bridge,用了7個stone1x1組成:

zigzag_bridge,用了stone1x1和crate1x1方塊.共9格寬7格長.

然後就可以用這些來組成大場景:

從左下角開始,放置一個restpoint休息點在地平面下,(x:0, y:0, z:0) 處.然後將其他引用集合體拖拽到場景中. 注意將這些都放在section1下面,這是個遊戲切換場景的小技巧:通過更改visible標記就能控制整個場景的顯示與隱藏.

執行一下,移動攝像機看看,還可以旋轉視角,檢視更漂亮的美景:

14-Intermediate Collision Detection中級碰撞檢測

拖拽一個空的SceneKit檔案到專案中,命名為obj_pearl.scn,儲存到art.scnassets資料夾:

接著從物件庫中拖放一個球體節點到新場景中:

節點檢查器中命名改為pearl,位置,角度為零. 屬性檢查器中,設定半徑為0.2,分段數為16:

接下來開啟材料檢查器,設定漫反射顏色為黑色,高光為白色.反射貼圖使用img_skybox.jpg,但將強度降為0.75:

完成後的效果圖:

還需要新增遊戲工具類

從resources/ GameUtils/ 中拖拽GameUtils資料夾到專案中,如下圖,點選Finish:

位掩碼(包括分類掩碼,碰撞掩碼,接觸掩碼)

我們將採用如下的分類位掩碼設定:

開啟GameViewController.swift,在開頭新增分類碼:

let CollisionCategoryBall = 1
let CollisionCategoryStone = 2
let CollisionCategoryPillar = 4
let CollisionCategoryCrate = 8
let CollisionCategoryPearl = 16
複製程式碼

遊戲中,我們想讓小球與除了能量珍珠外的所有物體碰撞,所以需要定義碰撞掩碼,來決定和哪些物體碰撞:

Stone石頭, Pillar柱子, Crate木箱和Pearl能量珍珠和碰撞掩碼都是1,就是說它們能和分類掩碼為1的物體碰撞,也就是都能和小球碰撞.而小球的碰撞掩碼是14: CollisionMask = Stone + Pillar + Crate = 2 + 4 + 8 = 14

接觸掩碼決定了哪些物體碰撞時,代理方法會被呼叫.

我們只關心小球和能量珍珠,柱子及木箱的碰撞,所以: ContactMask = Pearl + Pillar + Crate = 16 + 8 + 4 = 28

在GameViewController.swift中,新增一個屬性:

var ballNode:SCNNode!
複製程式碼

新增下列程式碼到**setupNodes()**中:

ballNode = scnScene.rootNode.childNode(withName: "ball", recursively:
true)!
ballNode.physicsBody?.contactTestBitMask = CollisionCategoryPillar |
CollisionCategoryCrate | CollisionCategoryPearl
複製程式碼

啟用物理效果

選中obj_ball.scn,然後選中ball節點,開啟物理效果檢查器來將Physics Body型別設定為Dynamic:

確保重力影響是開啟的,不然小球可能會漂在空中:

設定Category mask為1,Collision mask為14:

Shape為Default shape,Type為Convex:

除了小球,其它物體都是不動的,是靜態物理形體.設定如下:

• obj_stone1x1.scn的Category mask為2, Collision mask為1;

  

• obj_stone3x3.scn: Category mask為2, Collision mask為1**.
• obj_pillar1x3.scn: Category mask為4,Collision mask為1.
• obj_crate1x1.scn: Category mask為8, Collision mask為1.
• obj_pearl.scn: Category mask為16, Collision mask為**-1**.

對能量珍珠Physics shape設為Default shape, Type為Convex:

其餘的Physics shape設為Default shape, Type為Bounding Box:

新增碰撞檢測處理

現在終於設定好了各個物體,要處理相互的碰撞了.在GameViewController.swift底部:

extension GameViewController : SCNPhysicsContactDelegate {
  func physicsWorld(_ world: SCNPhysicsWorld,
    didBegin contact: SCNPhysicsContact) {
    // 1
    var contactNode:SCNNode!
    if contact.nodeA.name == "ball" {
      contactNode = contact.nodeB
    } else {
      contactNode = contact.nodeA
    }
// 2
    if contactNode.physicsBody?.categoryBitMask ==
      CollisionCategoryPearl {
    contactNode.isHidden = true
      contactNode.runAction(
        SCNAction.waitForDurationThenRunBlock(
          duration: 30) { (node:SCNNode!) -> Void in
        node.isHidden = false
      })
}
// 3
    if contactNode.physicsBody?.categoryBitMask ==
      CollisionCategoryPillar ||
        contactNode.physicsBody?.categoryBitMask ==
          CollisionCategoryCrate {
} }
}
複製程式碼

程式碼含義:

1. 和前面一樣,用來判斷碰撞雙方哪一個是小球.
2. 如果碰撞到的是參量珍珠,則消失30秒,然後重新出現.
3. 判斷小球是碰撞到了柱子還是木箱,可以新增音效.

並在setupScene()底部新增成為代理:

scnScene.physicsWorld.contactDelegate = self
複製程式碼

還需要再新增一些小效果讓遊戲更生動. 開啟obj_ball.scn,選中ball,設定y軸位置為10讓小球出現時有個掉落效果:

執行一下,可以看到掉落下來:

選中游戲場景,然後拖拽obj_pearl.scn到場景中.放置在**(x: 0, y: 0, z: 0)處.放到pearls**組下面:

執行一下,小球掉落並吸收了能量珍珠:

還可以給場景中新增更多的能量珍珠,如下:

15-Motion Control運動控制

輔助類和音效

在前面我們已經新增了GameUtils類,現在還需要再新增一些東西以便使用它.

GameViewController中新增下面的屬性:

var game = GameHelper.sharedInstance
var motion = CoreMotionHelper()
var motionForce = SCNVector3(x:0 , y:0, z:0)
複製程式碼

再從resources拖放Sounds資料夾到專案中:

在setupSounds()中新增下面程式碼:

game.loadSound(name: "GameOver", fileNamed: "GameOver.wav")
game.loadSound(name: "Powerup", fileNamed: "Powerup.wav")
game.loadSound(name: "Reset", fileNamed: "Reset.wav")
game.loadSound(name: "Bump", fileNamed: "Bump.wav")
複製程式碼

節點繫結和狀態管理

在GameViewController類中新增下面的屬性:

var cameraNode:SCNNode!
複製程式碼

在setupNodes()的末尾,新增下列程式碼:

// 1
cameraNode = scnScene.rootNode.childNode(withName: "camera",
  recursively: true)!
// 2
let constraint = SCNLookAtConstraint(target: ballNode)
cameraNode.constraints = [constraint]
複製程式碼

程式碼含義:

1. 將遊戲場景中的camera繫結到cameraNode.
2. 給攝像機新增一個SCNLookAtConstraint約束,使其朝向ballNode.

當攝像機有SCNLookAtConstraint約束時,小球到處滾動,可能會導致攝像機向左或向右傾斜,所以我們需要在setupNodes()末尾開啟萬向節鎖:

constraint.isGimbalLockEnabled = true
複製程式碼

其它節點也需要同樣處理.在GameViewController類中新增下列屬性:

 var cameraFollowNode:SCNNode!
var lightFollowNode:SCNNode!
複製程式碼

在setupNodes()末尾新增下列程式碼:

// 1
cameraFollowNode = scnScene.rootNode.childNode(
  withName: "follow_camera", recursively: true)!
// 2
cameraNode.addChildNode(game.hudNode)
// 3
lightFollowNode = scnScene.rootNode.childNode(
  withName: "follow_light", recursively: true)!
複製程式碼

遊戲節點繫結完成,還需要處理遊戲的狀態.遊戲需要三種基本狀態:

• waitForTap:遊戲開始前的狀態
• playing:點選螢幕開始遊戲的狀態
• gameOver:能量用光或者掉落下平臺的狀態.

在GameViewController類中新增下列程式碼:

// 1
func playGame() {
  game.state = GameStateType.playing
  cameraFollowNode.eulerAngles.y = 0
  cameraFollowNode.position = SCNVector3Zero
}
// 2
func resetGame() {
  game.state = GameStateType.tapToPlay
  game.playSound(node: ballNode, name: "Reset")
  ballNode.physicsBody!.velocity = SCNVector3Zero
  ballNode.position = SCNVector3(x:0, y:10, z:0)
  cameraFollowNode.position = ballNode.position
  lightFollowNode.position = ballNode.position
  scnView.isPlaying = true
  game.reset()
}
// 3
func testForGameOver() {
  if ballNode.presentation.position.y < -5 {
    game.state = GameStateType.gameOver
    game.playSound(node: ballNode, name: "GameOver")
    ballNode.run(SCNAction.waitForDurationThenRunBlock(
      duration: 5) { (node:SCNNode!) -> Void in
        self.resetGame()
      })
} }
複製程式碼

程式碼含義:

1. 切換到.playing狀態,開始遊戲.以及基本的清理和重置.
2. 切換到.waitForTap狀態,播放音效,以及各種清理和重置工作.
3. 檢查小球的位置,y值小於-5,則切換到.gameOver狀態,播放音效.5秒後自動呼叫resetGame(),並切換到.waitForTap狀態.

還要在viewDidLoad()末尾新增呼叫:

resetGame()
複製程式碼

遊戲開始時,玩家需要點選螢幕.因此在GameViewController類中,新增下面的觸控程式碼:

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?)
{
  if game.state == GameStateType.tapToPlay {
playGame() }
}
複製程式碼

在GameViewController類中,新增下面的程式碼:

func updateMotionControl() {
  // 1
  if game.state == GameStateType.playing {
    motion.getAccelerometerData(interval: 0.1) { (x,y,z) in
     self.motionForce = SCNVector3(x: Float(x) * 0.05, y:0,
       z: Float(y+0.8) * -0.05)
    }
// 2
    ballNode.physicsBody!.velocity += motionForce
  }
}
複製程式碼

程式碼含義:

1. 根據當前的運動資料更新motionForce向量.
2. 將motionForce向量賦值給小球的velocity.

還需要在renderer(_, updateAtTime)方法中呼叫updateMotionControl()方法:

updateMotionControl()
複製程式碼

執行遊戲,看到小球從空中落下,點選螢幕開始遊戲:

小球身上的發光效果實際就是生命值,小球的發光強度將隨著時間不斷減弱直到降為0.0.如果收集到一個能量珍珠,則生命值恢復到1.0.我們需要一個方法來補充生命值.在GameViewController類中,新增下面的程式碼:

func replenishLife() {
  // 1
  let material = ballNode.geometry!.firstMaterial!
  // 2
  SCNTransaction.begin()
  SCNTransaction.animationDuration = 1.0
// 3
  material.emission.intensity = 1.0
// 4
  SCNTransaction.commit()
  // 5
  game.score += 1
  game.playSound(node: ballNode, name: "Powerup")
}
複製程式碼

1. 要獲取發光貼圖,就需要先獲取ballNode的firstMaterial.
2. 通過SCNTransaction.begin() 來開始動畫.此處我們設定時長為1秒animationDuration = 1.0.
3. 設定發光強度為1.0.
4. 提交動畫事務.提交後SceneKit將開始執行動畫,將發光強度從當前值改為1.0
5. 增加分數,播放音效.

該方法需要在剛變成.playing狀態時呼叫.在playGame()方法的末尾呼叫:

  replenishLife()
複製程式碼

有了恢復生命值的方法,還需要逐漸減少的方法.在GameViewController類中,新增下面的程式碼:

func diminishLife() {
  // 1
  let material = ballNode.geometry!.firstMaterial!
  // 2
  if material.emission.intensity > 0 {
    material.emission.intensity -= 0.001
  } else {
    resetGame()
  }
}
複製程式碼

我們需要在每次檢查.gameOver狀態時呼叫這個方法.

攝像機和燈光

在GameViewController類中,新增下面的程式碼:

func updateCameraAndLights() {
  // 1
  let lerpX = (ballNode.presentation.position.x -
    cameraFollowNode.position.x) * 0.01
  let lerpY = (ballNode.presentation.position.y -
    cameraFollowNode.position.y) * 0.01
  let lerpZ = (ballNode.presentation.position.z -
    cameraFollowNode.position.z) * 0.01
  cameraFollowNode.position.x += lerpX
  cameraFollowNode.position.y += lerpY
  cameraFollowNode.position.z += lerpZ
  // 2
  lightFollowNode.position = cameraFollowNode.position
// 3
  if game.state == GameStateType.tapToPlay {
      cameraFollowNode.eulerAngles.y += 0.005
  }
}
複製程式碼

程式碼含義:

1. 用線性插值法計算要移動的位置.創造出一種特殊的減速移動效果.
2. 將lightFollowNode節點跟隨攝像機節點.
3. 當進入.tapToPlay狀態時,將攝像機抬起一些.

這個函式需要在renderer(_, updateAtTime)的末尾呼叫,這樣才能在每幀都能實時更新攝像機和燈光:

updateCameraAndLights()
複製程式碼

執行一下,如下:

點選螢幕,開始遊戲:

遊戲已經基本完成,還需要處理一下HUD的顯示問題,以及生命值耗盡的問題.

在GameViewController類中,新增下面的程式碼:

func updateHUD() {
  switch game.state {
  case .playing:
    game.updateHUD()
  case .gameOver:
    game.updateHUD(s: "-GAME OVER-")
  case .tapToPlay:
    game.updateHUD(s: "-TAP TO PLAY-")
  }
}
複製程式碼

在renderer(_, updateAtTime)方法的末尾,新增呼叫:

updateHUD()
複製程式碼

現在生命值耗盡,遊戲也不會結束,只有掉落下去才會死.我們需要處理耗盡問題.在renderer(_, updateAtTime)方法的末尾,新增程式碼:

if game.state == GameStateType.playing {
  testForGameOver()
  diminishLife()
}
複製程式碼

還需要處理小球與能量珍珠碰撞時,珍珠消失但小球的生命值沒有增加的問題.只需要在physicsWorld(_, didBeginContact)裡處理與珍珠的碰撞程式碼塊中,呼叫replenishLife()就行了:

replenishLife()
複製程式碼

新增碰撞音效,在physicsWorld(_, didBeginContact)裡處理與柱子/木箱的碰撞程式碼塊中,呼叫播放音效就行了:

game.playSound(node: ballNode, name: "Bump")
複製程式碼

最後一步,移除setupScene()中的除錯程式碼:

 //scnView.allowsCameraControl = true
 //scnView.showsStatistics = true
複製程式碼

最終的完成版程式碼,在15-Motion Control中的projects/final/ MarbleMaze/ 資料夾下.