Cocos Creator3.8 项目实战(五)背景无限滚屏效果如何实现

2023-10-11 17:45

本文主要是介绍Cocos Creator3.8 项目实战(五)背景无限滚屏效果如何实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!


在游戏中,我们经常会实现背景无限滚动的效果。那这些效果是怎么实现的呢?


原理很简单,就是使用多张背景图,每张图,每一帧都同时移动,当图移出屏幕外时,将其位置设置到下一张图的初始位置,最后一张图位置设置为第一张图的初始位置,如此循环即可。


下面以 实现背景 1920*1080 的背景图,垂直方向无限滚动为例,进行详细说明。

⚠️ 文末附 BgMoveView.ts 完整源码, 可直接拿去使用。


具体实现方法:

step 1 ,在cocoscrearor 资源管理器中,添加多张背景图资源,并设置为sprite-frame类型。

注意:最好每张图的尺寸一致。

如下:


在这里插入图片描述


在这里插入图片描述


step 2 ,在cocoscrearor 层级管理器中,首先添加 bgNode 节点,用于背景图的根节点,然后再添加多个sprite节点 ,并设置sprite frame 资源 以及位置。


注意位置:

第一张图 0 ,0

第一张图 0 ,-1080

第三张图 0 ,-1080 *2

第四张图 0 ,-1080 *3

第五张图 0 ,-1080 *4

第六张图,以此类推…


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


step 3 ,为根节点 设置蒙版(Mask)组件。

在这里插入图片描述


step 4 ,为bgNode节点 挂载背景滚动脚本,并配置背景节点数组、滚动速度。


在这里插入图片描述


Step 5 、脚本 BgMoveView.ts 完整源码

/*** * 背景无限滚屏效果实现** * */import { _decorator, Component, Node,UITransform } from 'cc';
const { ccclass, property } = _decorator;@ccclass('BgMoveView')
export class BgMoveView extends Component {/**背景数组 */@property({type: Node})bgList:Node[] = [];/**移动速度 */@property({type: Number})moveSpeed:number = 200;/**背景图片滚出屏幕的位置*/bottomPosition:number = 0;/**背景图片高度*/bgHeight:number = 0;onLoad () {/**注意是负值*/this.bottomPosition = -this.bgList[0].getComponent(UITransform).height;this.bgHeight = this.bgList[0].getComponent(UITransform).height;}start() {}update(deltaTime: number) {for(let i = 0; i < this.bgList.length; i++) {/**达到触发条件,改变背景图片位置*/ if(this.bgList[i].position.y <= this.bottomPosition) {this.bgList[i].setPosition(this.bgList[i].position.x,this.bgList[i+1<this.bgList.length?i+1:0].position.y + this.bgHeight);}/**背景的移动*/  this.bgList[i].setPosition(this.bgList[i].position.x, this.bgList[i].position.y - this.moveSpeed*deltaTime);}}
}

这篇关于Cocos Creator3.8 项目实战(五)背景无限滚屏效果如何实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/189762

相关文章

Qt中实现多线程导出数据功能的四种方式小结

《Qt中实现多线程导出数据功能的四种方式小结》在以往的项目开发中,在很多地方用到了多线程,本文将记录下在Qt开发中用到的多线程技术实现方法,以导出指定范围的数字到txt文件为例,展示多线程不同的实现方... 目录前言导出文件的示例工具类QThreadQObject的moveToThread方法实现多线程QC

Go语言使用sync.Mutex实现资源加锁

《Go语言使用sync.Mutex实现资源加锁》数据共享是一把双刃剑,Go语言为我们提供了sync.Mutex,一种最基础也是最常用的加锁方式,用于保证在任意时刻只有一个goroutine能访问共享... 目录一、什么是 Mutex二、为什么需要加锁三、实战案例:并发安全的计数器1. 未加锁示例(存在竞态)

基于Redisson实现分布式系统下的接口限流

《基于Redisson实现分布式系统下的接口限流》在高并发场景下,接口限流是保障系统稳定性的重要手段,本文将介绍利用Redisson结合Redis实现分布式环境下的接口限流,具有一定的参考价值,感兴趣... 目录分布式限流的核心挑战基于 Redisson 的分布式限流设计思路实现步骤引入依赖定义限流注解实现

SpringBoot实现虚拟线程的方案

《SpringBoot实现虚拟线程的方案》Java19引入虚拟线程,本文就来介绍一下SpringBoot实现虚拟线程的方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录什么是虚拟线程虚拟线程和普通线程的区别SpringBoot使用虚拟线程配置@Async性能对比H

基于Python实现进阶版PDF合并/拆分工具

《基于Python实现进阶版PDF合并/拆分工具》在数字化时代,PDF文件已成为日常工作和学习中不可或缺的一部分,本文将详细介绍一款简单易用的PDF工具,帮助用户轻松完成PDF文件的合并与拆分操作... 目录工具概述环境准备界面说明合并PDF文件拆分PDF文件高级技巧常见问题完整源代码总结在数字化时代,PD

Python实现Word转PDF全攻略(从入门到实战)

《Python实现Word转PDF全攻略(从入门到实战)》在数字化办公场景中,Word文档的跨平台兼容性始终是个难题,而PDF格式凭借所见即所得的特性,已成为文档分发和归档的标准格式,下面小编就来和大... 目录一、为什么需要python处理Word转PDF?二、主流转换方案对比三、五套实战方案详解方案1:

SpringBoot集成EasyExcel实现百万级别的数据导入导出实践指南

《SpringBoot集成EasyExcel实现百万级别的数据导入导出实践指南》本文将基于开源项目springboot-easyexcel-batch进行解析与扩展,手把手教大家如何在SpringBo... 目录项目结构概览核心依赖百万级导出实战场景核心代码效果百万级导入实战场景监听器和Service(核心

idea Maven Springboot多模块项目打包时90%的问题及解决方案

《ideaMavenSpringboot多模块项目打包时90%的问题及解决方案》:本文主要介绍ideaMavenSpringboot多模块项目打包时90%的问题及解决方案,具有很好的参考价值,... 目录1. 前言2. 问题3. 解决办法4. jar 包冲突总结1. 前言之所以写这篇文章是因为在使用Mav

C# async await 异步编程实现机制详解

《C#asyncawait异步编程实现机制详解》async/await是C#5.0引入的语法糖,它基于**状态机(StateMachine)**模式实现,将异步方法转换为编译器生成的状态机类,本... 目录一、async/await 异步编程实现机制1.1 核心概念1.2 编译器转换过程1.3 关键组件解析

基于Python Playwright进行前端性能测试的脚本实现

《基于PythonPlaywright进行前端性能测试的脚本实现》在当今Web应用开发中,性能优化是提升用户体验的关键因素之一,本文将介绍如何使用Playwright构建一个自动化性能测试工具,希望... 目录引言工具概述整体架构核心实现解析1. 浏览器初始化2. 性能数据收集3. 资源分析4. 关键性能指