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);
		}
	}
}
相关推荐
念念不忘 必有回响1 小时前
nginx前端部署与Vite环境变量配置指南
前端·nginx·vite
JIngJaneIL1 小时前
篮球论坛|基于SprinBoot+vue的篮球论坛系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·篮球论坛系统
摇滚侠2 小时前
Spring Boot 3零基础教程,新特性 ProblemDetails,笔记50
spring boot·笔记
一只一只2 小时前
Unity 3D笔记(进阶部分)——《B站阿发你好》
笔记·3d·unity·游戏引擎
小二·3 小时前
Visual Studio Code 高效开发完全指南(2025年更新版)
ide·vscode·编辑器
程序猿阿伟3 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
月临水3 小时前
Git 学习笔记
笔记·git·学习·1024程序员节
fruge4 小时前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu
朝新_5 小时前
【SpringBoot】详解Maven的操作与配置
java·spring boot·笔记·后端·spring·maven·javaee
sean5 小时前
开发一个自己的 claude code
前端·后端·ai编程