[SceneKit专题]26-如何制作一个像Stack的游戏-白红宇

说明

更多iOS相关知识查看github上

在本教程中,你将会学习如何制作一个类似这样的游戏.

本教程将包含以下内容:

可视化创建3D场景.

编程加载并呈现3D场景.

使用节点的物理形体.

结合使用UIKit与SceneKit.

在SceneKit游戏中播放音频.

开始

下载初始项目. 在初始项目里面,你会发现SceneKit目录文件中带有音频和场景文件.另外,还有一些SCNVector3类扩展来执行简单的向量算术运算及生成渐变图片.还有App Icon也已经添加进去了!花点时间熟悉一下项目吧.

你将会创建一个类似于Stack的游戏.这个游戏的目标是在一块方块上叠放另一个方块.需要小心的是:方块叠放时稍微偏一点,多余部分就会被切掉.完全没对齐,那就game over了!

建立场景

你将从建立你的游戏场景开始.打开GameScene.scn.

拖拽一个新的

camera到场景中,然后选择

Node Inspector并重命名节点为

Main Camera.设置位置为

X: 3, Y: 4.5, Z: 3,旋转为

X: -40, Y: 45, Z:0:

切换到Attributes Inspector并切换相机的Projection type为Orthographic. 下一步,添加灯光到场景中. 从对象库中拖拽一个新的方向光到场景中,命名为Directional Light.因为相机只看到了场景的一侧,你不必去照亮看不见的令一侧.回到Attributes Inspector,设置位置为X: 0, Y: 0, Z: 0,旋转为X: -65, Y: 20, Z:-30:

神奇,亮起来了!

现在回到塔的顶部.你需要一个基础方块来支承这个塔,来让玩家在上面建造.拖拽一个盒子到场景中,设置属性:

在Node Inspector中,更改名字为Base Block,并设置位置为X:0,Y:-4,Z:0.

在Attributes Inspector中,更改尺寸为Width: 1, Height: 8, Length: 1.

在Material Inspector中,更改漫反射颜色为 #434343.

你需要添加一个动态形体到基础方块,切换到Physics Inspector中,并将物理形体改为Static.

现在让我们配上漂亮的背景颜色!在选中基础方块的同时,切换到Scene Inspector,并拖拽文件Gradient.png到背景选择框中:

你需要一个方法来显示给玩家,他们的塔已经堆放了多高.打开Main.storyboard;看到它已经有一个SCNView.添加一个label在SCNView顶部并设置文本为0.然后添加一个约束将label对齐到中心,像这样:

添加另一个约束将label顶部与屏幕顶部对齐.

然后切换到Attributes Inspector中,切换字体为Custom, Thonburi, Regular, 50.

然后使用assistant editor来添加一个从label到控制器的引用,命名为scoreLabel:

编译运行,看看现在有什么了.

添加你的第一块方块

知道怎么让塔越来越高么?对,创建更多方块. 创建一些属性来帮你追踪正在使用的方块.为此,打开ViewController.swift() 并在viewDidLoad() 之前添加下面变量:

//1var direction = truevar height = 0//2var previousSize = SCNVector3(1, 0.2, 1)var previousPosition = SCNVector3(0, 0.1, 0)var currentSize = SCNVector3(1, 0.2, 1)var currentPosition = SCNVector3Zero//3var offset = SCNVector3Zerovar absoluteOffset = SCNVector3Zerovar newSize = SCNVector3Zero//4var perfectMatches = 0复制代码

这段代码含义:

direction用来表示方块的位置是上升还是下降,height变量表示塔有多高.

previousSize和previousPosition变量表示当前层的尺寸和位置.

你需要使用offset,absoluteOffset,newSize变量来计算新层的尺寸.

perfectMatches变量表示玩家完美对齐上一层的次数.

现在,是时间添加方块到场景中了.在viewDidLoad() 底部添加下面代码:

//1let blockNode = SCNNode(geometry: SCNBox(width: 1, height: 0.2, length: 1, chamferRadius: 0))blockNode.position.z = -1.25blockNode.position.y = 0.1blockNode.name = "Block\(height)"    //2blockNode.geometry?.firstMaterial?.diffuse.contents =      UIColor(colorLiteralRed: 0.01 * Float(height), green: 0, blue: 1, alpha: 1)scnScene.rootNode.addChildNode(blockNode)复制代码

代码含义:

你用SCNNode的立方体创建一个新的方块,放置在Z轴和Y轴,并根据放置在塔上的height属性对其命名.

根据不断增长的高度,计算得出漫反射颜色的红色分量.最后,将节点添加到场景上.

创建并运行,会看到你的新方块出现在屏幕上!

移动方块

现在已经有一条新的方块用来放置.但是,我想如果方块是移动的会更好玩. 要实现这个移动,需要设置控制器作为场景渲染代理,并实现SCNSceneRendererDelegate协议中的方法. 在类的底部添加这个扩展:

extension ViewController: SCNSceneRendererDelegate {  func renderer(_ renderer: SCNSceneRenderer, updateAtTime time: TimeInterval) {  }}复制代码

这里我们需要实现SCNSceneRendererDelegate协议,添加renderer(_:updateAtTime:). 在renderer(_:updateAtTime:) 里面添加下面代码:

// 1if let currentNode = scnScene.rootNode.childNode(withName: "Block\(height)", recursively: false) {      // 2      if height % 2 == 0 {        // 3        if currentNode.position.z >= 1.25 {          direction = false        } else if currentNode.position.z <= -1.25 {          direction = true        }                // 4        switch direction {        case true:          currentNode.position.z += 0.03        case false:          currentNode.position.z -= 0.03        }      // 5      } else {        if currentNode.position.x >= 1.25 {          direction = false        } else if currentNode.position.x <= -1.25 {          direction = true        }               switch direction {        case true:          currentNode.position.x += 0.03        case false:          currentNode.position.x -= 0.03        }      }    }复制代码

代码含义:

根据名字找到场景中的方块.

根据层的位置,沿X轴或Z轴移动方块.奇数层沿Z轴运动,偶数层沿X轴运动.用求余操作符(%)来得到余数,判断奇偶.

如果方块的位置到了1.25或者-1.25,改变其方向,向另一方向运动.

根据方向,沿Z轴前后移动.

重复相同代码,只改为沿X轴.

默认情况下,SceneKit会暂停场景.为了看到场景中物体的移动,在viewDidLoad的底部添加下面代码:

scnView.isPlaying = truescnView.delegate = self复制代码

这段代码中,将这个控制器设置为场景的渲染代理,这样就能执行刚才写的代理方法了. 创建运行,查看运动!

处理点击

现在,我们已经让方块移动了,还需要在玩家点击屏幕时添加一个新方块并重设老方块的尺寸.切换到Main.storyboard并添加一个tap gesture recognizer到SCNView,像这样:

现在在控制器里面用辅助编辑器创建一个动作并命名为handleTap.

切换到标准编辑区,并打开ViewController.swift,然后在handlTap(_:) 内部添加代码:

if let currentBoxNode = scnScene.rootNode.childNode(  withName: "Block\(height)", recursively: false) {      currentPosition = currentBoxNode.presentation.position      let boundsMin = currentBoxNode.boundingBox.min      let boundsMax = currentBoxNode.boundingBox.max      currentSize = boundsMax - boundsMin            offset = previousPosition - currentPosition      absoluteOffset = offset.absoluteValue()      newSize = currentSize - absoluteOffset            currentBoxNode.geometry = SCNBox(width: CGFloat(newSize.x), height: 0.2,         length: CGFloat(newSize.z), chamferRadius: 0)      currentBoxNode.position = SCNVector3Make(currentPosition.x + (offset.x/2),        currentPosition.y, currentPosition.z + (offset.z/2))      currentBoxNode.physicsBody = SCNPhysicsBody(type: .static,         shape: SCNPhysicsShape(geometry: currentBoxNode.geometry!, options: nil))}复制代码

这里我们从场景中得到currentBoxNode.然后计算偏移及新方块的尺寸.从而改变方块的尺寸和位置,并给它一个静态物理形体.

偏移等于上一层和当前层位置的差值.通过从当前尺寸上减去差值的绝对值,就得到了新尺寸. 注意到,把当前节点设置位置到偏移处,方块的边缘完美对齐了上一个层的边缘.这创造出一种切掉方块的错觉.

下一步,你需要一个方法来创建塔上的下一个方块.在handleTap(_:) 下面添加代码:

func addNewBlock(_ currentBoxNode: SCNNode) {  let newBoxNode = SCNNode(geometry: currentBoxNode.geometry)  newBoxNode.position = SCNVector3Make(currentBoxNode.position.x,     currentPosition.y + 0.2, currentBoxNode.position.z)  newBoxNode.name = "Block\(height+1)"  newBoxNode.geometry?.firstMaterial?.diffuse.contents = UIColor(    colorLiteralRed: 0.01 * Float(height), green: 0, blue: 1, alpha: 1)      if height % 2 == 0 {    newBoxNode.position.x = -1.25  } else {    newBoxNode.position.z = -1.25  }      scnScene.rootNode.addChildNode(newBoxNode)}复制代码

这里我们创建了一个和上一个方块相同尺寸的新节点.放置在当前方块上方,并根据层高改变X或Z轴的位置.最后,改变漫反射颜色并将其添加到场景中.

你需要使用handleTap(_:) 来保持属性为最新.在handleTap(_:) 里的if else语句中添加代码:

addNewBlock(currentBoxNode)if height >= 5 {  let moveUpAction = SCNAction.move(by: SCNVector3Make(0.0, 0.2, 0.0), duration: 0.2)  let mainCamera = scnScene.rootNode.childNode(withName: "Main Camera", recursively: false)!  mainCamera.runAction(moveUpAction)}      scoreLabel.text = "\(height+1)"      previousSize = SCNVector3Make(newSize.x, 0.2, newSize.z)previousPosition = currentBoxNode.positionheight += 1复制代码

要做的第一件事就是调用addNewBlock(_:).如果塔的尺寸大于或等于5,将相机上移.

还需要更新分数,设置前一个尺寸和位置等于当前尺寸和位置.你可以使用newSize因为你设置当前节点的尺寸为newSize.然后增加高度.

创建并运行.一切看起来堆垛地很完美!

实现物理效果

游戏正确地重设了方块尺寸,但是如果被砍掉的部分能从塔上掉落,游戏会看起来更酷.

在addNewBlock(_:) 下面定义新方法:

func addBrokenBlock(_ currentBoxNode: SCNNode) {    let brokenBoxNode = SCNNode()    brokenBoxNode.name = "Broken \(height)"        if height % 2 == 0 && absoluteOffset.z > 0 {      // 1      brokenBoxNode.geometry = SCNBox(width: CGFloat(currentSize.x),         height: 0.2, length: CGFloat(absoluteOffset.z), chamferRadius: 0)            // 2      if offset.z > 0 {        brokenBoxNode.position.z = currentBoxNode.position.z -           (offset.z/2) - ((currentSize - offset).z/2)      } else {        brokenBoxNode.position.z = currentBoxNode.position.z -           (offset.z/2) + ((currentSize + offset).z/2)      }      brokenBoxNode.position.x = currentBoxNode.position.x      brokenBoxNode.position.y = currentPosition.y            // 3      brokenBoxNode.physicsBody = SCNPhysicsBody(type: .dynamic,         shape: SCNPhysicsShape(geometry: brokenBoxNode.geometry!, options: nil))      brokenBoxNode.geometry?.firstMaterial?.diffuse.contents = UIColor(colorLiteralRed: 0.01 *         Float(height), green: 0, blue: 1, alpha: 1)      scnScene.rootNode.addChildNode(brokenBoxNode)    // 4    } else if height % 2 != 0 && absoluteOffset.x > 0 {      brokenBoxNode.geometry = SCNBox(width: CGFloat(absoluteOffset.x), height: 0.2,         length: CGFloat(currentSize.z), chamferRadius: 0)            if offset.x > 0 {        brokenBoxNode.position.x = currentBoxNode.position.x - (offset.x/2) -           ((currentSize - offset).x/2)      } else {        brokenBoxNode.position.x = currentBoxNode.position.x - (offset.x/2) +           ((currentSize + offset).x/2)      }      brokenBoxNode.position.y = currentPosition.y      brokenBoxNode.position.z = currentBoxNode.position.z            brokenBoxNode.physicsBody = SCNPhysicsBody(type: .dynamic,         shape: SCNPhysicsShape(geometry: brokenBoxNode.geometry!, options: nil))      brokenBoxNode.geometry?.firstMaterial?.diffuse.contents = UIColor(        colorLiteralRed: 0.01 * Float(height), green: 0, blue: 1, alpha: 1)      scnScene.rootNode.addChildNode(brokenBoxNode)    }  }复制代码

这里你创建了一个新节点并用height来命名.你使用了if语句来确定坐标轴,并确保偏移大于0,因为等于时不会产生一个方块碎片.

刚才,你减去偏移量来设置新尺寸.这里,你无需计算,所需尺寸正是偏移量.

改变碎片部分的位置.

添加物理形体到该碎片上来让它掉落.还需要改变颜色并添加到场景中.

在X轴上重复同样操作.

你根据当前位置偏移量的一半来得到碎片的位置.然后,根据方块位置的正负,添加或扣除当前尺寸减去偏移的一半.

在handleTap(_:) 里面的addNewBlock(_:) 之前调用该方法:

addBrokenBlock(currentBoxNode)复制代码

当碎片节点掉落出视线时,还在不停掉落,并没有销毁.在renderer(_:updateAtTime:) 里面最上方添加代码:

for node in scnScene.rootNode.childNodes {  if node.presentation.position.y <= -20 {    node.removeFromParentNode()  }}复制代码

这段代码会删除Y值小于-20的所有节点. 运行看看切下的方块!

结束触摸

现在游戏机制的核心部分已经完成了,还有一些收尾工作.当玩家完美对齐上一层时应该有奖励.还有,现在还没有输赢判断,当你失败后也无法开始一个新游戏! 游戏还没有声音,需要添加一些声音.

处理完美对齐情况

在处理完美对齐的情况,在addBrokenBlock(_:) 中添加下面方法:

func checkPerfectMatch(_ currentBoxNode: SCNNode) {    if height % 2 == 0 && absoluteOffset.z <= 0.03 {      currentBoxNode.position.z = previousPosition.z      currentPosition.z = previousPosition.z      perfectMatches += 1      if perfectMatches >= 7 && currentSize.z < 1 {        newSize.z += 0.05      }            offset = previousPosition - currentPosition      absoluteOffset = offset.absoluteValue()      newSize = currentSize - absoluteOffset    } else if height % 2 != 0 && absoluteOffset.x <= 0.03 {      currentBoxNode.position.x = previousPosition.x      currentPosition.x = previousPosition.x      perfectMatches += 1      if perfectMatches >= 7 && currentSize.x < 1 {        newSize.x += 0.05      }            offset = previousPosition - currentPosition      absoluteOffset = offset.absoluteValue()      newSize = currentSize - absoluteOffset    } else {      perfectMatches = 0    }  }复制代码

如果玩家放置位置与上一块在0.03之内,就认为是完美匹配.只要误差足够近,就设置当前方块的位置等于上一个方块的位置.

通过设置当前和上一次位置相等,让它们在数值上完全匹配并重新计算偏移和新尺寸.在handleTap(_:) 里面计算偏移和新尺寸之后,调用这个方法:

checkPerfectMatch(currentBoxNode)复制代码

处理完全错位情况

现在已经处理了完美对齐的情况和部分对齐的情况,但你还需要处理完全错失的情况.

在handleTap(_:) 内checkPerfectMatch(_:) 之前,添加下面代码:

if height % 2 == 0 && newSize.z <= 0 {        height += 1        currentBoxNode.physicsBody = SCNPhysicsBody(type: .dynamic,           shape: SCNPhysicsShape(geometry: currentBoxNode.geometry!, options: nil))        return      } else if height % 2 != 0 && newSize.x <= 0 {        height += 1        currentBoxNode.physicsBody = SCNPhysicsBody(type: .dynamic,           shape: SCNPhysicsShape(geometry: currentBoxNode.geometry!, options: nil))        return      }复制代码

如果玩家错失了方块,计算出的新尺寸应该是负的,检查这个值就知道玩家是否错失了方块.如果玩家错失了,你将高度增加一,这样移动的代码就不再移动移动当前方块了.然后你再添加一个动态物理形体让方块掉落.

最后,return,这样代码就不再运行了,如checkPerfectMatch(_:),和addBrokenBlock(_:).

添加音效

因为音频文件很短,可以预先加载进来.在属性声明中添加一个新的字典属性,命名为sounds:

var sounds = [String: SCNAudioSource]()复制代码

下一步,在viewDidLoad下面添加两个方法:

func loadSound(name: String, path: String) {  if let sound = SCNAudioSource(fileNamed: path) {    sound.isPositional = false    sound.volume = 1    sound.load()    sounds[name] = sound  }}  func playSound(sound: String, node: SCNNode) {  node.runAction(SCNAction.playAudio(sounds[sound]!, waitForCompletion: false))}复制代码

第一个方法从指定目录加载音频文件并储存到sounds字典中.第二个方法播放储存在sounds字典中的方法.

在viewDidload() 中间添加下面代码:

loadSound(name: "GameOver", path: "HighRise.scnassets/Audio/GameOver.wav")loadSound(name: "PerfectFit", path: "HighRise.scnassets/Audio/PerfectFit.wav")loadSound(name: "SliceBlock", path: "HighRise.scnassets/Audio/SliceBlock.wav")复制代码

有好几个地方需要播放音效.在handleTap(_:) 中,在每一个检查玩家是否错失方块的if语句中,添加下面的代码:

playSound(sound: "GameOver", node: currentBoxNode)复制代码

在调用addNewBlock之后,添加一行:

playSound(sound: "SliceBlock", node: currentBoxNode)复制代码

滚动到checkPerfectMatch(_:),在两个if语句中分支中添加一行:

playSound(sound: "PerfectFit", node: currentBoxNode)复制代码

创建并运行---有音效的游戏更有意思了,对吧?

处理输赢条件

游戏如何结束呢?现在我们来处理这个问题!

进入Main.storyboard,拖拽一个新的按钮到视图中.改变文本的颜色为 #FF0000,文本内容Play.然后改变字体为Custom, Helvetica Neue, 66.

下一步,设置对齐方式align为中心对齐center,并固定底边constant为100.

拖拽引线到控制器命名为playButton.然后创建一个动作命名为playGame并写入以下代码:

playButton.isHidden = true    let gameScene = SCNScene(named: "HighRise.scnassets/Scenes/GameScene.scn")!let transition = SKTransition.fade(withDuration: 1.0)scnScene = gameScenelet mainCamera = scnScene.rootNode.childNode(withName: "Main Camera", recursively: false)!scnView.present(scnScene, with: transition, incomingPointOfView: mainCamera, completionHandler: nil)    height = 0scoreLabel.text = "\(height)"    direction = trueperfectMatches = 0    previousSize = SCNVector3(1, 0.2, 1)previousPosition = SCNVector3(0, 0.1, 0)    currentSize = SCNVector3(1, 0.2, 1)currentPosition = SCNVector3Zero    let boxNode = SCNNode(geometry: SCNBox(width: 1, height: 0.2, length: 1, chamferRadius: 0))boxNode.position.z = -1.25boxNode.position.y = 0.1boxNode.name = "Block\(height)"boxNode.geometry?.firstMaterial?.diffuse.contents = UIColor(colorLiteralRed: 0.01 * Float(height),  green: 0, blue: 1, alpha: 1)scnScene.rootNode.addChildNode(boxNode)复制代码

你注意到,你已经重置了游戏中的所有变量为默认值,并添加了第一个方块.

因为已经添加了第一块方块,移除viewDidLoad(_:) 中下面的代码,从声明blockNode到添加到场景中.

//1    let blockNode = SCNNode(geometry: SCNBox(width: 1, height: 0.2, length: 1, chamferRadius: 0))    blockNode.position.z = -1.25    blockNode.position.y = 0.1    blockNode.name = "Block\(height)"        //2    blockNode.geometry?.firstMaterial?.diffuse.contents =      UIColor(colorLiteralRed: 0.01 * Float(height), green: 0, blue: 1, alpha: 1)    scnScene.rootNode.addChildNode(blockNode)  复制代码

在刚才创建的方法下面定义一个新方法:

func gameOver() {    let mainCamera = scnScene.rootNode.childNode(      withName: "Main Camera", recursively: false)!        let fullAction = SCNAction.customAction(duration: 0.3) { _,_ in      let moveAction = SCNAction.move(to: SCNVector3Make(mainCamera.position.x,         mainCamera.position.y * (3/4), mainCamera.position.z), duration: 0.3)      mainCamera.runAction(moveAction)      if self.height <= 15 {        mainCamera.camera?.orthographicScale = 1      } else {        mainCamera.camera?.orthographicScale = Double(Float(self.height/2) /           mainCamera.position.y)      }    }        mainCamera.runAction(fullAction)    playButton.isHidden = false  }复制代码

这里,你缩放摄像机镜头来露出整个塔.最后,设置play按钮为可见,这样玩家就可以开始一个新游戏.

在handleTap(_:) 内部,在完全错失方块的if语句中,调用gameover(),放在return语句之前,两个if语句里面都放:

gameOver()复制代码

编译运行.当你失败时,就能重新开始一个新游戏了.

启动图片

游戏启动时会有难看的白屏.打开LaunchScreen.storyboard并拖拽进一个图像视图.四周对齐屏幕:

更改图片为Gradient.png

现在我们已经将白屏替换为了漂亮的渐变图!

恭喜你,你已经完成了!你可以从这里下载最终完成版

end