目錄 (不定期更新中 :] )
1 準(zhǔn)備工作栽渴、創(chuàng)建項(xiàng)目卫病、Splash Scene
2 過(guò)場(chǎng)動(dòng)畫 Transition
3 搭建游戲場(chǎng)景 Game Scene
4 用場(chǎng)景編輯器添加動(dòng)作
5 用代碼添加動(dòng)作
說(shuō)明
從小就喜歡玩游戲, 所以寫一個(gè)自己的游戲也算是自己的一個(gè)夢(mèng)想. 后來(lái)發(fā)現(xiàn)了raywenderlich.com上的這篇教程3D Apple Games by Tutorials, 感覺(jué)寫的很好也很詳細(xì). 之所以寫這篇文章, 一方面算是給自己做一個(gè)學(xué)習(xí)筆記. 另外一方面好像沒(méi)發(fā)現(xiàn)這篇教程的中文版, 希望能幫到看英文原版有壓力的朋友.
這篇文章是從原教程第19章Transition開(kāi)始寫的. 因?yàn)樵坛陶娴氖值拈L(zhǎng)(pdf466頁(yè)). 不過(guò)仍然講的十分的詳細(xì). 就算完全是新手應(yīng)該也是可以跟著做下去的.
教程里用到的素材都是來(lái)自raywenderlich.com, 如果你想看完整的英文原版教程, 去支持正版.
創(chuàng)建項(xiàng)目
打開(kāi)Xcode, Shift+Command+N創(chuàng)建新項(xiàng)目, 選中 iOS > Application > Single View Application, 點(diǎn)擊next, 名字Mr.Pig, 語(yǔ)言Swift, 創(chuàng)建完成后選中項(xiàng)目文件, 將General > Deployment Info > Device Orientation改為只有Portrait.
添加素材到項(xiàng)目
下載素材并拖動(dòng)到項(xiàng)目里.
確保你的target跟Copy if needs被選中.
創(chuàng)建SceneKit View
在左側(cè)導(dǎo)航欄選中ViewController.swift(如果沒(méi)有導(dǎo)航欄按command + 0). 將里面的內(nèi)容替換為下面
// 因?yàn)镾ceneKit需要依賴SpriteKit來(lái)實(shí)現(xiàn)專場(chǎng)特效, 所以這里需要把SpriteKit也引進(jìn)來(lái)
import UIKit
import SceneKit
import SpriteKit
class ViewController: UIViewController {
// 這里獲取GameHelper的單例game, 包含了各種有用的功能
let game = GameHelper.sharedInstance
override func viewDidLoad() {
super.viewDidLoad()
setupScenes()
setupNodes()
setupActions()
setupTraffic()
setupGestures()
setupSounds()
// 將游戲的狀態(tài)設(shè)置為tapToPlay
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 }
}
因?yàn)閯?chuàng)建項(xiàng)目時(shí)選的是SingleViewApplication模板而不是Game模板, 所以現(xiàn)在需要填坑了.
在ViewController頂部添加屬性
var scnView: SCNView!
這會(huì)持有SCNView的實(shí)例方便后面用到
添加代碼到setupScenes():
scnView = SCNView(frame: self.view.bounds)
self.view.addSubview(scnView)
這會(huì)創(chuàng)建一個(gè)與當(dāng)前view一樣尺寸的SCNView實(shí)例并添加為當(dāng)前view的子視圖.
創(chuàng)建Game Scene
游戲的所有活動(dòng)都在game scene里, 接下來(lái)你會(huì)在game scene里搭建一個(gè)完成的關(guān)卡.
在右下角FileTemplateLibrary找到SceneKit Scene File, 將其命名為GameScene, group選Mr.Pig.scnassets. 點(diǎn)Create.
右上角選中Attributes Inspector, 將Floor Reflectivity設(shè)置為0 - 你肯定不想讓草(grass)反光, 因?yàn)椴莶皇遣Ａ?glass) -_-!
接下來(lái)右上角選中第5個(gè)Materials Inspector > Properties > Diffuse 點(diǎn)擊右側(cè)藍(lán)色箭頭, 選中Grass_Diffuse.png, 然后在下面的Scale處將兩個(gè)值都設(shè)置為12.5.
這下你有草地了 :]
創(chuàng)建Splash Scene
splash scene是游戲正式開(kāi)始前的場(chǎng)景, 我們的主角Mr. Pig會(huì)一直用激情的舞蹈放飛自己, 直到玩家點(diǎn)擊開(kāi)始游戲.
跟剛才一樣, 在右下角File Template Library拖動(dòng)SceneKit Scene File到左側(cè)Navigator, 命名為SplashScene, group選Mr.Pig.scnassets, 點(diǎn)擊create.
選中剛創(chuàng)建的SplashScene.scn, 右下角第4個(gè)Media Library找到MrPig, 拖動(dòng)到scene.
接下來(lái), 你想給splash scene添加一個(gè)漂亮的漸變光.
選中MrPig, 點(diǎn)擊右上最后一個(gè)Scene Inspector, 點(diǎn)擊background右邊藍(lán)色箭頭, 選中Gradient_Diffuse.png. 這下整個(gè)背景變成漸變的黃色了. 是的, Mr Pig喜歡亮色. -_-! (沒(méi)get到這個(gè)梗在哪)
接下來(lái)在Mr Pig背后添加一些光線.
在右下Object Library處找到Plane, 拖動(dòng)到scene.
點(diǎn)擊Node Inspector, 將這個(gè)Node命名為Rays. 設(shè)置Position為 (x:0, y:0.25, z:-1), Euler為0, Visibility > Opacity為0.25.
點(diǎn)擊Attributes Inspector, 設(shè)置Size為 (x:5, y:5), Corner Radius 2.5, 這樣就是一個(gè)半徑為2.5的圓.
設(shè)置鏡頭和光照
什么讓我們的眼睛區(qū)分維度?當(dāng)然是光照啦!(really? :] ) 然后如果你添加光照了你還得添加鏡頭. Lights, cameras, action!
默認(rèn)情況下, splash scene已經(jīng)包含了一個(gè)鏡頭了, 只需要一些小修改.
首先, 在scene graph區(qū), 確保你沒(méi)選中任何node, 然后點(diǎn)左下角 + 來(lái)添加一個(gè)empty node. 將其命名為Camera, 并將原本的camera作為子node拖動(dòng)到新Camera的下面.
選中外部的Camera, 在Node Inspector下設(shè)置position 為 (x:0, y:0.3, z:0) , Euler為(x:-10, y:0, z:0). 這會(huì)讓鏡頭朝下對(duì)準(zhǔn)我們的豬, 就像豬拿著自拍桿一樣.
選中內(nèi)部的camera, 你需要把自拍桿稍微拉長(zhǎng)一點(diǎn), 但不要太長(zhǎng), 來(lái)剛好拍到Mr.Pig的全身. 設(shè)置 Position為(x:0, y:0, z:3) Euler 為 (x:0, y:0, z:0).
現(xiàn)在添加另外一個(gè)empty node到scene graph, 命名為L(zhǎng)ights, 然后從Object Library拖動(dòng)一個(gè)Omni light和一個(gè)Ambient light到Lighs下. 然后選中omni, 將其position設(shè)置為(x:-5, y:5, z:0). 豬哥亮了.
接下來(lái)添加像下圖這樣的Tap to play 和 Logo.
從Object Library拖動(dòng)兩個(gè)Plane到Scene graph, 命名為L(zhǎng)ogo跟TapToPlay, 注意層級(jí)是跟Lights同等級(jí)的, 不要拖動(dòng)到Lights里面了.
選中Logo, Node Inspector -> Position(x:0, y:1, z:0.5); Attributes Inspector -> Size(x:1, y:0.5); Material Inspector -> Lighting Mode: Constant, Diffuse: MrPigLogo_Diffuse.png.
選中TapToPlay, Node Inspector -> Position(x:0, y:-0.3, z:0.5); Attributes Inspector -> Size(x:1, y:0.25); Material Inspector -> Lighting Mode: Constant, Diffuse: TapToPlay_Diffuse.png.
加載并呈現(xiàn)Splash Scene
我們終于設(shè)置完了Splash Scene, 接下來(lái)就得加載并將其呈現(xiàn)給玩家.
首先你需要對(duì)象來(lái)持有你的scene, 所以添加下面屬性到View Controller:
var gameScene: SCNScene!
var splashScene: SCNScene!
然后添加下面代碼到setupScenes():
// 1 加載對(duì)應(yīng)的scn文件
gameScene = SCNScene(named: "/MrPig.scnassets/GameScene.scn")
splashScene = SCNScene(named: "/MrPig.scnassets/SplashScene.scn")
// 2 將splash scene設(shè)置為初始scene, 這樣游戲開(kāi)始時(shí)你首先看到的是splash scene
scnView.scene = splashScene
So far so good :] 那么如何開(kāi)始游戲呢? 我們下節(jié)見(jiàn).
如果有沒(méi)寫清楚或者有疑問(wèn)的地方, 歡迎留言.
