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

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

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

样例说明：

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