iFIERO - (二)宇宙大战 Space Battle -- SpriteKit 无限循环背景Endless、SpriteKit物理碰撞、CoreMotion加速计

本节主要讲解如何创建无限循环Endless的星空背景(如下图)、玩家飞船发射子弹，监测子弹击外星敌机的SpriteKit物理碰撞并消灭敌机，以及应用iOS的CoreMotion加速计移动飞船躲避外星敌机(加速计须用真机测试)。

 

Space Battle

此《宇宙大战 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设备的加速计所使用的三轴坐标系统如下：

 

iOS设备的加速计所使用的三轴坐标系统

从上图上可以看出：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应用程序获取加速度数据(本游戏只用到加速计)

 

玩家飞船倾斜设备来调用加速计躲闪外星敌机

为了移动玩家飞船，在这儿你将会用到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流程原理图

接着，我们在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的星空背景

 

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)
    }

 

二个SpriteNode同时向下移动

当红色框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 = 2048，黄色框bgNode2.position.y = 0

此时黄色框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来监测碰撞：

 

物理体发生碰撞

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