Swift游戏实战-跑酷熊猫 10 视差滚动背景

简介: 原文:Swift游戏实战-跑酷熊猫 10 视差滚动背景原理   实现   勘误 “实现”的视频中有个错误,如下 背景移动时有个错误,看红色部分,近景归位时,第二张图片的下标是1 if arrBG[0].
原文: 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 移除场景之外的平台

 

目录
相关文章
|
7月前
|
JSON API 数据处理
【Swift开发专栏】Swift中的RESTful API集成实战
【4月更文挑战第30天】本文探讨了在Swift中集成RESTful API的方法,涉及RESTful API的基础概念,如HTTP方法和设计原则,以及Swift的网络请求技术,如`URLSession`、`Alamofire`和`SwiftyJSON`。此外,还强调了数据处理、错误管理和异步操作的重要性。通过合理利用这些工具和策略,开发者能实现高效、稳定的API集成,提升应用性能和用户体验。
148 0
|
7月前
|
人工智能 物联网 API
LLM 大模型学习必知必会系列(十三):基于SWIFT的VLLM推理加速与部署实战
LLM 大模型学习必知必会系列(十三):基于SWIFT的VLLM推理加速与部署实战
LLM 大模型学习必知必会系列(十三):基于SWIFT的VLLM推理加速与部署实战
|
7月前
|
存储 API Swift
【Swift开发专栏】Swift函数与闭包的实战应用
【4月更文挑战第30天】本文介绍了 Swift 中函数和闭包的实战应用。首先,函数的基本使用包括定义、参数与返回值、函数类型以及高级技巧如嵌套函数。接着,讨论了闭包的语法,包括无名函数、作为函数参数、简写形式和尾随闭包。最后,展示了函数和闭包在实战中的应用,如排序过滤集合和处理异步任务的回调。
54 0
|
Swift
Swift - 滚动选择器
Swift - 滚动选择器
127 0
Swift - 滚动选择器
|
Swift
Swift -banner滚动图自定义
Swift -banner滚动图自定义
242 0
Swift -banner滚动图自定义
|
机器学习/深度学习 人工智能 文字识别
《MNN For Swift》移动端机器学习实战课程发布!
5期系列课程教学,最新实践分享!
934 0
《MNN For Swift》移动端机器学习实战课程发布!
|
iOS开发 Swift API
写在新书《Swift开发手册:技巧与实战》出版之际
1月份的时候新书出版了,正值研究生毕业之际,想写点什么又无法抵抗毕业浮躁的心态,所以推到了正式入职之后。
1088 0
|
JSON API 数据格式
swift实战小程序1天气预报
       在有一定swift基础的情况下,让我们来做一些小程序练练手,今天来试试做一个简单地天气预报。
937 0
|
JSON 数据格式 Swift
Swift实战-豆瓣电台(一)准备
原文:Swift实战-豆瓣电台(一)准备   一 准备 我们现在看看我们要做一个什么样的东西   观看地址:http://v.youku.com/v_show/id_XNzI4ODY2Mjky.html 布局   通过上面这张图我们可以看出整个demo有两个视图,视图一用来播放音乐,视图二用来选择频道。
1040 0
|
JSON Swift 数据格式
Swift实战-豆瓣电台(二)界面布局
原文:Swift实战-豆瓣电台(二)界面布局   观看地址 http://v.youku.com/v_show/id_XNzMwMDg4NzAw.html   这节的内容主要是storyboard的操作。
849 0
下一篇
DataWorks