文章選自掘金蘋果API搬運(yùn)工的文章[SceneKit專題]24-體素風(fēng)格過馬路游戲Mr. Pig
主要記錄自己在學(xué)習(xí)ARKit的過程中看到的好的文章晤锥,避免到時候鏈接失效無法找到原文的情況讼撒,非常感謝原博主的辛勤付出轧坎,也在此分享出來跟大家一起學(xué)習(xí)。
效果如下:
項目中用到的模型是用MagicaVoxel創(chuàng)建的,可以到ephtracy.github.io上去免費(fèi)下載.使用教程參見本系列其他文章.
創(chuàng)建項目
創(chuàng)建項目,選擇iOS > Application > Single View Application模板.
更改設(shè)置,只保留豎直方向:
添加資源文件: 拖拽resources/GameUtils/文件夾到項目中,選擇Group:
拖拽resources/MrPig.scnassets文件夾到項目中,選擇Create folder references:
完成后的效果:
添加應(yīng)用圖標(biāo)和啟動屏幕 在resources文件夾下找到LaunchScreen和AppIcon文件夾,拖拽到對應(yīng)地方去:
給啟動屏幕添加圖片約束:
打開ViewController.swift,按下面作些修改:
// 1
import UIKit
import SceneKit
import SpriteKit
// 2
class ViewController: UIViewController {
// 3
let game = GameHelper.sharedInstance
override func viewDidLoad() {
super.viewDidLoad()
// 4
setupScenes()
setupNodes()
setupActions()
setupTraffic()
setupGestures()
setupSounds()
// 5
game.state = .tapToPlay
}
func setupScenes() {
}
func setupNodes() {
}
func setupActions() {
}
func setupTraffic() {
}
func setupGestures() {
}
func setupSounds() {
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
override var prefersStatusBarHidden : Bool { return true }
override var shouldAutorotate : Bool { return false }
}
內(nèi)容簡單不做過多說明,導(dǎo)入SpriteKit是為了使用轉(zhuǎn)場功能.
繼續(xù)創(chuàng)建SceneKit View: 在ViewController的最上方添加:
var scnView: SCNView!
在setupScenes()中添加:
scnView = SCNView(frame: self.view.frame)
self.view.addSubview(scnView)
創(chuàng)建多場景
拖拽一個SceneKit Scene File到項目根目錄中,將其命名為GameScene.scn,放在MrPig.scnassets文件夾下:
選中MrPig.scnassets/GameScene.scn的同時,拖拽一個Floor Node到場景中,并選擇Node Inspector節(jié)點檢查器,將其命名為Grass,位置和旋轉(zhuǎn)角度設(shè)為0:
再設(shè)置屬性檢查器,將反射Floor Reflectivity設(shè)為0,因為草地并不需要反光:
移動到材質(zhì)檢查器,設(shè)置Material Diffuse貼圖,縮放設(shè)為12.5:
創(chuàng)建啟動閃屏
再拖拽一個SceneKit Scene File到項目根目錄中,將其命名為SplashScene.scn,放在MrPig.scnassets文件夾下:
選中MrPig.scnassets/SplashScene.scn的同時,從右下角的材質(zhì)庫中拖拽一個MrPig引用節(jié)點到場景中,打開其節(jié)點檢查器,將位置和旋轉(zhuǎn)設(shè)置為零:
接著打開場景檢查器,添加漸變背景Gradient_Diffuse.png到Scene Background屬性:
為了讓背景更好看,設(shè)置出太陽般的放射光暈效果,需要拖拽一個Plane節(jié)點到場景中,命名為Rays,設(shè)置位置 (x:0, y:0.25, z:-1),可見度Visibility Opacity為0.25:
打開屬性檢查器,設(shè)置Size為 (x:5, y:5),并設(shè)置圓角半徑Corner Radius為2.5:
打開材質(zhì)檢查器Materials Inspector,將Lighting model設(shè)置為Constant,以避免光照對射線產(chǎn)生影響.
滾動到Settings區(qū)域并將Blend Mode混合模式設(shè)置為Subtract減弱:
設(shè)置攝像機(jī)和燈光
點擊場景樹下方的+
號,添加一個空節(jié)點.命名為Camera,并將原始的攝像機(jī)節(jié)點移動過來作為子節(jié)點.選中Camera節(jié)點,打開節(jié)點檢查器,設(shè)置位置為(x:0, y:0.3, z:0)旋轉(zhuǎn)歐拉角為(x:-10, y:0, z:0).
選中內(nèi)層的camera節(jié)點,設(shè)置位置為(x:0, y:0, z:3)歐拉角為(x:0, y:0, z:0).
再添加一個空節(jié)點到根目錄中,命名為Lights,拖拽一個Ambient和一個Omni燈光到場景中:
修改omni燈光的位置,進(jìn)入節(jié)點檢查器,位置改為(x:5, y:5, z:5).
添加logo和點擊開始節(jié)點
- The Logo node:使用Plane類型節(jié)點,MrPigLogo_Diffuse.png貼圖,設(shè)置尺寸為width:1, height:0.5,位置設(shè)置為 (x:0, y:1, z:0.5),注意不要受到燈光的影響,做法參考Rays節(jié)點.
- The TapToPlay node:使用Plane類型節(jié)點,TapToPlay_Diffuse.png貼圖,設(shè)置尺寸為width:1, height:0.25,位置設(shè)置為 (x:0, y:-0.3, z:0.5),注意不要受到燈光的影響,做法參考Rays節(jié)點.
加載并展示閃屏界面
在ViewController中添加屬性:
var gameScene: SCNScene!
var splashScene: SCNScene!
在setupScenes() 中添加下列代碼:
// 1
gameScene = SCNScene(named: "/MrPig.scnassets/GameScene.scn")
splashScene = SCNScene(named: "/MrPig.scnassets/SplashScene.scn")
// 2
scnView.scene = splashScene
運(yùn)行一下,效果如下:
轉(zhuǎn)場
不同效果的轉(zhuǎn)場動畫前面已經(jīng)介紹過了. 在ViewController類中添加下面的代碼:
func startGame() {
// 1
splashScene.isPaused = true
// 2
let transition = SKTransition.doorsOpenVertical(withDuration: 1.0)
// 3
scnView.present(gameScene, with: transition, incomingPointOfView: nil, completionHandler: {
// 4
self.game.state = .playing
self.setupSounds()
self.gameScene.isPaused = false
})
}
繼續(xù)添加停止游戲和開啟閃屏的方法:
func stopGame() {
game.state = .gameOver
game.reset()
}
func startSplash() {
// 1
gameScene.isPaused = true
// 2
let transition = SKTransition.doorsOpenVertical(withDuration: 1.0)
scnView.present(splashScene, with: transition, incomingPointOfView:
nil, completionHandler: {
self.game.state = .tapToPlay
self.setupSounds()
self.splashScene.isPaused = false
})
}
最后需要添加的方法是點擊開始:
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?)
{
if game.state == .tapToPlay {
startGame()
}
}
運(yùn)行后,點擊屏幕開始游戲了.
添加主角
選中MrPig.scnassets/ GameScene.scn,拖拽一個MrPig引用節(jié)點到場景中,位置和旋轉(zhuǎn)設(shè)置為0:
在setupNodes()
中添加代碼:
pigNode = gameScene.rootNode.childNode(withName: "MrPig", recursively:true)!
建立攝像機(jī)和燈光
回到MrPig.scnassets/GameScene.scn中,設(shè)置攝像機(jī). 在場景樹中點擊+
號添加一個空節(jié)點,在節(jié)點檢查器中,將其命名為FollowCamera,位置為0,旋轉(zhuǎn) (x:-45, y:20, z:0).
將已經(jīng)存在的camera節(jié)點拖放到FollowCamera節(jié)點下.位置 (x:0, y:0, z:14),旋轉(zhuǎn)0.
選中ViewController.swift,添加一些屬性來控制攝像機(jī):
var cameraNode: SCNNode!
var cameraFollowNode: SCNNode!
在setupNodes()
中添加下面的代碼:
// 1
cameraNode = gameScene.rootNode.childNode(withName: "camera", recursively: true)!
cameraNode.addChildNode(game.hudNode)
// 2
cameraFollowNode = gameScene.rootNode.childNode(withName: "FollowCamera", recursively: true)!
代碼含義:
- 將cameraNode綁定到camera上,然后將hudNode添加上去作為子節(jié)點,這樣HUD就能一直顯示在鏡頭前了.
- 將cameraFollowNode綁定到FollowCamera上,這樣只需要更新其位置,攝像機(jī)就能一直跟隨著小豬了.
在場景樹中點擊+
號添加一個空節(jié)點,在節(jié)點檢查器中,將其命名為FollowLight,位置為0,旋轉(zhuǎn)為0.拖拽一個Ambient light和一個Directional light到空節(jié)點中.
選中ambient燈光,位置和旋轉(zhuǎn)設(shè)置為0:
選擇屬性檢查器,設(shè)置顏色為Aluminum:
然后選中directional燈光,進(jìn)入節(jié)點檢查器,設(shè)置位置和旋轉(zhuǎn)如下:
進(jìn)入屬性檢查器,配置燈光和陰影屬性:
配置完成后預(yù)覽一下:
在ViewController中添加屬性:
var lightFollowNode: SCNNode!
在setupNodes() 中添加下面代碼:
lightFollowNode = gameScene.rootNode.childNode(withName: "FollowLight",recursively: true)!
添加高速公路和車輛
在場景樹中點擊+
號添加一個空節(jié)點,在節(jié)點檢查器中,將其命名為Highway,拖拽兩個Road引用作為子節(jié)點.選中第一個,設(shè)置位置 (x:0, y:0, z:-4.5),旋轉(zhuǎn)為0:
選中第二個,位置為 (x:0, y:0, z:-11.5),旋轉(zhuǎn)為0:
點擊+
號添加一個空節(jié)點,在節(jié)點檢查器中,將其命名為Traffic,拖拽一個Bus引用節(jié)點到其中,位置 (x:0, y:0, z:-4),旋轉(zhuǎn) (x:0, y:-90, z:0):
拖拽一個Mini引用節(jié)點到其中,位置 (x:3, y:0, z:-5),旋轉(zhuǎn) (x:0, y:-90, z:0):
拖拽一個SUV引用節(jié)點到其中,位置 (x:-3, y:0, z:-5),旋轉(zhuǎn) (x:0, y:-90, z:0):
選中ViewController.swift,添加屬性:
var trafficNode: SCNNode!
在 setupNodes()中添加代碼:
trafficNode = gameScene.rootNode.childNode(withName: "Traffic", recursively: true)!
接著,需要復(fù)制一下達(dá)到下面的效果:
- 左側(cè)車道是公交車道,右側(cè)車道是較小較快的車道;
- 兩條公路,一條朝左開,一條朝右開;
- 按住Option鍵來快速復(fù)制;
- 按住Command鍵來與周圍元素對齊;
- 兩車之間就留下足夠距離讓小豬能行;
- 完成一條公路后,選中所有車輛,并按住Option拖拽到另一條公路上,就復(fù)制完成了,然后再掉轉(zhuǎn)180度;
- 旋轉(zhuǎn)車輛時,按住Command鍵可以更方便地對齊;
完成后,運(yùn)行一下:
添加樹林
拖拽一個空的SceneKit Scene File,命名為TreeLine并放置在MrPig.scnassets目錄下:
在TreeLine.scn中,創(chuàng)建一個空節(jié)點,命名為TreeLine,它將作為父容器節(jié)點:
按下面的圖來擺放各種樹木:
- X:代表在x軸上的坐標(biāo);
- Z:代表在z軸上的坐標(biāo);
- S:代表小的樹SmallTree;
- M:代表中等樹MediumTree;
- L:代表大的樹LargeTree;
例如左上角第一個,放置一個SmallTree在位置 (x:-5, y:0, z:-1) 處.使用Option和Command鍵可以提高復(fù)制粘貼速度.
拖拽一個空的SceneKit Scene File,命名為TreePatch并放置在MrPig.scnassets目錄下:
在TreePatch.scn中,創(chuàng)建一個空節(jié)點,命名為TreePatch,它將作為父容器節(jié)點:
按下面的圖來擺放各種樹木:
完成后:
回到MrPig.scnassets/GameScene.scn中,添加一個空節(jié)點,命名為Trees,作為樹林的容器節(jié)點:
按下圖來擺放樹林TreeLine:
前面部分,靠近Mr.Pig處樹林坐標(biāo)為:
- Position:(x:0,y:0,z:7),Euler:(x:0,y:0,z:0).
- Position:(x:-7, y:0, z:3), Euler: (x:0, y:90, z:0).
- Position:(x:7,y:0,z:3),Euler:(x:0,y:90,z:0).
- Position:(x:-14,y:0,z:-1),Euler:(x:0,y:0,z:0).
- Position:(x:14,y:0,z:-1),Euler:(x:0,y:0,z:0).
公路中間處的坐標(biāo)為:
- Position:(x:-14,y:0,z:-8),Euler:(x:0,y:0,z:0).
- Position:(x:14,y:0,z:-8),Euler:(x:0,y:0,z:0).
后面部分的坐標(biāo)為:
- Position:(x:18,y:0,z:-19),Euler:(x:0,y:90,z:0).
- Position:(x:-18,y:0,z:-19),Euler:(x:0,y:90,z:0).
- Position:(x::-11,y:0,z:-23),Euler:(x:0,y:0,z:0).
- Position: (x:0, y:0, z:-23), Euler:(x:0, y:0, z:0).
- Position:(x:11,y:0,z:-23),Euler:(x:0,y:0,z:0).
按下圖來擺放樹林TreePatch:
放置坐標(biāo)如下:
- Position:(x:10,y:0,z:-17),Euler:(x:0,y:0,z:0).
- Position:(x:-10,y:0,z:-17),Euler:(x:0,y:0,z:0).
- Position:(x:0,y:0,z:-17),Euler:(x:0,y:90,z:0).
添加金幣
先創(chuàng)建一個空節(jié)點,命名為Coins,作為金幣的容器節(jié)點:
然后拖拽Coin引用節(jié)點到場景中,坐標(biāo)如下:
- Position:(x:0,y:0.5,z:-8).
- Position:(x:0,y:0.5,z:-21).
- Position:(x:-14,y:0.5,z:-20).
- Position:(x:14,y:0.5,z:-20).
完成后,效果如圖:
動作編輯器
背景射線動起來 打開MrPig.scnassets/SplashScene.scn,選中Rays.拖拽一個Rotate Action,在屬性檢查器中設(shè)置時長30,z軸360;
右鍵點擊,創(chuàng)建循環(huán),點擊∞
金幣動畫
選中MrPig.scnassets/Coin.scn,按順序拖拽兩個Move Action,再并排放置一個Rotate Action
選中第一個Move Action,設(shè)置Start Time為0,Duration為0.5.設(shè)置Timing Function為Ease In, Ease Out, 設(shè)置Offset為 (x:0, y:0.5, z:0).
選中第二個Move Action,設(shè)置Start Time為0.5,Duration為0.5.設(shè)置Timing Function為Ease In, Ease Out, 設(shè)置Offset為 (x:0, y:-0.5, z:0).
選中Move Action,設(shè)置Start Time為0,Duration為1.設(shè)置Timing Function為Linear, 設(shè)置Euler Angle為 (x:0, y:360, z:0).
按Shift選中全部,然后右鍵單擊,創(chuàng)建循環(huán)
讓閃屏頁面的小豬動起來 進(jìn)入MrPig.scnassets/SplashScreen.scn,選中MrPig,創(chuàng)建一系列旋轉(zhuǎn)動作:
-
連接7個Rotate Actions序列,設(shè)置時長為0.25s;
-
設(shè)置第一個旋轉(zhuǎn)動作,讓它沿x軸旋轉(zhuǎn)30度;
-
設(shè)置下一個,沿x軸旋轉(zhuǎn)-30度;
重復(fù)設(shè)置接下來的幾個動作,直到最后一個;
-
最后一個動作是沿y軸旋轉(zhuǎn)180度,讓小豬秀它的尾巴;
移動游標(biāo),預(yù)覽動作,會看到小豬搖頭晃腦,然后轉(zhuǎn)身給你看尾巴;
-
設(shè)置循環(huán)播放
運(yùn)行一下,查看動作:
代碼創(chuàng)建動作
交通動作 打開ViewController.swift,添加屬性:
var driveLeftAction: SCNAction!
var driveRightAction: SCNAction!
在setupActions()
中添加下面代碼:
driveLeftAction = SCNAction.repeatForever(SCNAction.move(by:
SCNVector3Make(-2.0, 0, 0), duration: 1.0))
driveRightAction = SCNAction.repeatForever(SCNAction.move(by:
SCNVector3Make(2.0, 0, 0), duration: 1.0))
在setupTraffic()
中添加下面代碼:
// 1
for node in trafficNode.childNodes {
// 2 Buses are slow, the rest are speed demons
if node.name?.contains("Bus") == true {
driveLeftAction.speed = 1.0
driveRightAction.speed = 1.0
} else {
driveLeftAction.speed = 2.0
driveRightAction.speed = 2.0
}
// 3 Let vehicle drive towards its facing direction
if node.eulerAngles.y > 0 {
node.runAction(driveLeftAction)
} else {
node.runAction(driveRightAction)
}
}
運(yùn)行一下,車輛動起來了,但是開過去后就沒有了,這個問題我們稍后再處理:
添加小豬的動作
添加屬性:
var jumpLeftAction: SCNAction!
var jumpRightAction: SCNAction!
var jumpForwardAction: SCNAction!
var jumpBackwardAction: SCNAction!
在setupActions()
最下方中添加下面代碼:
// 1
let duration = 0.2
// 2
let bounceUpAction = SCNAction.moveBy(x: 0, y: 1.0, z: 0, duration: duration * 0.5)
let bounceDownAction = SCNAction.moveBy(x: 0, y: -1.0, z: 0, duration: duration * 0.5)
// 3
bounceUpAction.timingMode = .easeOut
bounceDownAction.timingMode = .easeIn
// 4
let bounceAction = SCNAction.sequence([bounceUpAction, bounceDownAction])
// 5
let moveLeftAction = SCNAction.moveBy(x: -1.0, y: 0, z: 0, duration: duration)
let moveRightAction = SCNAction.moveBy(x: 1.0, y: 0, z: 0, duration: duration)
let moveForwardAction = SCNAction.moveBy(x: 0, y: 0, z: -1.0, duration: duration)
let moveBackwardAction = SCNAction.moveBy(x: 0, y: 0, z: 1.0, duration: duration)
// 6
let turnLeftAction = SCNAction.rotateTo(x: 0, y: convertToRadians(angle: -90), z: 0, duration: duration, usesShortestUnitArc: true)
let turnRightAction = SCNAction.rotateTo(x: 0, y: convertToRadians(angle: 90), z: 0, duration: duration, usesShortestUnitArc: true)
let turnForwardAction = SCNAction.rotateTo(x: 0, y:
convertToRadians(angle: 180), z: 0, duration: duration, usesShortestUnitArc: true)
let turnBackwardAction = SCNAction.rotateTo(x: 0, y:
convertToRadians(angle: 0), z: 0, duration: duration, usesShortestUnitArc: true)
// 7
jumpLeftAction = SCNAction.group([turnLeftAction, bounceAction, moveLeftAction])
jumpRightAction = SCNAction.group([turnRightAction, bounceAction, moveRightAction])
jumpForwardAction = SCNAction.group([turnForwardAction, bounceAction, moveForwardAction])
jumpBackwardAction = SCNAction.group([turnBackwardAction, bounceAction, moveBackwardAction])
代碼含義:
- 定義時長;
- 向上,向下的彈簧效果;
- 修改時間模式,一個漸入,一個漸出;
- 創(chuàng)建
bounceAction
將向上和向下彈簧效果組成序列; - 用
SCNAction.moveBy(x:y:z:duration:)
創(chuàng)建四個方向的移動動作; - 用
SCNAction.rotateTo(x:y:z:duration:usesShortestUnitArc:)
創(chuàng)建四個方向的旋轉(zhuǎn)動作; - 按順序組合出四個跳躍動作;
添加移動手勢
給ViewController添加handleGesture(_:)
方法:
// 1
func handleGesture(_ sender: UISwipeGestureRecognizer) {
// 2
guard game.state == .playing else {
return
}
// 3
switch sender.direction {
case UISwipeGestureRecognizerDirection.up:
pigNode.runAction(jumpForwardAction)
case UISwipeGestureRecognizerDirection.down:
pigNode.runAction(jumpBackwardAction)
case UISwipeGestureRecognizerDirection.left:
if pigNode.position.x > -15 {
pigNode.runAction(jumpLeftAction)
}
case UISwipeGestureRecognizerDirection.right:
if pigNode.position.x < 15 {
pigNode.runAction(jumpRightAction)
}
default:
break
} }
代碼含義:
- 定義一個手勢方法;
- 判斷游戲狀態(tài);
- 判斷手勢方向,左右限制不能超出范圍;
在setupGestures()
中添加下面代碼:
let swipeRight = UISwipeGestureRecognizer(target: self,
action: #selector(ViewController.handleGesture(_:)))
swipeRight.direction = .right
scnView.addGestureRecognizer(swipeRight)
let swipeLeft = UISwipeGestureRecognizer(target: self,
action: #selector(ViewController.handleGesture(_:)))
swipeLeft.direction = .left
scnView.addGestureRecognizer(swipeLeft)
let swipeForward = UISwipeGestureRecognizer(target: self,
action: #selector(ViewController.handleGesture(_:)))
swipeForward.direction = .up
scnView.addGestureRecognizer(swipeForward)
let swipeBackward = UISwipeGestureRecognizer(target: self,
action: #selector(ViewController.handleGesture(_:)))
swipeBackward.direction = .down
scnView.addGestureRecognizer(swipeBackward)
運(yùn)行一下,測試手勢控制:
設(shè)置游戲結(jié)束時的動作序列
給ViewController添加一個屬性:
var triggerGameOver: SCNAction!
在setupActions()
的最底部添加代碼:
// 1
let spinAround = SCNAction.rotateBy(x: 0, y: convertToRadians(angle:
720), z: 0, duration: 2.0)
let riseUp = SCNAction.moveBy(x: 0, y: 10, z: 0, duration: 2.0)
let fadeOut = SCNAction.fadeOpacity(to: 0, duration: 2.0)
let goodByePig = SCNAction.group([spinAround, riseUp, fadeOut])
// 2
let gameOver = SCNAction.run { (node:SCNNode) -> Void in
self.pigNode.position = SCNVector3(x:0, y:0, z:0)
self.pigNode.opacity = 1.0
self.startSplash()
}
// 3
triggerGameOver = SCNAction.sequence([goodByePig, gameOver])
代碼含義:
- 創(chuàng)建一些基本動作:一個旋轉(zhuǎn)720度,一個向上移動,一個逐漸透明;共同組成了一個動作組,叫
goodByePig
; -
SCNAction.runAction(_:)
類方法允許我們插入一些邏輯代碼,在block中重設(shè)了小豬的位置,透明度,并觸發(fā)了startSplash()
方法; - 創(chuàng)建最終的
triggerGameOver
動作序列,先執(zhí)行goodByePig
,再執(zhí)行gameOver
;
在stopGame()
方法后面調(diào)用一下:
pigNode.runAction(triggerGameOver)
Advanced Collision Detection高級碰撞檢測
本章節(jié)解決以下問題:
- 小豬遇到障礙時不能停止,如撞上樹木;
- 小豬撞到汽車不能結(jié)束游戲;
- 小豬無法真正收集金幣;
隱藏的碰撞檢測幾何體
這里我們用點小技巧來處理小豬與樹林的碰撞問題,使用四個隱藏的節(jié)點,當(dāng)左側(cè)節(jié)點與樹林碰撞時,就不能再向左移動了:
創(chuàng)建隱藏的碰撞節(jié)點
創(chuàng)建SceneKit Scene File到根目錄下,命名為Collision.scn,保存在MrPig.scnassets下:
選中Collision.scn,添加一個空節(jié)點,命名為Collision.
拖拽一個Box到場景中,放置在Collision節(jié)點下,命名為Front,位置 (x:0, y:0.25, z:-1).
進(jìn)入屬性檢查器,設(shè)置尺寸為 (x:0.25, y:0.25, z:0.25).
按住Option和Command,拖拽出另外三個副本,選中一個命名為Back,位置設(shè)為 (x:0, y:0.25, z:1).
選中另一個,命名為Left,位置 (x:-1, y:0.25, z:0)
選中最后一個,命名為Right,位置 (x:1, y:0.25, z:0)
完成后的效果
接下來,啟用物理屬性 按住Shift選中四個節(jié)點,進(jìn)入物理檢查器,將Type改為Kinematic.
再進(jìn)入節(jié)點檢查器,滾動到Visibility區(qū),設(shè)置Opacity為0.5(供調(diào)試),同時取消勾選Casts Shadow.
設(shè)置各個節(jié)點的位掩碼 Front節(jié)點,物理檢查器中,Category mask設(shè)為8.
Back節(jié)點,物理檢查器中,Category mask設(shè)為16.
Left節(jié)點,物理檢查器中,Category mask設(shè)為32.
Right節(jié)點,物理檢查器中,Category mask設(shè)為64.
最后,還要刪除默認(rèn)的camera.
使用碰撞節(jié)點
選中MrPig.scnassets/GameScene.scn,然后拖拽一個Collsion.scn引用節(jié)點到場景中.
在ViewController.swift中添加屬性:
var collisionNode: SCNNode!
var frontCollisionNode: SCNNode!
var backCollisionNode: SCNNode!
var leftCollisionNode: SCNNode!
var rightCollisionNode: SCNNode!
在setupNodes()
最后添加下面代碼:
collisionNode = gameScene.rootNode.childNode(withName: "Collision", recursively: true)!
frontCollisionNode = gameScene.rootNode.childNode(withName: "Front", recursively: true)!
backCollisionNode = gameScene.rootNode.childNode(withName: "Back", recursively: true)!
leftCollisionNode = gameScene.rootNode.childNode(withName: "Left", recursively: true)!
rightCollisionNode = gameScene.rootNode.childNode(withName: "Right", recursively: true)!
創(chuàng)建渲染循環(huán)
在ViewController
中添加方法:
func updatePositions() {
collisionNode.position = pigNode.position
}
在ViewController.swift最底部添加方法:
// 1
extension ViewController : SCNSceneRendererDelegate {
// 2
func renderer(_ renderer: SCNSceneRenderer, didApplyAnimationsAtTime
time:
TimeInterval) {
// 3
guard game.state == .playing else {
return
}
// 4
game.updateHUD()
// 5
updatePositions()
}
}
代碼含義:
- 實現(xiàn)了
SCNSceneRenderDelegate
協(xié)議; - 在渲染循環(huán)中剛剛完成動畫和動作后,插入游戲邏輯;
- 判斷游戲狀態(tài);
- 更新HUD;
- 調(diào)用
updatePositions()
,使collisionNode
位置和pigNode
保持一致;
記得在setupScenes()
中添加代理:
scnView.delegate = self
運(yùn)行一下,查看效果:
添加物理效果
在ViewController中,定義以下常量:
let BitMaskPig = 1
let BitMaskVehicle = 2
let BitMaskObstacle = 4
let BitMaskFront = 8
let BitMaskBack = 16
let BitMaskLeft = 32
let BitMaskRight = 64
let BitMaskCoin = 128
let BitMaskHouse = 256
接下來,啟動物理效果
選中MrPig.scnassets/MrPig.scn,選中MrPig節(jié)點,進(jìn)入物理檢查器,將Type改為Kinematic.
接著在Bit masks區(qū),將Category mask設(shè)為1,在Physics shape區(qū), 將Type改為Bounding Box并設(shè)置Scale為0.6.
按同樣步驟,選中MrPig.scnassets/Bus.scn,再選中Bus節(jié)點,進(jìn)入物理檢查器,將Type改為Kinematic.
接著在Bit masks區(qū),將Category mask設(shè)為2,在Physics shape區(qū), 將Type改為Bounding Box并設(shè)置Scale為0.8.
選中MrPig.scnassets/Mini.scn,再選中Mini節(jié)點,進(jìn)入物理檢查器,將Type改為Kinematic.
接著在Bit masks區(qū),將Category mask設(shè)為2,在Physics shape區(qū), 將Type改為Bounding Box并設(shè)置Scale為0.8.
選中MrPig.scnassets/SUV.scn,再選中SUV節(jié)點,進(jìn)入物理檢查器,將Type改為Kinematic.
接著在Bit masks區(qū),將Category mask設(shè)為2,在Physics shape區(qū), 將Type改為Bounding Box并設(shè)置Scale為0.8.
選中MrPig.scnassets/TreeLine.scn,再選中TreeLine節(jié)點,進(jìn)入物理檢查器,將Type改為Static.
接著在Bit masks區(qū),將Category mask設(shè)為4,在Physics shape區(qū), 將Type改為Bounding Box并設(shè)置Scale為1.
選中MrPig.scnassets/TreePatch.scn,再選中TreePatch節(jié)點,進(jìn)入物理檢查器,將Type改為Static.
接著在Bit masks區(qū),將Category mask設(shè)為4,在Physics shape區(qū), 將Type改為Bounding Box并設(shè)置Scale為1.
選中MrPig.scnassets/Coin.scn,再選中Coin節(jié)點,進(jìn)入物理檢查器,將Type改為Kinematic.
接著在Bit masks區(qū),將Category mask設(shè)為128,在Physics shape區(qū), 將Type改為Bounding Box并設(shè)置Scale為0.8.
設(shè)置接觸掩碼
打開ViewController.swift,在setupNodes()
的底部添加代碼:
// 1
pigNode.physicsBody?.contactTestBitMask = BitMaskVehicle | BitMaskCoin | BitMaskHouse
// 2
frontCollisionNode.physicsBody?.contactTestBitMask = BitMaskObstacle
backCollisionNode.physicsBody?.contactTestBitMask = BitMaskObstacle
leftCollisionNode.physicsBody?.contactTestBitMask = BitMaskObstacle
rightCollisionNode.physicsBody?.contactTestBitMask = BitMaskObstacle
處理碰撞
給ViewController添加屬性:
var activeCollisionsBitMask: Int = 0
在ViewContoller.swift最下方添加代碼:
// 1
extension ViewController : SCNPhysicsContactDelegate {
// 2
func physicsWorld(_ world: SCNPhysicsWorld,
didBegin contact: SCNPhysicsContact) {
// 3
guard game.state == .playing else {
return
}
// 4
var collisionBoxNode: SCNNode!
if contact.nodeA.physicsBody?.categoryBitMask == BitMaskObstacle {
collisionBoxNode = contact.nodeB
} else {
collisionBoxNode = contact.nodeA
}
// 5
activeCollisionsBitMask |= collisionBoxNode.physicsBody!.categoryBitMask
}
// 6
func physicsWorld(_ world: SCNPhysicsWorld,
didEnd contact: SCNPhysicsContact) {
// 7
guard game.state == .playing else {
return
}
// 8
var collisionBoxNode: SCNNode!
if contact.nodeA.physicsBody?.categoryBitMask == BitMaskObstacle {
collisionBoxNode = contact.nodeB
} else {
collisionBoxNode = contact.nodeA
}
// 9
activeCollisionsBitMask &=
~collisionBoxNode.physicsBody!.categoryBitMask
}
}
代碼含義:
- 添加類擴(kuò)展,遵守
SCNPhysicsContactDelegate
協(xié)議; - 實現(xiàn)
physicsWorld(_:didBegin:)
方法; - 只需要關(guān)注
.playing
狀態(tài)時的情況,其他不處理; - 判斷哪個是障礙物,哪個是隱藏的碰撞檢測盒子;
- 用位運(yùn)算OR,將碰撞檢測盒子的類掩碼添加到
activeCollisionsBitMask
中去; - 實現(xiàn)
physicsWorld(_:didEnd:)
方法,碰撞結(jié)束時調(diào)用; - 判斷
.playing
狀態(tài); - 判斷哪個是障礙物,哪個是隱藏的碰撞檢測盒子;
- 用位運(yùn)算符NOT和位運(yùn)算符AND,從
activeCollisionsBitMask
中移除碰撞檢測盒子的類掩碼;
在handleGestures(_:)
中的guard
語句后,添加下面代碼:
// 1
let activeFrontCollision = activeCollisionsBitMask & BitMaskFront ==
BitMaskFront
let activeBackCollision = activeCollisionsBitMask & BitMaskBack ==
BitMaskBack
let activeLeftCollision = activeCollisionsBitMask & BitMaskLeft ==
BitMaskLeft
let activeRightCollision = activeCollisionsBitMask & BitMaskRight ==
BitMaskRight
// 2
guard (sender.direction == .up && !activeFrontCollision) ||
(sender.direction == .down && !activeBackCollision) ||
(sender.direction == .left && !activeLeftCollision) ||
(sender.direction == .right && !activeRightCollision) else {
return
}
代碼含義:
- 用位運(yùn)算符AND來判斷四個方向的隱藏節(jié)點是否已經(jīng)發(fā)生了碰撞;
- 用
guard
來確保沒有碰撞,可以向該方向移動;
最后,在setupScenes()
中添加代理:
gameScene.physicsWorld.contactDelegate = self
現(xiàn)在運(yùn)行一下,小豬就不會再跳進(jìn)樹林中了:
處理和車輛的碰撞
在physicsWorld(_:didBegin:)
中最后添加下面代碼:
// 1
var contactNode: SCNNode!
if contact.nodeA.physicsBody?.categoryBitMask == BitMaskPig {
contactNode = contact.nodeB
} else {
contactNode = contact.nodeA
}
// 2
if contactNode.physicsBody?.categoryBitMask == BitMaskVehicle {
stopGame()
}
代碼含義:
- 和前面類似,用來判斷哪個是小豬;
- 如果是和車輛碰撞,就結(jié)束游戲;
處理和金幣的碰撞
在physicsWorld(_:didBegin:)
中的后面添加下面代碼:
// 1
if contactNode.physicsBody?.categoryBitMask == BitMaskCoin {
// 2
contactNode.isHidden = true
contactNode.runAction(SCNAction.waitForDurationThenRunBlock(duration:
60) { (node: SCNNode!) -> Void in
node.isHidden = false
})
// 3
game.collectCoin()
}
代碼含義:
- 如果是和金幣碰撞;
- 隱藏金幣,并在60秒后重新出現(xiàn);
- 收集金幣,增加分?jǐn)?shù);
運(yùn)行游戲,現(xiàn)在可以收集金幣了
結(jié)束處理
更新攝像機(jī)位置
打開ViewController.swift,在updatePositions()
在最底部,添加下面的代碼:
let lerpX = (pigNode.position.x - cameraFollowNode.position.x) * 0.05
let lerpZ = (pigNode.position.z - cameraFollowNode.position.z) * 0.05
cameraFollowNode.position.x += lerpX
cameraFollowNode.position.z += lerpZ
這段代碼讓攝像機(jī)朝小豬方向慢慢移動.
更新燈光位置 在updatePositions()
在最底部,添加下面的代碼:
lightFollowNode.position = cameraFollowNode.position
更新交通狀況 我們需要用幾輛車來模擬不斷的交通情況,所以當(dāng)小車遇到邊界時,需要重新設(shè)定它們的位置. 在ViewController中,添加下面的方法:
func updateTraffic() {
// 1
for node in trafficNode.childNodes {
// 2
if node.position.x > 25 {
node.position.x = -25
} else if node.position.x < -25 {
node.position.x = 25
}
} }
然后還要在renderer(_:didApplyAnimationsAtTime:)
底部添加調(diào)用:
updateTraffic()
設(shè)置房屋
- 創(chuàng)建一個新SceneKit場景,命名為Home.scn,并刪除默認(rèn)的攝像機(jī);
- 添加一個House.scn到場景中,放在正中間;
- 創(chuàng)建一個空的節(jié)點,命名為Obstacles,用來作為容器節(jié)點;
- 添加一些樹;
- 添加一個Mini.scn;
參考下圖:
周圍的障礙物Obstacles需要設(shè)置物理形體;分類掩碼category bit mask設(shè)置為4.而House的掩碼設(shè)置為256;
-
完成后,引入到游戲場景中;
最后,在
physicsWorld(_:didBegin:)
中添加代碼,讓Mr.Pig把金幣放到家中;
if contactNode.physicsBody?.categoryBitMask == BitMaskHouse {
if game.bankCoins() == true {
}
}
添加音頻
在ViewController.swift中,給setupSounds()
中添加下面代碼:
// 1
if game.state == .tapToPlay {
// 2
let music = SCNAudioSource(fileNamed: "MrPig.scnassets/Audio/
Music.mp3")!
// 3
music.volume = 0.3;
music.loops = true
music.shouldStream = true
music.isPositional = false
// 4
let musicPlayer = SCNAudioPlayer(source: music)
// 5
splashScene.rootNode.addAudioPlayer(musicPlayer)
}
此外,還要再添加一些環(huán)境音,在setupSounds()
底部再添加:
// 1
else if game.state == .playing {
// 2
let traffic = SCNAudioSource(fileNamed: "MrPig.scnassets/Audio/
Traffic.mp3")!
traffic.volume = 0.3
traffic.loops = true
traffic.shouldStream = true
traffic.isPositional = true
// 3
let trafficPlayer = SCNAudioPlayer(source: traffic)
gameScene.rootNode.addAudioPlayer(trafficPlayer)
// 4
game.loadSound(name: "Jump", fileNamed: "MrPig.scnassets/Audio/
Jump.wav")
game.loadSound(name: "Blocked", fileNamed: "MrPig.scnassets/Audio/
Blocked.wav")
game.loadSound(name: "Crash", fileNamed: "MrPig.scnassets/Audio/
Crash.wav")
game.loadSound(name: "CollectCoin", fileNamed: "MrPig.scnassets/Audio/
CollectCoin.wav")
game.loadSound(name: "BankCoin", fileNamed: "MrPig.scnassets/Audio/
BankCoin.wav")
}
代碼含義:
- 檢查是否是
.Playing
狀態(tài); - 設(shè)置MrPig.scnassets/Audio/Traffic.mp3作為流音頻的源;
- 添加到時根節(jié)點時開始播放音頻源;
- 預(yù)加載其他用到的音效;
最后再添加一些音效 跳躍音效:在handleGesture(_:)
方法后面添加:
game.playSound(node: pigNode, name: "Jump")
遇到障礙物音效:在第二個guard
語句中:
game.playSound(node: pigNode, name: "Blocked")
收集金幣音效:在physicsWorld(_:didBegin:)
中的game.collectCoin()
語句后,添加:
game.playSound(node: pigNode, name: "CollectCoin")
存放金幣音效:在physicsWorld(_:didBegin:)
中if game.bankCoins() == true
語句后面添加:
game.playSound(node: pigNode, name: "BankCoin")
被車撞音效:在physicsWorld(_:didBegin:)
中stopGame()
之前添加:
game.playSound(node: pigNode, name: "Crash")
運(yùn)行一下, 完成了!!