iFIERO - (二)宇宙大战 Space Battle -- SpriteKit 无限循环背景Endless、SpriteKit物理碰撞、CoreMotion加速计
本节主要讲解如何创建无限循环Endless的星空背景(如下图)、玩家飞船发射子弹,监测子弹击外星敌机的SpriteKit物理碰撞并消灭敌机,以及应用iOS的CoreMotion加速计移动飞船躲避外星敌机(加速计须用真机测试)。
此《宇宙大战 Space Battle》教程共分为三系列,
(一)宇宙大战 Space Battle -- 初始建立工程及场景Scene、导入各个SpriteNode精灵、Particle粒子节点及建立背景音乐
(二)宇宙大战 Space Battle -- 宇宙大战 Space Battle -- 无限循环背景Endless、SpriteKit物理碰撞、CoreMotion加速计(你正在此处进行学习)
(三)宇宙大战 Space Battle -- 各个场景SCENE之间的切换、利用UserDefaults统计分数
我们先了解一下何为iOS加速计和陀螺仪
iOS系统提供了加速计和陀螺仪支持,如果iOS设备提供了这些硬件支持,iOS即可通过CoreMotion框架提供的加速计来获取设备当前的加速度数据、陀螺仪数据、所处的磁场以及设备的方位等信息;
对于iOS应用开发者来说,开发传感器应用十分简单,CoreMotion框架的核心API是CMMotionManager,开发者只要创建一个CMMotionManager对象,接下来即可采用定时器周期性地从CMMotionManager对象获取加速度数据、陀螺仪数据等。
一、iOS支持的加速计和陀螺仪
加速计可以测出设备的加速度和重力,内置的陀螺仪还可以获取设备的转动,这些数据都通过CMMotionManager对象来获取。而且采用完全类似的方式来获取设备的加速度数据、陀螺仪数据、磁场数据等。
1、iOS加速计和陀螺仪的理论基础
iOS加速计是一个三轴加速计,这意味着它可以检测三维空间中的运动和重力,因此加速计不仅可以获取用户握持手机的方向(向上还是向下),而且可以感知手机正面向下还是向上。
加速计可以测量设备在特定方向的加速度(使用重力g作为单位),当加速度返回值为1.0时,表明设备在特定方向上感知到1g。
iOS设备的加速计所使用的三轴坐标系统如下:
![](https://upload-images.jianshu.io/upload_images/3896436-7efcb9c35b913185.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/678)
从上图上可以看出:iOS设备的加速计的三轴坐标系统的X、Y、Z轴定义如下:
-
沿着手机屏幕顶部向上是Y轴正方向,向下是Y轴负方向;
-
当手机顶部朝上时,沿着手机屏幕向右是X轴正方向,向左是X轴负方向;
-
正对手机时,垂直屏幕向外是Z轴正方向,垂直屏幕向里是Z轴负方向;
当手机静止不动时,地球引力将会给予手机1g的加速度。典型的,当用户垂直握持手机切顶部向上时,手机即可检测到大约-1g的加速度:如果用户以45度角握持手机,则1g的加速度将会平均分配到X、Y两个轴上。如果检测到加速度的值远大于1g,即可判断该设备突然发成了运动,比如设备被摇动、坠落等,此时加速度即可在一个或多个轴上检测到较大值。
除了加速度数据之外,iOS还可以获取陀螺仪数据,陀螺仪数据则可表示设备围绕各坐标轴的转动。例如,把手机平放在桌面上,手机在各方向的加速度基本不会改变,此时手机将会检测到Z轴方向有大约-1g的加速度。如果此时对手机进行旋转,手机的加速度依然不会有明显的改变,但手机陀螺仪将会返回绕Z轴发生转动。如果用户垂直握持手机,并绕垂直轴转动,此时手机检测到的加速度值依然不会发生改变,但手机陀螺仪将会检测到绕Y轴发生的转动。
简单来说,陀螺仪数据用于检测设备绕X、Y、Z轴转动时的速度,转动越快,陀螺仪返回的数据越大。iOS还可以获取周围磁场在X、Y、Z轴的强度,磁场强度一微特斯拉为单位。
总结出来,iOS的CMMotionManager大致可获取3种数据:
-
加速度数据:该数据通过CMAccelerometerData对象来表示。该对象只有一个CMAcceleration结构体类型的acceleration属性,该结构体属性值包含x、y、z三个字段,分别代表设备在X、Y、Z轴方向检测到的加速度值;
-
陀螺仪数据:该数据通过CMGyroData对象来表示。该对象只有一个CMRotationRate结构体类型的rotationRate属性,该结构体属性值包含x、y、z三个字段,分别代表设备围绕X、Y、Z轴转动的速度;
-
磁场数据:该数据通过CMMagnetometerData对象来表示。该对象只有一个CMMagneticField结构体类型的magneticField属性,该结构体属性值包含x、y、z三个字段,分别代表设备在X、Y、Z轴方向检测到的磁场强度,以微特斯拉为单位。
除此之外,CMAccelerometerData、CMGyroData、CMMagnetometerData有一个公共的弗雷:CMLogItem,该弗雷定义了timestamp属性,这意味着不管是加速度数据、陀螺仪数据、磁场数据,都可通过timestamp属性来访问程序得到的该数据的时间。
2、iOS应用程序获取加速度数据(本游戏只用到加速计)
![](https://upload-images.jianshu.io/upload_images/3896436-a26a2a7ecb0c0d14.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
为了移动玩家飞船,在这儿你将会用到iPhone的加速计。很遗憾,在similator模拟器上不能用加速计,所以你得在真机上做测试。
你通过倾斜设备来调用加速计。这就是我们在第一节课时,限制设备让它只能是Portait状态的原因(去掉勾选Upside Down)。如果你在倾斜的时候屏幕自动旋转了那还玩毛。
由于有Core Motion的存在,使用加速器变得非常简单,在update()方法,游戏帧数每次刷新的时候都被调用。
首先,添加下面的代码到GameScene.swift里:
import CoreMotion
接着,添加下面的属性:
let motionManager = CMMotionManager() // 加速度计管理器
var xAcceleration:CGFloat = 0 // 存放x左右移动的加速度变量
var yAcceleration:CGFloat = 0
你需要这些属性来追踪加速计的数据。你仅仅只需要追踪x和y轴的信息,z轴在这个游戏里用不到。
接着,添加下面的方法:
//MARK: -- 开启加速度计
func startMonitoringAcceleration(){
if motionManager.isAccelerometerAvailable {
updateAccleration() /// 获取加速度计 } }
//MARK: -- 停止Acceleration
func stopMonitoringAcceleration(){
if motionManager.isAccelerometerAvailable && motionManager.isAccelerometerActive {
motionManager.stopAccelerometerUpdates()
}
}
上述方法,让加速计在可以用的情况下开启和停止。
接着我们在didMove(to view: SKView)添加下面添加代码
startMonitoringAcceleration() /// 开启手机加速计感应
对于停止加速计,合适的地方是一个类型的deinit方法:
stopMonitoringAcceleration()
获取加速计:
func updateAccleration(){
motionManager.accelerometerUpdateInterval = 0.2 /// 感应时间
motionManager.startAccelerometerUpdates(to: OperationQueue.current!) { (data, error) in
///1. 取得data数据;
guard let accelerometerData = data else {
return
}
///2. 取得加速度
let acceleration = accelerometerData.acceleration
///3. 更新XAcceleration的值
let filterFactor:CGFloat = 0.75 //fiter的加入是很有必要的,这样处理一下得到的数据更加平滑
self.xAcceleration = CGFloat(acceleration.x) * filterFactor + self.xAcceleration * (1 - filterFactor)
self.yAcceleration = CGFloat(acceleration.y) * filterFactor + self.yAcceleration * (1 - filterFactor)
}
}
接着,我们在SpriteKit框架渲染每一帧的周期Loop中的didSimulatePhysics调用物理特性让飞船改变位置,代码如下:
//MARK: - 手机加速度计感应,在SpriteKit框架渲染每一帧的周期Loop中的didSimulatePhysics调用物理特性让飞船改变位置
override func didSimulatePhysics() {
/// 取得xAcceleration的加速度
/// 速度乘以时间得到应该移动的距离,更新现在飞船应该在的位置
self.playerNode.position.x += self.xAcceleration * 50 /// * 50表示时间
self.playerNode.position.y += self.yAcceleration * 50
// 让player => SpaceShip在屏幕之间滑动 x
// X-Axis X轴水平方向 最小值
// 如果player的x-axis最小值 < player飞船的size.with 1/2 设飞船的最小值为 size.with/2
if self.playerNode.position.x < -self.frame.size.width / 2 + self.playerNode.size.width {
self.playerNode.position.x = -self.frame.size.width / 2 + self.playerNode.size.width
}
// 最大值
if self.playerNode.position.x > self.frame.size.width / 2 - self.playerNode.size.width {
self.playerNode.position.x = self.frame.size.width / 2 - self.playerNode.size.width
}
// Y-Axis Y轴方向
if self.playerNode.position.y > -self.playerNode.size.height {
self.playerNode.position.y = -self.playerNode.size.height
}
if self.playerNode.position.y < -self.frame.size.height / 2 + self.playerNode.size.height {
self.playerNode.position.y = -self.frame.size.height / 2 + self.playerNode.size.height
}
}
最终,didSimulatePhysics()将会被调用来更新飞船的位置。
用真机跑一下你的程序吧。你现在已经可以通过倾斜设备来调用加速计来让飞船运动啦!
二、如何创建无限循环Endless的星空背景
红色框中的节点bgNode1,SpriteNode的名称Name BG1 位置为Position(0,0)
bgNode1 = childNode(withName: "BG1") as! SKSpriteNode
黄色框为的节点bgNode2, SpriteNode的名称Name BG2 位置为Position(0,2048)
bgNode2 = childNode(withName: "BG2") as! SKSpriteNode
二个SpriteNode同时向下移动
func updateBackground(deltaTime:TimeInterval){
// 下移
bgNode1.position.y -= CGFloat(deltaTime * 300)
bgNode2.position.y -= CGFloat(deltaTime * 300)
}
override func update(_ currentTime: TimeInterval) {
// 每Frame的时间差
if lastUpdateTimeInterval == 0 {
lastUpdateTimeInterval = currentTime
}
deltaTime = currentTime - lastUpdateTimeInterval
lastUpdateTimeInterval = currentTime
// endless 无限循环星空背景
updateBackground(deltaTime: deltaTime)
}
当红色框BG1的位置bgNode1.position.y < bgNode1.size.height 的高度(即屏幕的height),把bgNode1移到之间黄色框的位置
/// 第一个背景node
if bgNode1.position.y < -bgNode1.size.height {
bgNode1.position.y = bgNode2.position.y + bgNode2.size.height
}
此时黄色框bgNode2.position.y = 0 位于屏幕的正中央
红色框bgNode1.position.y = 2048 取代之间花黄色框的位置,同理,黄色框再次向下移动时,当黄色框BG2的位置bgNode2.position.y < bgNode2.size.height 的高度(即屏幕的height),把bgNode2
移到之间当前红色框(bgNode1)的位置,代码如下
/// 第二个背景node
if bgNode2.position.y < -bgNode2.size.height {
bgNode2.position.y = bgNode1.position.y + bgNode1.size.height
}
完整的代码如下:
override func update(_ currentTime: TimeInterval) {
// 每Frame的时间差
if lastUpdateTimeInterval == 0 {
lastUpdateTimeInterval = currentTime
}
deltaTime = currentTime - lastUpdateTimeInterval
lastUpdateTimeInterval = currentTime
updateBackground(deltaTime: deltaTime) // endless 无限循环星空背景
}
/// command + option + <- (箭头) 折叠 || command + option + -> (箭头) 打开
func updateBackground(deltaTime:TimeInterval){
// 下移
bgNode1.position.y -= CGFloat(deltaTime * 300)
bgNode2.position.y -= CGFloat(deltaTime * 300)
// 第一个背景node
if bgNode1.position.y < -bgNode1.size.height {
bgNode1.position.y = bgNode2.position.y + bgNode2.size.height
}
// 第二个背景node
if bgNode2.position.y < -bgNode2.size.height {
bgNode2.position.y = bgNode1.position.y + bgNode1.size.height
}
}
三、SpriteKit物理碰撞
物理碰撞发生在:玩家飞船发射子弹击中外星敌机、发星敌机撞到玩家飞船
SpriteKit SKPhysicsBody类物理体的属性图表:
http://www.ifiero.com/index.php/archives/166
1.Spritekit物理节点categoryBitMask属性
/// 玩家飞船
playerNode.physicsBody = SKPhysicsBody(texture: SKTexture(imageNamed: "Player"), size: SKTexture(imageNamed: "Player").size())
playerNode.physicsBody?.affectedByGravity = false // 不受物理世界的重力影响
playerNode.physicsBody?.isDynamic = true
playerNode.physicsBody?.categoryBitMask = PhysicsCategory.SpaceShip
playerNode.physicsBody?.contactTestBitMask = PhysicsCategory.Alien ///碰撞时发出通知
playerNode.physicsBody?.collisionBitMask = PhysicsCategory.None
/// 子弹;
bulletNode.physicsBody = SKPhysicsBody(circleOfRadius: bulletNode.size.width / 2)
bulletNode.physicsBody?.affectedByGravity = false // 子弹不受重力影响;
bulletNode.physicsBody?.categoryBitMask = PhysicsCategory.BulletBlue
bulletNode.physicsBody?.contactTestBitMask = PhysicsCategory.Alien
bulletNode.physicsBody?.collisionBitMask = PhysicsCategory.None
/// 外星飞船
// 1.设置物理身体
alien.physicsBody = SKPhysicsBody(circleOfRadius: alien.size.width / 2)
// 不受重力影响,自定义飞船移动速度;
alien.physicsBody?.affectedByGravity = false
// 2.设置唯一属性
alien.physicsBody?.categoryBitMask = PhysicsCategory.Alien
// 3.和哪些节点Node发生碰撞后发出通知
alien.physicsBody?.contactTestBitMask = PhysicsCategory.BulletBlue | PhysicsCategory.SpaceShip
alien.physicsBody?.collisionBitMask = PhysicsCategory.None
2.用didBegin来监测碰撞:
![](https://upload-images.jianshu.io/upload_images/3896436-08a3276a3070a13c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
didBegin接收playerNode.physicsBody.contactTestMask的碰撞通知:
playerNode.physicsBody?.contactTestBitMask = PhysicsCategory.Alien
//MARK:- 发生碰撞时接收到通知
func didBegin(_ contact: SKPhysicsContact) {
let contactMask = contact.bodyA.categoryBitMask | contact.bodyB.categoryBitMask
switch contactMask {
/// 子弹vs外星人
case PhysicsCategory.Alien | PhysicsCategory.BulletBlue:
bulletHitAlien(nodeA: contact.bodyA.node as! SKSpriteNode,nodeB: contact.bodyB.node as! SKSpriteNode)
/// 外星人Alien撞击到飞船
case PhysicsCategory.Alien | PhysicsCategory.SpaceShip:
alienHitSpaceShip(nodeA: contact.bodyA.node as! SKSpriteNode, nodeB: contact.bodyB.node as! SKSpriteNode)
default:
break
}
}
我们在函数bulletHitAlien()和alienHitSpaceShip()不用判断标识的大小,即判断 PhyscisCategory.Alien < PhysicsCategory.BulletBlue或者PhyscisCategory.Alien > PhysicsCategory.BulletBlue,但还是要了解一下哪个是nodeA及哪个是nodeB为好,因为接下来的游戏都要运用到。
我们之前定义的struct如下:
struct PhysicsCategory {
// static let BulletRed :UInt32 = 0x1 << 1 // Alien的子弹
static let BulletBlue:UInt32 = 0x1 << 2
static let Alien :UInt32 = 0x1 << 3
static let SpaceShip :UInt32 = 0x1 << 4
static let None :UInt32 = 0
}
根据上面的struct,物理标识 PhysicsCategory.BulletBlue < PhysicsCategory.Alien,即在didBegin:
func didBegin(_ contact: SKPhysicsContact) {
let bodyA:SKPhysicsBody
let bodyB:SKPhysicsBody
if contact.bodyA.categoryBitMask < contact.bodyB.categoryBitMask {
bodyA = contact.bodyA
bodyB = contact.bodyB
}else{
bodyA = contact.bodyB
bodyB = contact.bodyA
}
/// bodyA.categoryBitMask == PhysicsCategory.BulletBlue ///返回true
/// bodyB.categoryBitMask == PhysicsCategory.Alien ///返回true
}
if bodyA.categoryBitMask == PhysicsCategory.BulletBlue && bodyB.categoryBitMask == PhysicsCategory.Alien {
/// print("执行代码")
}
于是,我们就可以根据categoryBitMask物理标识来获得碰撞中的物理体了。
我们继续函数bulletHitAlien()和alienHitSpaceShip()的代码:
// MARK: 子弹vs外星人
func bulletHitAlien(nodeA:SKSpriteNode,nodeB:SKSpriteNode){
/// 判断哪个是子弹节点bulletNode,碰撞didBegin没有比较大小时,则会相互切换,也就是A和B互相切换;
if nodeA.physicsBody?.categoryBitMask == PhysicsCategory.BulletBlue {
nodeA.removeAllChildren() /// 移除所有子效果 粒子效果emitter(非常重要)
nodeA.isHidden = true // 子弹隐藏
nodeA.physicsBody?.categoryBitMask = 0 // 设置子弹不会再发生碰撞
nodeB.removeFromParent() // 移除外星人
}else if nodeB.physicsBody?.categoryBitMask == PhysicsCategory.BulletBlue {
nodeA.removeFromParent() // 移除外星人
nodeB.removeAllChildren()
nodeB.isHidden = true
nodeB.physicsBody?.categoryBitMask = 0
}
}
// MARK: 外星人Alien撞击到飞船
func alienHitSpaceShip(nodeA:SKSpriteNode,nodeB:SKSpriteNode){
if (nodeA.physicsBody?.categoryBitMask == PhysicsCategory.Alien || nodeB.physicsBody?.categoryBitMask == PhysicsCategory.Alien) && (nodeA.physicsBody?.categoryBitMask == PhysicsCategory.SpaceShip || nodeB.physicsBody?.categoryBitMask == PhysicsCategory.SpaceShip) {
nodeA.removeFromParent()
nodeB.removeFromParent()
}
}
很棒,我们完成了物理体碰撞,现在运行一下COMMAND+R(请用真机噢,你才可以躲避外星敌机),你就可以看到当二个物理体发生碰撞后,它们都从场景Scene中移除了。
在接下来的下一节,我们就学习当玩家飞船被敌机击中后,游戏结束时如何进行场景切换,记录击中外星敌机的架次了(游戏的分数),还用使用UserDefaults记录游戏最高分 ,当然,还有使用Particle粒子效果给游戏增加酷酷的效果 _。
更多游戏教程:http://www.iFIERO.com
Github游戏代码传送门:https://github.com/apiapia/SpaceBattleSpriteKitGame