手把手教你用Xcode制作CrossRoad类游戏01

目录 (不定期更新中 :] )

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. FileTemplateLibrary 选中刚刚创建的GameScene.scn, 如果没有Scene graph, 点击图上左下角红圈那里, Scene graph可以让你清楚的看到这个scene上都有什么东西. 在右侧点击Node Inspector, 在下面的Object Library里面找到Floor, 将其拖动到scene上, 名字改为Grass, Position和Euler都改为0.

右上角选中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.

选中MrPig, 在Node Inspector下将Position跟Euler值都设置为0. (如果设置过位置后找不到你的🐷了, 可以在scene graph里找到MrPig并双击, 或者如果你用的是触控板, 在scene里双指捏合来缩放镜头找到你的猪在哪) create Pig reference
接下来, 你想给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的圆.

点击Materials Inspector, 设置Property > Diffuse 为 Rays_Diffuse.png, Lighting Mode 为 Constant. 继续向下滚动到Settings部分, 设置blend mode 为 subtract, 这样就会用减法来混合漫反射贴图使场景变暗(原文这样的:darken the scene by using the blend diffuse map by means of subtraction, 有问题的话欢迎大佬指正谢谢). 光线

设置镜头和光照

什么让我们的眼睛区分维度?当然是光照啦!(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).

设置完成后, 点击左下角Point of View, 下拉菜单中选中camera, 如果你设置正确的话应该看起来是这样的: 镜头

现在添加另外一个empty node到scene graph, 命名为Lights, 然后从Object Library拖动一个Omni light和一个Ambient light到Lighs下. 然后选中omni, 将其position设置为(x:-5, y:5, z:0). 猪哥亮了.

接下来添加像下图这样的Tap to play 和 Logo. Logo & Tap to play

从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

command + R来验证一下你之前的成果. 如果一切顺利, 你的成果应该是下面这样的! Splash Scene

So far so good :] 那么如何开始游戏呢? 我们下节见.

如果有没写清楚或者有疑问的地方, 欢迎留言.