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

移除场景之外的平台

 


分享给朋友:
您可能感兴趣的文章:
随机阅读: