原理
实现
勘误
“实现”的视频中有个错误，如下
背景移动时有个错误，看红色部分，近景归位时，第二张图片的下标是1
if arrBG[0].position.x + arrBG[0].frame.width < speed{
arrBG[0].position.x = 0
arrBG[1].position.x
= arrBG[0].frame.width
}
要点：
什么是视差滚动：
视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。
如何实现：
首先是背景，由两种背景组成，近点的是青色山坡，远点的是树木。我们在move方法中给予近景1/5 的平台移动速度。给远景1/20 的平台移动速度。就形成了视差滚动。
具体代码：
import SpriteKit //继承自sknode class BackGround :SKNode { //近处的背景数组 var arrBG = [SKSpriteNode]() //远处树木的背景数组 var arrFar = [SKSpriteNode]() //构造器 init() { //执行父类的构造器 super.init() //远处背景的纹理 var farTexture = SKTexture(imageNamed: "background_f1") //远处背景由3张无缝衔接的图组成 var farBg0 = SKSpriteNode(texture: farTexture) farBg0.anchorPoint = CGPointMake(0, 0) farBg0.position.y = 150 var farBg1 = SKSpriteNode(texture: farTexture) farBg1.anchorPoint = CGPointMake(0, 0) farBg1.position.x = farBg0.frame.width farBg1.position.y = farBg0.position.y var farBg2 = SKSpriteNode(texture: farTexture) farBg2.anchorPoint = CGPointMake(0, 0) 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.position.y = 70 bg1.position.y = bg0.position.y self.addChild(bg0) self.addChild(bg1) arrBG.append(bg0) arrBG.append(bg1) } //移动函数 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 } //循环遍历做远处背景，做x坐标位移 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 } } }
项目文件地址
http://yun.baidu.com/share/link?shareid=3824235955&uk=541995622