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 移除场景之外的平台