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(, )
farBg0.position.y = var farBg1 = SKSpriteNode(texture: farTexture)
farBg1.anchorPoint = CGPointMake(, )
farBg1.position.x = farBg0.frame.width
farBg1.position.y = farBg0.position.y var farBg2 = SKSpriteNode(texture: farTexture)
farBg2.anchorPoint = CGPointMake(, )
farBg2.position.x = farBg0.frame.width *
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(, )
var bg1 = SKSpriteNode(texture: texture)
bg1.anchorPoint = CGPointMake(, )
bg1.position.x = bg0.frame.width
bg0.position.y =
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[].position.x + arrBG[].frame.width < speed {
arrBG[].position.x =
arrBG[].position.x = arrBG[].frame.width
}
//循环遍历做远处背景,做x坐标位移
for far in arrFar {
far.position.x -= speed/
}
//判断第一张背景图是否完全移除到场景外,如果移出去了,则整个远处背景图都归位
if arrFar[].position.x + arrFar[].frame.width < speed/ {
arrFar[].position.x =
arrFar[].position.x = arrFar[].frame.width
arrFar[].position.x = arrFar[].frame.width *
}
}
}

项目文件地址

http://yun.baidu.com/share/link?shareid=3824235955&uk=541995622

Swift游戏实战-跑酷熊猫系列

00
游戏预览

01
创建工程导入素材

02
创建熊猫类

03
熊猫跑动动画

04
熊猫的跳和滚的动作

05
踩踏平台是怎么炼成的

06
创建平台类以及平台工厂类

07
平台的移动

08
产生源源不断的移动平台

09
移除场景之外的平台

上一篇:android studio/Intellij IDEA(MAC OSX)中android模拟器无法启动的一种原因


下一篇:Validform —— 再也不用担心“表单验证”!