Cocos Creator3.x设置动态加载背景图并且循环移动

news/2024/9/23 7:31:53/

效果图

在这里插入图片描述

项目结构

项目层级结构:
在这里插入图片描述
预制:
在这里插入图片描述

代码

typescript">import { _decorator, CCFloat, Component, Node, Sprite, instantiate, Prefab, assert, UITransform } from 'cc';
const { ccclass, property } = _decorator;/*** 背景脚本*/
@ccclass('Background')
export class Background extends Component {/** 背景图片预制体 */@property(Prefab)backgroundPrefab: Prefab;/** 背景图片移动速度 */@property(CCFloat)speed: number = 400;/** 背景图片高度 */private bgHeight: number;/** 背景节点数组 */private backgroundNodeArray: Node[] = [];/** 背景图片数量 */private readonly bgPicNum = 2;/*** 初始化背景图片数组*/private initBackgroundNodeArray() {for (let i = 0; i < this.bgPicNum; i++) {// 实例化预制体let bgNode = instantiate(this.backgroundPrefab);// 推入背景图片数组this.backgroundNodeArray.push(bgNode);// 挂载到背景根节点下this.node.addChild(bgNode);// 初始化背景图片高度this.initBackgroundHeight(bgNode);}}/***  初始化背景图片高度*/private initBackgroundHeight(bgNode: Node) {// 如果已初始化高度则返回if (!!this.bgHeight) {return;}// 获取背景图片精灵let bgSprite = bgNode.getComponent(Sprite);assert(!!bgSprite, "背景图片精灵未设置");// 动态读取背景图片高度this.bgHeight = bgSprite.spriteFrame.height;}/*** 初始化每个背景图片的位置*/private initEachBackgroundNodePosition() {for (let i = 0; i < this.backgroundNodeArray.length; i++) {let bgNode = this.backgroundNodeArray[i];// 图片位置按图片高度叠加bgNode.setPosition(bgNode.position.x, this.bgHeight * i);}}start() {assert(!!this.backgroundPrefab, "背景图片预制体未设置");// 初始化背景图片数组this.initBackgroundNodeArray();// 初始化背景图片位置this.initEachBackgroundNodePosition();}update(deltaTime: number) {// 更新背景图片位置this.updateBackgroundPosition(deltaTime);}/*** 更新背景图片位置* @param deltaTime 时间间隔*/private updateBackgroundPosition(deltaTime: number) {this.backgroundNodeArray.forEach(bgNode => {// 背景图片随时间下移bgNode.setPosition(bgNode.position.x, bgNode.position.y - this.speed * deltaTime);// 如果背景图片超出屏幕高度,则重置位置,接在上方if (bgNode.getPosition().y < -this.bgHeight) {// 计算帧运行到这里时,节点实际位置和背景图片高度的余数(如果图片下边界是-425,那么节点实际运行到这里时可能是-427了,就要把差值-2给补到平移的距离上去)let diff = bgNode.getPosition().y % this.bgHeight;// 重置图片位置bgNode.setPosition(bgNode.position.x, diff + this.bgHeight * (this.bgPicNum - 1));}});}
}

http://www.ppmy.cn/news/1529212.html

相关文章

使用 HFD 加快 Hugging Face 模型和数据集的下载

Hugging Face 提供了丰富的预训练模型和数据集&#xff0c;而且使用 Hugging Face 提供的 from_pretrained() 方法可以轻松加载它们&#xff0c;但是&#xff0c;模型和数据集文件通常体积庞大&#xff0c;用默认方法下载起来非常花时间。 本文将指导你如何使用 HFD&#xff08…

[mongodb][配置]MongoDB中限制内存

wiredTiger:engineConfig:cacheSizeGB: 2G配置片段是MongoDB中WiredTiger存储引擎的配置参数。这个参数用于设置WiredTiger缓存的大小。下面是对这个配置的解释&#xff1a; wiredTiger: 这是MongoDB使用的存储引擎之一&#xff0c;它提供了高性能的数据压缩和压缩算法&#xf…

算法打卡 Day34(贪心算法)-分发饼干 + 摆动序列 + 最大子序和

文章目录 理论基础Leetcode 455-分发饼干题目描述解题思路类似题目2410-运动员和训练师的最大匹配数 Leetcode 376-摆动序列题目描述解题思路 Leetcode 53-最大子序和题目描述解题思路 理论基础 贪心算法的本质是选择每一阶段的局部最优&#xff0c;从而达到全局最优。 贪心算…

全国832个贫困县名单及精准扶贫脱贫数据(2016-2020.11)

自党的十八大以来&#xff0c;通过全党全国各族人民的共同努力&#xff0c;中国成功实现了现行标准下9899万农村贫困人口的全部脱贫&#xff0c;832个贫困县全部摘帽。 摘帽名单 2016年-2020.11全国832个贫困县名单及精准扶贫脱贫数据整理&#xff08;大数据&#xff09;https…

基础算法(4)——前缀和

1. 前缀和 题目描述&#xff1a; 解法一&#xff1a;暴力解法 直接模拟实现题目流程即可 时间复杂度为&#xff0c;根据题目给出的条件&#xff0c;肯定会超时 解法二&#xff1a;前缀和&#xff08;适用题型&#xff1a;快速 求出数组中某一个 连续区间 的 和&#xff09;…

文件上传-php

查找方式 ***(1) 黑盒 查找(upload) 扫描 (2) 应用型 窗口 上传中心或者后台中心 上传 Ps:后台是后台 权限是权限 (3) 会员中心 (4) 白盒 基本函数定义 写前端的 Enctype 上传类型Method 提交方式Onsubmit 鼠标的时间Action"放在指定文件"Php 接受表单数据 isset(…

Android 新增目录怎么加入git

一服务器创建仓库 一个新的目录增加到仓库中&#xff0c;需要仓库有对应的仓库地址&#xff0c;这个让管理员在服务器段创建仓库地址和对应的文件夹名称&#xff0c; 例如&#xff1a;需求是系统需要增加一个中文输入法&#xff0c;我增加一个输入法的目录&#xff0c;管理员创…

网络安全(黑客技术)2024新版自学手册路线

&#x1f91f; 基于入门网络安全/黑客打造的&#xff1a;&#x1f449;黑客&网络安全入门&进阶学习资源包 前言 什么是网络安全 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、…