码迷,mamicode.com
首页 > 编程语言 > 详细

Swift - 多层无缝循环滚动背景(SpriteKit游戏开发)

时间:2015-09-26 19:58:01      阅读:329      评论:0      收藏:0      [点我收藏+]

标签:

在游戏开发中,比如跑酷游戏。我们需要实现背景的无限循环滚动,来营造运动的效果。除了单层的背景滚动,还有视差滚动。

视差滚动是指让多层背景以不同的速度移动,形成立体的效果,从而带来非常出色的视觉体验。

样例说明:
1,本样例背景分为两层。第一层更靠近游戏窗口的色彩更鲜艳,移动速度也更快一些。第二层由于要模拟远处的场景,所以颜色也更淡一些,对比度更弱一些,移动速度也更慢一些。
2,要实现循环滚动。我们准备的背景图首尾是要可以无缝衔接的。
3,判断需要多少张无缝衔接图来组成背景?判断标准是:当第一张图移出屏幕外,剩下的图在x轴方向上还能够填满游戏屏幕就够了。(本例远景需要拼三种同样的无缝图,近景由两张同样的无缝图衔接成)

运行效果:
技术分享

样例代码:
背景类 BackGround.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
import SpriteKit
 
class BackGround :SKNode {
    //近处背景数组
    var arrBG = [SKSpriteNode]()
    //远处背景数组
    var arrFar = [SKSpriteNode]()
     
    override init() {
        super.init()
        //获取远处背景的纹理
        var farTexture = SKTexture(imageNamed: "background_f1")
        //远处背景由3章无缝图衔接而成
        var farBg0 = SKSpriteNode(texture: farTexture)
        farBg0.anchorPoint = CGPointMake(0, 0)
        farBg0.zPosition = 9
        farBg0.position.y = 150
         
        var farBg1 = SKSpriteNode(texture: farTexture)
        farBg1.anchorPoint = CGPointMake(0, 0)
        farBg1.zPosition = 9
        farBg1.position.x = farBg0.frame.width
        farBg1.position.y = farBg0.position.y
         
        var farBg2 = SKSpriteNode(texture: farTexture)
        farBg2.anchorPoint = CGPointMake(0, 0)
        farBg2.zPosition = 9
        farBg2.position.x = farBg0.frame.width * 2
        farBg2.position.y = farBg0.position.y
         
        self.addChild(farBg0)
        self.addChild(farBg1)
        self.addChild(farBg2)
        arrFar.append(farBg0)
        arrFar.append(farBg1)
        arrFar.append(farBg2)
         
         
        //近处背景纹理
        var texture = SKTexture(imageNamed: "background_f0")
        //近处背景由2章无缝衔接图组成
        var bg0 = SKSpriteNode(texture: texture)
        bg0.anchorPoint = CGPointMake(0, 0)
        var bg1 = SKSpriteNode(texture: texture)
        bg1.anchorPoint = CGPointMake(0, 0)
        bg1.position.x = bg0.frame.width
        bg0.zPosition = 10
        bg1.zPosition = 10
        bg0.position.y = 70
        bg1.position.y = bg0.position.y
        self.addChild(bg0)
        self.addChild(bg1)
        arrBG.append(bg0)
        arrBG.append(bg1)
    }
     
    required init(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
     
    //移动方法
    func move(speed:CGFloat){
        //通过遍历获取背景,然后做x方向的改变
        for bg in arrBG {
            bg.position.x -= speed
        }
        //循环滚动算法
        if arrBG[0].position.x + arrBG[0].frame.width < speed {
            arrBG[0].position.x = 0
            arrBG[1].position.x = arrBG[0].frame.width
        }
        //远景同上
        for far in arrFar {
            far.position.x -= speed/4
        }
        if arrFar[0].position.x + arrFar[0].frame.width < speed/4 {
            arrFar[0].position.x = 0
            arrFar[1].position.x = arrFar[0].frame.width
            arrFar[2].position.x = arrFar[0].frame.width * 2
        }
    }
}


主场景类 GameScene.swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import SpriteKit
 
class GameScene: SKScene {
    lazy var bg = BackGround()
    //背景移动速度
    var bgMoveSpeed:CGFloat = 3
     
    override func didMoveToView(view: SKView) {
        //场景的背景颜色
        let skyColor = SKColor(red:113/255,green:197/255,blue:207/255,alpha:1)
        self.backgroundColor = skyColor
        //设置背景
        self.addChild(bg)
    }
     
    override func touchesBegan(touches: NSSet, withEvent event: UIEvent) {
    }
    
    override func update(currentTime: CFTimeInterval) {
        bg.move(bgMoveSpeed/5)
    }
}


源码下载:技术分享DynamicBg.zip

Swift - 多层无缝循环滚动背景(SpriteKit游戏开发)

标签:

原文地址:http://www.cnblogs.com/Free-Thinker/p/4841105.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!