目录 (不定期更新中 :] )
1 准备工作、创建项目、Splash Scene
2 过场动画 Transition
3 搭建游戏场景 Game Scene
4 用场景编辑器添加动作
5 用代码添加动作
说明
从小就喜欢玩游戏, 所以写一个自己的游戏也算是自己的一个梦想. 后来发现了raywenderlich.com上的这篇教程3D Apple Games by Tutorials, 感觉写的很好也很详细. 之所以写这篇文章, 一方面算是给自己做一个学习笔记. 另外一方面好像没发现这篇教程的中文版, 希望能帮到看英文原版有压力的朋友.
这篇文章是从原教程第19章Transition开始写的. 因为原教程真的十分的长(pdf466页). 不过仍然讲的十分的详细. 就算完全是新手应该也是可以跟着做下去的.
教程里用到的素材都是来自raywenderlich.com, 如果你想看完整的英文原版教程, 去支持正版.
创建项目
打开Xcode, Shift+Command+N创建新项目, 选中 iOS > Application > Single View Application, 点击next, 名字Mr.Pig, 语言Swift, 创建完成后选中项目文件, 将General > Deployment Info > Device Orientation改为只有Portrait.
添加素材到项目
下载素材并拖动到项目里.
确保你的target跟Copy if needs被选中.
创建SceneKit View
在左侧导航栏选中ViewController.swift(如果没有导航栏按command + 0). 将里面的内容替换为下面
// 因为SceneKit需要依赖SpriteKit来实现专场特效, 所以这里需要把SpriteKit也引进来
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()
// 将游戏的状态设置为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 }
}
因为创建项目时选的是SingleViewApplication模板而不是Game模板, 所以现在需要填坑了.
在ViewController顶部添加属性
var scnView: SCNView!
这会持有SCNView的实例方便后面用到
添加代码到setupScenes():
scnView = SCNView(frame: self.view.bounds)
self.view.addSubview(scnView)
这会创建一个与当前view一样尺寸的SCNView实例并添加为当前view的子视图.
创建Game Scene
游戏的所有活动都在game scene里, 接下来你会在game scene里搭建一个完成的关卡.
在右下角FileTemplateLibrary找到SceneKit Scene File, 将其命名为GameScene, group选Mr.Pig.scnassets. 点Create.
右上角选中Attributes Inspector, 将Floor Reflectivity设置为0 - 你肯定不想让草(grass)反光, 因为草不是玻璃(glass) -_-!
接下来右上角选中第5个Materials Inspector > Properties > Diffuse 点击右侧蓝色箭头, 选中Grass_Diffuse.png, 然后在下面的Scale处将两个值都设置为12.5.
这下你有草地了 :]
创建Splash Scene
splash scene是游戏正式开始前的场景, 我们的主角Mr. Pig会一直用激情的舞蹈放飞自己, 直到玩家点击开始游戏.
跟刚才一样, 在右下角File Template Library拖动SceneKit Scene File到左侧Navigator, 命名为SplashScene, group选Mr.Pig.scnassets, 点击create.
选中刚创建的SplashScene.scn, 右下角第4个Media Library找到MrPig, 拖动到scene.
接下来, 你想给splash scene添加一个漂亮的渐变光.
选中MrPig, 点击右上最后一个Scene Inspector, 点击background右边蓝色箭头, 选中Gradient_Diffuse.png. 这下整个背景变成渐变的黄色了. 是的, Mr Pig喜欢亮色. -_-! (没get到这个梗在哪)
接下来在Mr Pig背后添加一些光线.
在右下Object Library处找到Plane, 拖动到scene.
点击Node Inspector, 将这个Node命名为Rays. 设置Position为 (x:0, y:0.25, z:-1), Euler为0, Visibility > Opacity为0.25.
点击Attributes Inspector, 设置Size为 (x:5, y:5), Corner Radius 2.5, 这样就是一个半径为2.5的圆.
设置镜头和光照
什么让我们的眼睛区分维度?当然是光照啦!(really? :] ) 然后如果你添加光照了你还得添加镜头. Lights, cameras, action!
默认情况下, splash scene已经包含了一个镜头了, 只需要一些小修改.
首先, 在scene graph区, 确保你没选中任何node, 然后点左下角 + 来添加一个empty node. 将其命名为Camera, 并将原本的camera作为子node拖动到新Camera的下面.
选中外部的Camera, 在Node Inspector下设置position 为 (x:0, y:0.3, z:0) , Euler为(x:-10, y:0, z:0). 这会让镜头朝下对准我们的猪, 就像猪拿着自拍杆一样.
选中内部的camera, 你需要把自拍杆稍微拉长一点, 但不要太长, 来刚好拍到Mr.Pig的全身. 设置 Position为(x:0, y:0, z:3) Euler 为 (x:0, y:0, z:0).
现在添加另外一个empty node到scene graph, 命名为Lights, 然后从Object Library拖动一个Omni light和一个Ambient light到Lighs下. 然后选中omni, 将其position设置为(x:-5, y:5, z:0). 猪哥亮了.
接下来添加像下图这样的Tap to play 和 Logo.
从Object Library拖动两个Plane到Scene graph, 命名为Logo跟TapToPlay, 注意层级是跟Lights同等级的, 不要拖动到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.
加载并呈现Splash Scene
我们终于设置完了Splash Scene, 接下来就得加载并将其呈现给玩家.
首先你需要对象来持有你的scene, 所以添加下面属性到View Controller:
var gameScene: SCNScene!
var splashScene: SCNScene!
然后添加下面代码到setupScenes():
// 1 加载对应的scn文件
gameScene = SCNScene(named: "/MrPig.scnassets/GameScene.scn")
splashScene = SCNScene(named: "/MrPig.scnassets/SplashScene.scn")
// 2 将splash scene设置为初始scene, 这样游戏开始时你首先看到的是splash scene
scnView.scene = splashScene
So far so good :] 那么如何开始游戏呢? 我们下节见.
如果有没写清楚或者有疑问的地方, 欢迎留言.
