原文:
Swift游戏实战-跑酷熊猫 10 视差滚动背景
原理
实现
勘误
“实现”的视频中有个错误,如下
背景移动时有个错误,看红色部分,近景归位时,第二张图片的下标是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
Swift游戏实战-跑酷熊猫系列
00 游戏预览
01 创建工程导入素材
02 创建熊猫类
03 熊猫跑动动画
04 熊猫的跳和滚的动作
05 踩踏平台是怎么炼成的
06 创建平台类以及平台工厂类
07 平台的移动
08 产生源源不断的移动平台
09 移除场景之外的平台