• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
一，什么是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

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
【Swift学习】Swift编程之旅---ARC（二十）发布时间：2022-07-13
下一篇：
[Swift通天遁地]五、高级扩展-(5)获取互补色、渐变色、以及图片主题颜色 ...发布时间：2022-07-13
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap