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

视差滚动是指让多层背景以不同的速度移动,形成立体的效果,从而带来非常出色的视觉体验。
样例说明:
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游戏开发)的更多相关文章

  1. Expression Blend4经验分享:文字公告无缝循环滚动效果

    这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...

  2. JavaScript学习笔记——简单无缝循环滚动展示图片的实现

    今天做了一个简单的无缝循环滚动的实例,这种实例在网页中其实还挺常见的,下面分享一下我的学习收获. 首先,无缝滚动的第一个重点就是——动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScri ...

  3. Swift - 创建并设置背景(SpriteKit游戏开发)

    1,先把背景图片bg.jpg,bg@2x.jpg直接拖进Images.xcassets中 2,设置如下代码(背景图直接铺满整个屏幕) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  4. Swift - 跑酷游戏开发(SpriteKit游戏开发)

    一,下面演示了如何开发一个跑酷游戏,实现的功能如下: 1,平台工厂会不断地生成平台,并且向左移动.当平台移出游戏场景时就可将其移除. 2,生成的平台宽度随机,高度随机.同时短平台踩踏的时候会下落. 3 ...

  5. Swift - 给游戏添加背景音乐和音效(SpriteKit游戏开发)

    游戏少不了背景音乐和音效.下面我们通过创建一个管理音效的类,来实现背景音乐的播放,同时点击屏幕可以播放相应的音效. 声音管理类 SoundManager.swift 1 2 3 4 5 6 7 8 9 ...

  6. Swift - 跳跃吃苹果游戏开发(SpriteKit游戏开发)

    下面通过一个样例演示如何实现飞行道具的生成,以及道具碰撞拾取. 样例说明: 1,屏幕从右到左不断地生成苹果飞过来(苹果高度随机) 2,点击屏幕可以让熊猫跳跃 3,熊猫碰到苹果,苹果消失 运行效果: 样 ...

  7. Swift - 使用atlas图集实现动画效果(SpriteKit游戏开发)

    我们通常继承SKSpriteNode来实现游戏中的元素,除了可以使用图片作为纹理皮肤外.我们还可以使用动画纹理集来实现动画播放. 动画纹理集的制作也很简单,首先要有一套动画序列图,然后把它们放到一个文 ...

  8. Swift - 在界面上生成81个随机红,灰色圆点(SpriteKit游戏开发)

    下面是生成一个“围住神经猫”游戏的初始场景: 1,界面下方会生成9*9共81个圆点,同时圆点内部添加文本标签显示索引 2,默认圆点为灰色,每行随机取两个点变为红色 3,奇数行和偶数行有一定的错位,错位 ...

  9. js实现无缝循环滚动

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. java--偏向锁

    Java偏向锁(Biased Locking)是Java 6引入的一项多线程优化.它通过消除资源无竞争情况下的同步原语,进一步提高了程序的运行性能. 轻量级锁也是一种多线程优化,它与偏向锁的区别在于, ...

  2. 【引用】Linux 内核驱动--多点触摸接口

    本文转载自James<Linux 内核驱动--多点触摸接口>   译自:linux-2.6.31.14\Documentation\input\multi-touch-protocol.t ...

  3. 解决struts2中UI标签出现的问题: The Struts dispatcher cannot be found

    解决struts2中UI标签出现的问题: The Struts dispatcher cannot be found 异常信息: The Struts dispatcher cannot be fou ...

  4. WIZnet推出串口转以太网模块WIZ550S2E

    WIZ550S2E 是一个网关模块,提供RS-232转TCP/IP协议功能.并可基于TCP/IP及以太网实现网络设备管理.远程測量,仅仅需用RS-232串口连接当前设备.换句话说,WIZ550S2E是 ...

  5. 最简单也最难——如何获取到Android控件的高度

    问题 如何获取一个控件的长和高,相信很多朋友第一眼看见这个问题都会觉得很简单,直接在onCreate里面调用getWidth.getMeasuredWidth不就可以获得了吗,但是,事实上是并没有简单 ...

  6. 在eclipse上安装 sdk出现的各种问题

    在eclipse上下进行android开发需要  有android SDK 和ADT 一般adt版本瑶台低, 会被提示安装较高版本的ADT,  不然, SDK可能无法使用 在安装 SDK过程中出现这样 ...

  7. ListView与DataTable传递数据

    转载自:http://blog.sina.com.cn/s/blog_4b3485000100prhl.html 代码: using System; using System.Collections. ...

  8. C# 课堂总结5-数组

    一. 数组:解决同一类大量数据在内存存储和运算的功能. 1.一维数组定义:制定类型,指定长度,指定名称.int[] a=new int[5]int[] a=new int[5]{23,23,23,1, ...

  9. shell中exec解析(转)

    参考:<linux命令.编辑器与shell编程> <unix环境高级编程> exec和source都属于bash内部命令(builtins commands),在bash下输入 ...

  10. [zencart教程]zencart外贸建站仿站交流俱乐部

    [zencart教程]zencart外贸建站仿站交流俱乐部 1.你想自主一天仿做一个精美的zencart 外贸网站; 2.你想自已自主定制精美的psd 图 zencart模板,并把它变成自定义精美 z ...