开始游戏教程前,首先介绍一下SpriteKit是什么?
SpriteKit提供了一个图形渲染和动画的基础结构,你可以使用它让任意类型的纹理图片或者精灵动起来。SpriteKit使用渲染循环,利用图形硬件渲染动画的每一帧。
![](https://upload-images.jianshu.io/upload_images/3896436-80f60fc2f6e2c603.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/686)
在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技能,你开发出来的最终手机游戏的效果为如下所示:
![](https://upload-images.jianshu.io/upload_images/3896436-7becf3b55e8fb039.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
一、教程开始 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,工程即新建完毕
![](https://upload-images.jianshu.io/upload_images/3896436-428aa4a6a6b8060e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
![](https://upload-images.jianshu.io/upload_images/3896436-996efac6e121435f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
![](https://upload-images.jianshu.io/upload_images/3896436-f1a1bb7ad6fc36ae.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
2、选择Genrnal面板,因为此Space Battle游戏为竖屏游戏,所以去除勾选Deployment Info -> Device Orientation中的Landscape Left 与Landscape Right,我们不需要横屏效果
![](https://upload-images.jianshu.io/upload_images/3896436-9885c064af1d175d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
3、删除XCode左侧目录中的 Action.sks(暂时没有用到),修改GameScene.swift及GameViewController.swift的相关代码
![](https://upload-images.jianshu.io/upload_images/3896436-2aa8b53faaadf38e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
![](https://upload-images.jianshu.io/upload_images/3896436-b32f6f280e22a0d5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
![](https://upload-images.jianshu.io/upload_images/3896436-6097ad29441606e2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
二、可视化编辑场景 Introducing the Sprite Kit Visual Editor
1.首先需要编辑场景.sks文件,打开GameScene.sks文件,设置场景的尺寸为iPAD4:3的比例(W:1536,H:2048),并删除场景中的文字。
![](https://upload-images.jianshu.io/upload_images/3896436-50e7ff029b3ac4a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
2.拖动音乐文件到导航栏navigator->SpaceBattle文件夹,勾选Copy items if needed,Added folders选择Create groups,Add to targets勾选SpaceBattle
![](https://upload-images.jianshu.io/upload_images/3896436-c029c52fb73fc4f3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
3.拖动游戏工程所需要的图片到Assets.xcassets文件夹
![](https://upload-images.jianshu.io/upload_images/3896436-665053702cd9e7d3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
4.资源导入后,左侧的导航栏navigator如下图所示
![](https://upload-images.jianshu.io/upload_images/3896436-ff4110fa8882dda9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
5.Assets图库中的图片尺寸分为1x,2x,3x,你只需设置1x的图片尺寸大小即可,SpriteKit会自动根据你运行的device设备尺寸(iPhoneX,iPhone,iPhone Plus,iPad)进行相应比例的调整。
![](https://upload-images.jianshu.io/upload_images/3896436-5617feaba9c9f967.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
非常的棒,你已经学会如何导入Mac电脑中的资源文件(图片、音乐、粒子)到SpaceBattle游戏工程内中了。
那么,现在我们就来学习如何新建SpriteKit精灵节点吧!
6.选择左侧导航栏Navigator的GameScene.sks,直接拖动一个Color Sprite到场景中,选中精灵,设置Position(0,0),修改texture为BG_SpaceBattle_planet(AssetsAssets.xcassets文件夹的名称),并命名精灵节点的名称 Name为bg。
![](https://upload-images.jianshu.io/upload_images/3896436-c2f5f203c5c09c96.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
![](https://upload-images.jianshu.io/upload_images/3896436-87b082d369acd4a2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
7.现在你可以运行模拟器(XCode -> Product -> Run),看看你的游戏是否正确显示你刚刚建立的精灵节点。
![](https://upload-images.jianshu.io/upload_images/3896436-0f17c2865201acf7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
![](https://upload-images.jianshu.io/upload_images/3896436-13ea0ff6b5c4d648.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
![](https://upload-images.jianshu.io/upload_images/3896436-d646db5933d0fb37.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
棒棒哒! 你已学会了如何在场景中建立精灵节点及如何运行模拟器进行调试!
三、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外星飞船精灵节点,并设置他们的物理属性。
![](https://upload-images.jianshu.io/upload_images/3896436-68e65a6a8c8c9c27.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
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外星飞船正向下俯冲
![](https://upload-images.jianshu.io/upload_images/3896436-e27cc162e3e259e9.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
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 -- 开源手机游戏教程网,让手机游戏开发变得简单!
![](https://upload-images.jianshu.io/upload_images/3896436-51047d8dc0b2467d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)