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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342

推荐阅读更多精彩内容