Swift - 一步步教你使用SpriteKit创建开发游戏项目

一，什么是SpriteKit

SpriteKit是苹果公司官方出品，用于制作2D游戏的框架。这个框架具备了图形渲染和动画的功能。可以使图像或者精灵（sprite）动 起来。SpriteKit的渲染方式是传统的环形渲染，允许在渲染前处理每一帧点的内容。例如定义场景中的元素，以及这些内容在每一帧中是如何变化的。尤 其重要的是，苹果官方出品的这个SpriteKit能够很有效地利用图形硬件来渲染。

除了图形渲染，SpriteKit还包括了声音播放和物理系统。在Xcode中，我们可以很轻易地创建复杂的特效和纹理集。

二，SpriteKit支持的内容

（1）无纹理或者有纹理的矩形

（2）文本

（3）基于CGPath的形状

（4）音频，视频

（5）动画特效

（6）物理系统

三，从零开始开发一个游戏项目

1，在Xcode中创建一个Game项目

2，当项目创建完毕后，系统会自动生成一个场景，叫GameScene.swift。我们不用它，使用自己新创建的场景。

3，将新创建的场景代替默认的GameScene

打开GameViewController.swift，将相关的地方进行替换

1 2 3 4 5 6 7 8 9 10 11 12 13

extension SKNode {     class func unarchiveFromFile(file : NSString) -> SKNode? {             .....             let scene = archiver.decodeObjectForKey(NSKeyedArchiveRootObjectKey) as FirstScene   class GameViewController: UIViewController {       override func viewDidLoad() {         super.viewDidLoad()           if let scene = FirstScene.unarchiveFromFile("GameScene") as? FirstScene {                   .........

4，修改场景背景色，添加文本标签，点击屏幕给标签添加动画效果

这里我们使用了SpriteKit的动作（Action）。当点击屏幕时，文字依次向上移动、放大、暂停并淡出屏幕，最后从场景中移除。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

import SpriteKit   class FirstScene: SKScene {     //当切换到这个场景视图后后     override func didMoveToView(view: SKView) {         createScene()     }           func createScene(){         //改变背景颜色         self.backgroundColor = SKColor.blueColor()         //创建一个显示文本的节点         let myLabel = SKLabelNode(fontNamed:"Chalkduster")         //添加name属性         myLabel.name = "label"         //设置文本内容         myLabel.text = "Hello, hangge.com";         //设置字体大小         myLabel.fontSize = 46;         //设置文本节点的位置         myLabel.position = CGPoint(x:CGRectGetMidX(self.frame), y:CGRectGetMidY(self.frame));         //将文本节点加入场景中         self.addChild(myLabel)     }           //响应屏幕点击时间的方法     override func touchesBegan(touches:NSSet, withEvent event: UIEvent) {         //获取文本节点         let labelNode = self.childNodeWithName("label")         //向上移动的动作         let moveUp = SKAction.moveByX(0, y: 100, duration: 0.5)         //放大动作         let zoom = SKAction.scaleTo(2.0, duration: 0.25)         //暂停的动作         let pause = SKAction.waitForDuration(0.5)         //淡出的动作         let fadeAway = SKAction.fadeOutWithDuration(0.25)         //从父对象移除的动作         let remove = SKAction.removeFromParent()         //动作序列         let moveSequence = SKAction.sequence([moveUp,zoom,pause,fadeAway,remove])         //文本节点执行动作序列         labelNode?.runAction(moveSequence)            } }

5，跳转到新场景

 对文本节点的动作序列做如下修改，当文本节点消失的时候，会创建一个新的场景SecondScene，并以开门的方式过渡到新场景，而之前的场景会被移除

1 2 3 4 5 6 7 8 9

//执行完动作序列之后调用闭包函数 labelNode?.runAction(moveSequence, completion: {     //声明下一个场景的实例     let secondScene = SecondScene(size: self.size)     //场景过渡动画     let doors = SKTransition.doorsOpenVerticalWithDuration(0.5)     //带动画的场景跳转     self.view?.presentScene(secondScene,transition:doors) })

6，使用SKSpriteNode创建一个飞船

下面通过创建一个椭圆充当飞船，飞船两侧还添加了忽明忽暗的灯光。同时，飞船设置了一个重复的动作序列自动进行移动。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

import SpriteKit   class SecondScene: SKScene {     //当切换到这个场景视图后后     override func didMoveToView(view: SKView) {         createScene()     }           func createScene(){         let spaceship = newSpaceship()         //设置飞船的位置         spaceship.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame)-150)         //加入到场景中         self.addChild(spaceship)     }           //创建飞创的类     func newSpaceship()->SKShapeNode{         //创建一个椭圆，充当飞船         let ship = SKShapeNode()         ship.path = CGPathCreateWithRoundedRect(CGRectMake(-15, -15, 30, 30), 15, 15, nil)         ship.strokeColor = SKColor.whiteColor()         ship.fillColor = SKColor.grayColor()         //创建一组动作，暂停1秒，位移，暂停1秒，位移         let hover = SKAction.sequence([             SKAction.waitForDuration(1.0),             SKAction.moveByX(100, y: 50, duration: 1),             SKAction.waitForDuration(1.0),             SKAction.moveByX(-100, y: -50, duration: 1.0)             ])         //以重复的方式执行序列动作         ship.runAction(SKAction.repeatActionForever(hover))         //创建灯光         let light1 = newLight()         //设置灯光位置         light1.position = CGPointMake(-28, 6.0)         //加载灯光         ship.addChild(light1)                   //创建灯光2，步骤同上         let light2 = newLight()         light2.position = CGPointMake(28, 6.0)         ship.addChild(light2)                           //物理系统         ship.physicsBody = SKPhysicsBody(circleOfRadius: 15)         ship.physicsBody?.dynamic = false                   //返回飞船         return ship     }           //创建灯光方法     func newLight()->SKShapeNode{         //创建一个黄色椭圆充当灯光         let light = SKShapeNode()         light.path = CGPathCreateWithRoundedRect(CGRectMake(-4, -4, 8, 8), 4, 4, nil)         light.strokeColor = SKColor.whiteColor()         light.fillColor = SKColor.yellowColor()         //创建忽明忽暗的动作         let blink = SKAction.sequence([             SKAction.fadeOutWithDuration(0.25),             SKAction.fadeInWithDuration(0.25)             ])         //创建一直重复的动作         let blinkForever = SKAction.repeatActionForever(blink)         //执行动作         light.runAction(blinkForever)         //返回灯光         return light     } }

7，定时生成陨石（并设置物理碰撞）

下面代码会每隔0.1秒在屏幕上方随机的生成一个陨石。由于添加了物理体，所以陨石会做向下的自由落体运动。同时陨石砸在飞船上会停住，并像有弹性似的跳了跳，等飞船离开后才又落下来。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

import SpriteKit   class SecondScene: SKScene {     //当切换到这个场景视图后后     override func didMoveToView(view: SKView) {         createScene()     }           func createScene(){         //.....         //生成陨石（每隔 0.1秒生成1个）         NSTimer.scheduledTimerWithTimeInterval(0.1, target: self, selector: "addRock",             userInfo: nil, repeats: true)     }         //创建陨石的方法     func addRock(){         //小椭圆充当陨石         let rock = SKShapeNode()         rock.path = CGPathCreateWithRoundedRect(CGRectMake(-4, -4, 8, 8), 4, 4, nil)         rock.strokeColor = SKColor.whiteColor()         rock.fillColor = SKColor.brownColor()         //获取场景宽，高         let w = self.size.width         let h = self.size.height         //随机出现在场景的xy位置         let x = CGFloat(arc4random())%w         let y = CGFloat(arc4random())%h         //设置陨石的位置         rock.position = CGPointMake(x,y)         //设置陨石的name属性         rock.name = "rock"         //给陨石设置物理体         rock.physicsBody = SKPhysicsBody(circleOfRadius: 4)         //物理体允许检测碰撞         rock.physicsBody?.usesPreciseCollisionDetection = true         //场景加入陨石         self.addChild(rock)            } }

四，最终完整的代码

--- FirstScene.swift ---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

import SpriteKit   class FirstScene: SKScene {     //当切换到这个场景视图后后     override func didMoveToView(view: SKView) {         createScene()     }           func createScene(){         //改变背景颜色         self.backgroundColor = SKColor.blueColor()         //创建一个显示文本的节点         let myLabel = SKLabelNode(fontNamed:"Chalkduster")         //添加name属性         myLabel.name = "label"         //设置文本内容         myLabel.text = "Hello, hangge.com";         //设置字体大小         myLabel.fontSize = 46;         //设置文本节点的位置         myLabel.position = CGPoint(x:CGRectGetMidX(self.frame), y:CGRectGetMidY(self.frame));         //将文本节点加入场景中         self.addChild(myLabel)     }           //响应屏幕点击时间的方法     override func touchesBegan(touches:NSSet, withEvent event: UIEvent) {         //获取文本节点         let labelNode = self.childNodeWithName("label")         //向上移动的动作         let moveUp = SKAction.moveByX(0, y: 100, duration: 0.5)         //放大动作         let zoom = SKAction.scaleTo(2.0, duration: 0.25)         //暂停的动作         let pause = SKAction.waitForDuration(0.5)         //淡出的动作         let fadeAway = SKAction.fadeOutWithDuration(0.25)         //从父对象移除的动作         let remove = SKAction.removeFromParent()         //动作序列         let moveSequence = SKAction.sequence([moveUp,zoom,pause,fadeAway,remove])         //执行完动作序列之后调用闭包函数         labelNode?.runAction(moveSequence, completion: {             //声明下一个场景的实例             let secondScene = SecondScene(size: self.size)             //场景过渡动画             let doors = SKTransition.doorsOpenVerticalWithDuration(0.5)             //带动画的场景跳转             self.view?.presentScene(secondScene,transition:doors)         })     } }

--- SecondScene.swift ---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101

import SpriteKit   class SecondScene: SKScene {     //当切换到这个场景视图后后     override func didMoveToView(view: SKView) {         createScene()     }           func createScene(){         let spaceship = newSpaceship()         //设置飞船的位置         spaceship.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame)-150)         //加入到场景中         self.addChild(spaceship)                   //生成陨石（每隔 0.1秒生成1个）         NSTimer.scheduledTimerWithTimeInterval(0.1, target: self, selector: "addRock",             userInfo: nil, repeats: true)     }           //创建飞创的类     func newSpaceship()->SKShapeNode{         //创建一个椭圆，充当飞船         let ship = SKShapeNode()         ship.path = CGPathCreateWithRoundedRect(CGRectMake(-15, -15, 30, 30), 15, 15, nil)         ship.strokeColor = SKColor.whiteColor()         ship.fillColor = SKColor.grayColor()         //创建一组动作，暂停1秒，位移，暂停1秒，位移         let hover = SKAction.sequence([             SKAction.waitForDuration(1.0),             SKAction.moveByX(100, y: 50, duration: 1),             SKAction.waitForDuration(1.0),             SKAction.moveByX(-100, y: -50, duration: 1.0)             ])         //以重复的方式执行序列动作         ship.runAction(SKAction.repeatActionForever(hover))         //创建灯光         let light1 = newLight()         //设置灯光位置         light1.position = CGPointMake(-28, 6.0)         //加载灯光         ship.addChild(light1)                   //创建灯光2，步骤同上         let light2 = newLight()         light2.position = CGPointMake(28, 6.0)         ship.addChild(light2)                          //物理系统         ship.physicsBody = SKPhysicsBody(circleOfRadius: 15)         ship.physicsBody?.dynamic = false                   //返回飞船         return ship     }           //创建灯光方法     func newLight()->SKShapeNode{         //创建一个黄色椭圆充当灯光         let light = SKShapeNode()         light.path = CGPathCreateWithRoundedRect(CGRectMake(-4, -4, 8, 8), 4, 4, nil)         light.strokeColor = SKColor.whiteColor()         light.fillColor = SKColor.yellowColor()         //创建忽明忽暗的动作         let blink = SKAction.sequence([             SKAction.fadeOutWithDuration(0.25),             SKAction.fadeInWithDuration(0.25)             ])         //创建一直重复的动作         let blinkForever = SKAction.repeatActionForever(blink)         //执行动作         light.runAction(blinkForever)         //返回灯光         return light     }           //创建陨石的方法     func addRock(){         //小椭圆充当陨石         let rock = SKShapeNode()         rock.path = CGPathCreateWithRoundedRect(CGRectMake(-4, -4, 8, 8), 4, 4, nil)         rock.strokeColor = SKColor.whiteColor()         rock.fillColor = SKColor.brownColor()         //获取场景宽，高         let w = self.size.width         let h = self.size.height         //随机出现在场景的xy位置         let x = CGFloat(arc4random())%w         let y = CGFloat(arc4random())%h         //设置陨石的位置         rock.position = CGPointMake(x,y)         //设置陨石的name属性         rock.name = "rock"         //给陨石设置物理体         rock.physicsBody = SKPhysicsBody(circleOfRadius: 4)         //物理体允许检测碰撞         rock.physicsBody?.usesPreciseCollisionDetection = true         //场景加入陨石         self.addChild(rock)            } }