iFIERO -- (一) 宇宙大战 SPACE BATTLE

2018-06-25 本文已影响4人布袋的世界

开始游戏教程前，首先介绍一下SpriteKit是什么?
SpriteKit提供了一个图形渲染和动画的基础结构，你可以使用它让任意类型的纹理图片或者精灵动起来。SpriteKit使用渲染循环，利用图形硬件渲染动画的每一帧。

SpriteKit框架渲染每一帧的周期流程原理图

在iOS传统的view的系统中，view的内容被渲染一次后就将一直等待，直到需要渲染的内容发生改变（比如用户发生交互，view的迁移等）的时候，才进行下一次渲染。这主要是因为传统的view大多工作在静态环境下，并没有需要频繁改变的需求。而对于SpriteKit来说，其本身就是用来制作大多数时候是动态的游戏的，为了保证动画的流畅和场景的持续更新，在SpriteKit中view将会循环不断地重绘。

动画和渲染的进程是和SKScene对象绑定的，只有当场景被呈现时，这些渲染以及其中的action才会被执行。SKScene实例中，一个循环按执行顺序包括：

每一帧开始时，SKScene的-update:方法将被调用，参数是从开始时到调用时所经过的时间。在该方法中，我们应该实现一些游戏逻辑，包括AI，精灵行为等等，另外也可以在该方法中更新node的属性或者让node执行action
在update执行完毕后，SKScene将会开始执行所有的action。因为action是可以由开发者设定的（还记得runBlock:么），因此在这一个阶段我们也是可以执行自己的代码的。

在当前帧的action结束之后，SKScene的-didEvaluateActions将被调用，我们可以在这个方法里对结点做最后的调整或者限制，之后将进入物理引擎的计算阶段。

然后SKScene将会开始物理计算，如果在结点上添加了SKPhysicsBody的话，那么这个结点将会具有物理特性，并参与到这个阶段的计算。根据物理计算的结果，SpriteKit将会决定结点新的状态。

然后-didSimulatePhysics会被调用，这类似之前的-didEvaluateActions。这里是我们开发者能参与的最后的地方，是我们改变结点的最后机会。
一帧的最后是渲染流程，根据之前设定和计算的结果对整个呈现的场景进行绘制。完成之后，SpriteKit将开始新的一帧。

在了解了一些SpriteKit的基础概念后，就跟着iFIERO来创建一个简单的游戏作为开启游戏入门之旅吧。

此《宇宙大战 Space Battle》教程共分为三个章节系列，

(一)宇宙大战 Space Battle — 新建场景Scene、导入各个SpriteNode精灵、Particle粒子节点及建立背景音乐(你正在此处进行学习)

(二)宇宙大战 Space Battle — 创建无限循环的背景Endless、监测精灵之间的物体碰撞及物理引擎Accleroation

(三)宇宙大战 Space Battle — 各个场景SCENE之间的切换、利用UserDefaults统计分数

你将在此教程中的三个系列当中学到如下的技能：

SpaceBattle 宇宙大战在此游戏中您将获得如下技能：

1、LaunchScreen 学习如何设置游戏启动画面;

2、Scenes 学习如何切换不同的场景主菜单+游戏场景+游戏结束场景;

3、Accleroation 利用重力加速度让飞船左右移动;

4、Endless Background 无限循环背景;

5、Scene Edit 直接使用可见即所得操作;

6、UserDefaults 保存游戏分数、最高分;

7、Random 利用可复用的随机函数生成Enemy;

8、Background Music 如何添加背景音乐;

9、Particle 粒子爆炸特效;

应用以上各项SpriteKit与Swift技能，你开发出来的最终手机游戏的效果为如下所示：

image

一、教程开始 Getting Started

游戏开始前，请下载本教程的初始项目(http://www.ifiero.com/uploads/SpaceBattle-01Starter.zip)。本游戏是由SpriteKit框架、Swift语言，XCODE开发工具进行开发的。

1、打开XCODE(请用正式版,非Beta版),选择Create a new Xcode project,选择iOS->Game,输入Product Name(这里命名为SpaceBattle),开发语言Language选择Swfit,点击Next,工程即新建完毕

xcode.png

iosGame.png

03.png

2、选择Genrnal面板,因为此Space Battle游戏为竖屏游戏,所以去除勾选Deployment Info -> Device Orientation中的Landscape Left 与Landscape Right,我们不需要横屏效果

04.png

3、删除XCode左侧目录中的 Action.sks(暂时没有用到)，修改GameScene.swift及GameViewController.swift的相关代码

删除Action.sks

修改GameScene.swift的代码

设置Scene的尺寸为CGSize(x:1536,y:2048)

二、可视化编辑场景 Introducing the Sprite Kit Visual Editor

1.首先需要编辑场景.sks文件，打开GameScene.sks文件，设置场景的尺寸为iPAD4:3的比例(W:1536,H:2048)，并删除场景中的文字。

点击Color面板,可修改Scene的场景背景颜色

2.拖动音乐文件到导航栏navigator->SpaceBattle文件夹，勾选Copy items if needed,Added folders选择Create groups,Add to targets勾选SpaceBattle

拖动音乐文件

3.拖动游戏工程所需要的图片到Assets.xcassets文件夹

Assets.xcassets

4.资源导入后，左侧的导航栏navigator如下图所示

左侧的导航栏navigator样式

5.Assets图库中的图片尺寸分为1x,2x,3x，你只需设置1x的图片尺寸大小即可，SpriteKit会自动根据你运行的device设备尺寸(iPhoneX,iPhone,iPhone Plus,iPad)进行相应比例的调整。

Assets图库中的图片尺寸分为1x,2x,3x,只需设置1x图片即可

非常的棒，你已经学会如何导入Mac电脑中的资源文件(图片、音乐、粒子)到SpaceBattle游戏工程内中了。
那么，现在我们就来学习如何新建SpriteKit精灵节点吧！

6.选择左侧导航栏Navigator的GameScene.sks，直接拖动一个Color Sprite到场景中，选中精灵，设置Position(0,0)，修改texture为BG_SpaceBattle_planet(AssetsAssets.xcassets文件夹的名称),并命名精灵节点的名称 Name为bg。

拖动一个Color Sprite到场景中

命名精灵节点的名称 Name为bg

7.现在你可以运行模拟器(XCode -> Product -> Run)，看看你的游戏是否正确显示你刚刚建立的精灵节点。

选择device设备

Run运行

Simulator模拟器

棒棒哒! 你已学会了如何在场景中建立精灵节点及如何运行模拟器进行调试！

三、SpriteKit Physics 物理引擎

1.Spritekit提供了一个默认的物理模拟系统，用来模拟真实物理世界，可以使得编程者将注意力从力学碰撞和重力模拟的计算中解放出来，通过简单地代码来实现物理碰撞的模拟，而将注意力集中在更需要花费精力的地方。现在，让我们来学习这个系统的使用吧。

首先需要认识两个类，一个是场景scene的属性类SKPhysicsWorld，这个类基于场景，只能被修改但是不能被创建，这个类负责提供重力和检查碰撞（碰撞需要实现SKPhysicsContactDelegate代理协议），另一个就是SKPhysicsBody类，你可以对你的SKNode节点添加物理体属性，来让他们可以参与物理模拟的相关计算。

SpriteKit SKPhysicsBody类物理体的属性图表

属性	功能	图示
mass	它决定力是如何影响主体,以及当主体参与碰撞时它有多大的动量,以千克为单位	mass
friction	它决定了物体的光滑程度.取值范围为从0.0(表面光滑,物体滑动很顺畅,就像小冰块似的)到1.0(在表面滑动是,物体会很快停止)	--
linearDamping	物体的线性阻尼.取值范围为0.0(速度从不衰减)到1.0(速度立即衰减).默认值为0.1该属性被用于模拟水流或者空气的阻力.	linearDamping
angularDamping	物体的角速度阻尼.取值范围为0.0(速度从不衰减)到1.0(速度立即衰减).默认值为0.1该属性被用于模拟水流或者空气的阻力.	angularDamping
restitution	描述了当物理实体从另外一个物体上弹出时,还拥有多少能量.基本上我们称之为"反弹力".它的取值介于0.0(完全不反弹)到1.0(和物体碰撞反弹是所受的力与刚开始碰撞时的力的大小相同)之间.默认值为0.2	restitution
density	物体的密度,以千克每立方米为单位.密度是根据单位体积的质量来定义的.密度越高,体积越大,物体也就会越重.密度的默认值为1.0	--
affectedByGravity	设置物体是否受重力的影响.所有的物体默认的情况都是受重力影响,但是开发者可以简单的吧这个标记设置为NO,使其不受重力影响.	affectedByGravity
allowsRotation	设置物体是否受到一个旋转力的影响,默认为YES,如果该值设置为NO,物理体将忽略施加在它身上所有的力	--
resting	设置物理体是否在休息.物理引擎对于一段时间内没有移动过的物体做了一个优化,把他们标记为"正在休息(resting)",这样,物理引擎就不需要对它们进行计算了.如果你想要手动的唤醒一个正在休息的物体,简单的把resting设置为NO即可	--
categoryBitMask	一个16进制数,定义了物体的类别.场景中每一个物理体都可以分配到超过32个不同的种类里面,每个对应位中的值	categoryBitMask
collisionBitMask	一个16进制数,定义哪种类别的物理体可以与之发生碰撞.当两个物体相关联的时候,就可能发生一个碰撞.这个物体的位相对于其他物体的类别做一个逻辑上的加法操作.如果结果是一个非零的值,则该物体收到碰撞的影响	--
contactTestBitMask	一个16进制数,两个物体碰撞后发出通知 didBegin可接收到通知	--
usesPreciseCollisionDetection	设置物体是否使用更精准的碰撞算法.默认情况下,除非确实有必要,Sprite Kit并不会启动精确的冲突检测,因为这样运行效率更高.但是不启动精确的冲突检测会有一个副作用,如果一个物体移动的非常快(比如一个子弹),它可能会直接穿过其他物体.如果这种情况确实发生了,你就应该尝试启动更精准的冲突检测了	--
velocity	物理体的速度矢量	velocity
angularVelocity	物理体的角速度.角速度是一个围绕着一个轴矢量(0.0,0.0,1.0)的速度,单位是弧度每秒	angularVelocity

以上图表感谢简书作者的收集整理：https://www.jianshu.com/p/4046bab3a63d

2.对SpriteKit PhysicsBody类的基础的概念了解后，我们现在就来新建player玩家飞船节点playerNode还有alien外星飞船精灵节点，并设置他们的物理属性。

新建player玩家飞船节点属性面板中Sprite Name命名为playerNode

class GameScene: SKScene,SKPhysicsContactDelegate {
    
    private var playerNode:SKSpriteNode!  /// 玩家 宇宙飞船
    
    override func didMove(to view: SKView) {
        
        physicsWorld.gravity = CGVector(dx: 0, dy: -9.8) /// 建立物理世界 重力向下
        physicsWorld.contactDelegate = self              /// 碰撞接触代理为当前scene (GameScene)
        setupPlayer()
    }
    
    //MARK: - 玩家 宇宙飞船
    func setupPlayer(){
        playerNode = childNode(withName: "playerNode") as! SKSpriteNode
        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?.collisionBitMask   = PhysicsCategory.None      /// 碰撞后要弹开吗
        playerNode.physicsBody?.contactTestBitMask = PhysicsCategory.Alien     /// 碰撞后发出通知
    }
    
    override func update(_ currentTime: TimeInterval) {
        // Called before each frame is rendered
    }
}

随机生成alien精灵节点

  //MARK: -  生成随机Alien
    @objc func spawnAlien() {
        // 1 or 2
        let i = Int(CGFloat(arc4random()).truncatingRemainder(dividingBy: 2) + 1)
        
        let imageName = "Enemy0\(i)"
        let alien  = SKSpriteNode(imageNamed: imageName)
        alien.anchorPoint = CGPoint(x: 0.5, y: 0.5)
        alien.zPosition   = 1
        alien.name = "Alien"
        var xPosition:CGFloat = 0.0
        // 生成随机的x-Axis轴的位置
        xPosition = CGFloat.random(min: -self.frame.size.width+alien.size.width, max: self.frame.size.width - alien.size.width)
        alien.position = CGPoint(x: xPosition, y: self.frame.size.height + alien.size.height * 2)
        self.addChild(alien)
        // 物理体 PhysicsBody
        alien.physicsBody = SKPhysicsBody(circleOfRadius: alien.size.width / 2)  /// 设置物理身体
        alien.physicsBody?.affectedByGravity = false /// 不受重力影响，自定义飞船移动速度;
        alien.physicsBody?.categoryBitMask   = PhysicsCategory.Alien /// 1.设置唯一属性
        alien.physicsBody?.contactTestBitMask = PhysicsCategory.BulletBlue | PhysicsCategory.SpaceShip /// 2.和哪些节点Node发生碰撞后发出通知
        alien.physicsBody?.collisionBitMask   = PhysicsCategory.None /// 3.碰撞后是否弹开
        
        let duration   = CGFloat.random(min: CGFloat(1.0), max: CGFloat(3.8))  ///随机函数 返回二个数之间的随机数
        let actionDown = SKAction.move(to: CGPoint(x: xPosition, y: -self.frame.size.height), duration: TimeInterval(duration))
        alien.run(SKAction.sequence([actionDown,
                                     SKAction.run({
                                        alien.removeFromParent() // 移除节点;
                                     })]))
        
    }

CGFloat.random 拓展函数返回二个数之间的随机数

import CoreGraphics
import SpriteKit

public extension CGFloat {
    
    #if !(arch(x86_64) || arch(arm64))
    func sqrt(a: CGFloat) -> CGFloat {
    return CGFloat(sqrtf(Float(a)))
    }
    #endif
    
    public static func random() -> CGFloat {
        return CGFloat(Float(arc4random()) / 0xFFFFFFFF)
    }
    
    public static func random(min: CGFloat, max: CGFloat) -> CGFloat {
        assert(min < max)
        return CGFloat.random() * (max - min) + min
    }
    
}

在override func didMove(to view: SKView) {}内应用Timer.scheduledTimer间隔0.5秒生成Alien

// spawnAlien()
        Timer.scheduledTimer(timeInterval: TimeInterval(0.5), target: self, selector: #selector(GameScene.spawnAlien), userInfo: nil, repeats: true)

现在Command+R 运行工程下(或选择XCODE -> Product-> Run),你在模拟器中应可以看到源源不断的alien外星飞船正向下俯冲

alien外星飞船正向下俯冲

3.生成子弹及粒子效果

 // MARK: - 生成子弹; 点击屏幕后才发射
    func spawnBulletAndFire(){
        /// 子弹
        let bulletNode = SKSpriteNode(imageNamed: "BulletBlue")
        bulletNode.position.x = playerNode.position.x
        // 子弹的Y轴位置 因为playNode的AnchorPoit位于飞船中心 所以子弹发射时的瞬间位置位于飞船正中心,要加上飞船的半径，位于枪口;
        bulletNode.position.y = playerNode.position.y + playerNode.size.height / 2
        bulletNode.zPosition = 1
        self.addChild(bulletNode)
        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
        bulletNode.physicsBody?.usesPreciseCollisionDetection = true ///子弹飞速运动，设置探测精细碰撞
        
        /// 把子弹往上移出屏幕
        let moveTo = CGPoint(x: playerNode.position.x, y: playerNode.position.y + self.frame.size.height)
        
        /*
         * 粒子效果
         * 1.新建一个SKNODE => trailNode
         * 2.新建粒子效果SKEmitterNode,设置tragetNode = trailNode
         * 3.子弹加上emitterNode
         */
        let trailNode = SKNode()
        trailNode.zPosition = 1
        trailNode.name = "trail"
        addChild(trailNode)
        
        let emitterNode = SKEmitterNode(fileNamed: "ShootTrailBlue")! // particles文件夹存放粒子效果
        emitterNode.targetNode = trailNode  /// 设置粒子效果的目标为trailNode => 跟随新建的trailNode
        bulletNode.addChild(emitterNode)    /// 在子弹节点Node加上粒子效果;
        
        bulletNode.run(SKAction.sequence([
            SKAction.move(to: moveTo, duration: TimeInterval(0.5)),
            SKAction.run({
                bulletNode.removeFromParent() /// 移除 子弹bulltedNode
                trailNode.removeFromParent()  /// 移除 trailNode
            })]))
    }

我们将在第二章节学习飞船子弹的发射以及粒子效果的知识

四、到此，此章节就接近尾声了

我们已经学会了很多技能，包括如何新建工程，如何建立Sprite精灵节点，还有如何应用SpriteKit Physics物理引擎。你可以在此下载此章节的工程完整代码。(http://www.iFIERO.com/uploads/SpaceBattle-01final.zip)

五、更多内容

在下一章节当中，(二)宇宙大战 Space Battle — 创建无限循环的背景Endless、监测精灵之间的物体碰撞及物理引擎Accleroation，我们将学习如何监测SpriteKit Physics物理之间碰撞，如何销毁对象，如何监测屏幕Scene的点击事件以及物理引擎Accleroation的相关知识。

请注意，此《宇宙大战 Space Battle》教程共分为三个章节系列：

(一)宇宙大战 Space Battle — 新建场景Scene、导入各个SpriteNode精灵、Particle粒子节点及建立背景音乐(你正在此处进行学习)

(二)宇宙大战 Space Battle — 创建无限循环的背景Endless、监测精灵之间的物体碰撞及物理引擎Accleroation

(三)宇宙大战 Space Battle — 各个场景SCENE之间的切换、利用UserDefaults统计分数

更多游戏教学：iFIERO.COM -- 开源手机游戏教程网,让手机游戏开发变得简单!

iFiero.com

iFIERO -- (一) 宇宙大战 SPACE BATTLE

猜你喜欢

热点阅读