Cocos Creator 用JS脚本实现游戏背景的无限滚动

2023-10-30

       首先是实现的一个原理:使用2张相同的图片,让它们在脚本中不停的移动(用y值的减少来实现)。当有图片离开场景时,给此图片的y重新赋值(相当于位置的重置),在update中无限调用背景移动的函数。

我的canvas: 位于上方的图片结点名称为BG,下方的名称为BG2

背景结点的位置属性:

 

代码如下:

properties: {

far_bg: [cc.Node],  //用于管理背景图片结点的数组,记得回cocos面板中添加数组的结点数量

bg_speed: 0.6,   //移动时控制速度的变量

},

update(dt) {

this.bgMove(this.far_bg, this.bg_speed);

},

 

bgMove: function (bgList, speed) {

//每次循环二张图片一起滚动

for (var index = 0; index < bgList.length; index++) {

bgList[index].y -=speed;

}

//y坐标减去自身的height得到这张背景刚好完全离开场景时的y值

if (bgList[0].y <= 20 - bgList[0].height) {

bgList[0].y = 1000; //离开场景后将此背景图的y重新赋值,位于场景的上方

}

if (bgList[1].y <= 1020 - 2 * bgList[1].height) {

bgList[1].y = 1000;

}

},

 

 

 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Cocos Creator 用JS脚本实现游戏背景的无限滚动 的相关文章

  • 对CocosCreatorr的Draw call的理解

    Draw call比较直观的描述应该是 在CPU不改变渲染数据的情况下 openGL的一次渲染 opengGL的一次渲染 CPU调用图形绘制接口来使GPU执行渲染操作 渲染流程是CPU和GPU并行工作的过程 CPU和GPU之间通过一系列的缓
  • CocosCreator3.8研究笔记(十四)CocosCreator 资源管理Asset Manager

    在游戏的开发过程中 需要使用到大量的图片 音频等资源来 从而带来管理上的困难 Asset Manager 资源管理模块具备加载资源 查找资源 销毁资源 缓存资源 Asset Bundle 等功能 帮助开发者管理其资源的使用 一 资源的加载
  • Cocos Creator资源管理AssetManager细说一二

    关于AssetManager Asset Manager 是 Creator 在 v2 4 新推出的资源管理器 用于替代之前的 cc loader 新的 Asset Manager 资源管理模块具备加载资源 查找资源 销毁资源 缓存资源 A
  • CocosCreator中的Prefab文件格式总结

    CocosCreator所有的Prefab都是以下类似的格式 我们学会用文本编辑器查看Prefab文件 可以帮助我们更轻松的查找节点 查看节点和组件信息 批量修改节点和组件信息等等 因为在文本编辑器中的Prefab文件才是原始的 而且Coc
  • Rot.js 随机地牢,迷宫地图生成

    js 插件随机地牢 迷宫地图生成 插件git https github com ondras rot js tree master dist 使用 1 我们的游戏是在网页内进行的 一个基本的 HTML 文件就足够了
  • postman的json脚本转jmeter的jmx脚本

    一般研发同学会用postman做接口自测 但是我们做性能测试的时候 又不能用postman 对鉴权不了解的接口 自己调试脚本又很麻烦 这个时候 我们就可以用这个方法把json脚本转换成jmeter用的jmx脚本 环境准备 这几个工具需要提前
  • 【CocosCreator入门】CocosCreator组件

    Cocos Creator 是一款流行的游戏开发引擎 具有丰富的组件和工具 其中Spine 是一个基于骨骼系统的 2D 动画工具 它可以让开发者通过对骨架和关键帧的调整来制作出更加自然 流畅的动画效果 Cocos Creator 支持使用
  • mvvm设计模式总结

    要了解mvvm 首先要了解mvc和mvp 我们也先简单说一下mvc和mvp MVC MVC全名是Model View Controller 是模型 model 视图 view 控制器 controller 的缩写 一种软件设计典范 用一种业
  • cocos creator主程入门教程(十)—— A*寻路

    这一篇介绍A 寻路算法 在RPG SLG 模拟经营类游戏 有需要给角色寻路的需求 一般寻路我们采用A 寻路算法 A 寻路算法是一种广度优先启发性算法 先说说什么叫广度优先 搜索分为广度优先和深度优先 主要体现在对节点的展开上 深度优先一直往
  • CocosCreator之KUOKUO带你入门3D小游戏-躲避方块

    本次引擎2 1 0 编辑工具VSCode 目标 3D小游戏躲避方块 2 1 0版本已经出来好几天了 虽然有些地方还不够完善 但是毕竟是能写3D游戏了 简单的来写一个 嘻嘻 console log 滑稽 准备好了吗 GO 新建个工程 然后把画
  • 解决window平台下cocos creator 构建发布面板打开后无法显示问题

    项目场景 creator构建发布界面 问题描述 window平台下cocos creator 构建发布面板打开后无法显示 原因分析 项目的配置文件目录setting和local目录内容混乱可能会导致该问题 这时候后重装creator也是没用
  • CocosCreator JS追踪堆栈信息

    在开发过程中 可能有这样的需求 即使在没有报错的情况 也需要查看该函数的堆栈调用信息 对于这样的需求 我们可以使用JS原生的console trace来实现 具体代码 export let TraceArr console trace fu
  • cocos creator v3.6版本使用Intersection2D模块的circleCircle方法

    在cocos creator v3版本中Intersection2D模块的circleCircle方法可以用来检测两个圆形是否相交 该方法可以实现的功能有 cocos creator吸铁石实现 cocos creator物体在固定位置吸附
  • 预览word文件,支持下载(微软提供)

    预览打印 file 文件对象 url 接口地址 filepath 文件路径 filetype 文件类型 PS 兼容docx pdf后缀文件 export const filePreview file gt if file filepath
  • CocosCreator接入GoogleAdMob激励广告

    我们的App需要通过接入广告的方式来赚取收入 其中GoogleAdMob就是比较简单容易实现的一种 我在文章中接入GoogleAdmob的方式是通过AndroidStudio原生来接入的 一 前提条件 使用 Android Studio 1
  • 集成FCM推送一系列问题

    FCM Firebase Cloud Messaging 首先集成FCM需要一定的条件 必要条件 Android2 3版本以上的手机和拥有Google service的框架应用和不在国内的网络 使用外网 第一国内的手机一般阉割了Google
  • Cocos Creator 如何处理物理和碰撞检测?

    Cocos Creator 如何处理物理和碰撞检测 cocos creator 版本 v3 6 1 Cocos Creator 3 x 实现碰撞检测 Cocos Creator 通过使用物理引擎来处理物理和碰撞检测 Cocos Creato
  • CocosCreator之KUOKUO带你做小小赛车-摄像机跟随

    本次引擎2 0 5 编辑工具VSCode 目标 小小赛车 先亮素材 很简单 就两个 爱给网中的赛道 以及一个小车 好了 让我们新建工程然后把赛道放进去 调整方向与大小 然后把小车拖上去 这样 我是把赛道放大了2倍 旋转了90度 拖一拖位置
  • CocosCreator波浪Shader

    waveEffect effect Copyright c 2017 2020 Xiamen Yaji Software Co Ltd CCEffect techniques passes vert sprite vs vert frag
  • CocosCreator用git版本控制时meta文件的冲突解决方法

    我们在多人进行CocosCreator开发时 需要对CCC的meta文件进行提交 meta文件里有CCC编辑器唯一识别的uuid 这个uuid是CCC编辑器对文件识别的唯一标识 如果我们不提交 会造成各个程序员电脑之间的CCC自动生成的uu

随机推荐

  • mysql查询练习(二)

    11 查询每门课的平均成绩 查询3 105课程的平均分 mysql gt select avg degree from score where cno 3 105 avg degree 81 7500 1 row in set 0 00 s
  • 零拷贝( Zero-copy )

    一 背景 零拷贝 描述了计算机操作 其中CPU 不执行将数据从 一个存储区 复制到 另一个存储区 的任务 通过网络传输文件时 通常用于节省CPU周期和内存带宽 在传统的 Linux 操作系统的标准 I O 接口是基于数据拷贝操作的 即 I
  • C++基本语句(一)

    学习C 的第二天 一 C 的基本语句 1 1声明语句和变量 P21 P22 声明语句和变量 各自的作用是什么 为什么变量必须要声明 以及下面这段代码提供了哪两项信息 定义一个整型变量 int carrots 定义一个整型变量 int car
  • 尤里的复仇Ⅰ 小芳!

    尤里的复仇 小芳 作者 admin 时间 2021 06 15 分类 封神台 第一章 为了女神小芳 找到get参数id 使用 1 1 or 1 1 1 or 1 2 测试 发现存在sql注入 最终payload为 id 1 and 1 2
  • XMind中的 “甘特图”视图

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 甘特图 视图 当所有任务信息添加完成后 点击 任务信息 视图底部的 显示甘特图 按钮 XMind将弹出 甘特图 视图 所有任务信息将不同属性的线条展现 如果此时切换画布或者
  • math模块

    math 模块是Python中的标准模块 并且始终可用 要在此模块下使用数学函数 您必须使用导入模块import math 它提供对基础C库函数的访问 导入数学函数库 import math 查看 math 查看包中的内容 print di
  • C99与C89主要区别

    http www cnblogs com xiaoyoucai p 6146784 html
  • P4162 [SCOI2009]最长距离

    题目链接 这道题数据范围比较小 所以方法还是比较暴力的 思路 先按每个格子的状态 让所有格子与他周围的格子连一条权值为它连向那个格子的值 0或1 然后我们n方枚举所有格子跑最短路 最短路即为从起点到终点的最小障碍数 然后我们枚举所有最短路
  • Spring的两种定时器

    1 spring学习系列 定时器一TimerTask spring定时器一般有两种 TimerTask Quartz 本节只讲TimerTask 需要的包 aopalliance 1 0 jar commons logging 1 1 1
  • 使用html2Canvas跟jspdf将一部分页面生成PDF

    刚好碰到这么一个需求 前端需要将后端返回的json对象数据生成表单样式的pdf文件 首次接触所以简单记录一下 经过反复查找大致流程为 现在页面画一个表单 gt 拿到数据将数据放表单中 gt 给表单最外层加个ref利用html2Canvas生
  • Linux:NTP服务离线安装及配置

    0 常用命令 rpm qa grep ntp 查询已安装的ntp版本信息等 service ntpd status 查询ntp服务状态 service ntpd start 启动 service ntpd stop 停止 service n
  • hack the box - tier0

    Tier0 Meow Recommended Academy Modules INTRO TO ACADEMY STARTING POINT Tier 0 Machines Tags Enumeration Telnet External
  • 嵌入式linux解决方法

    一 问题描述 u boot version 2016 03 ubuntu version 18 04 ubuntu中环境配置正确 通过其他客户端能够挂载上 但是使用uboot得nfs下载命令会报错 gt nfs 80800000 192 1
  • CSS中表格以及表单的属性以及运用

    一 表格 按照一定的顺序摆放数据 表格是由一些单元格组成 1属性 border边框 cellspacing 单元格与单元格之间的距离 cell padding 单元格 边框和内容之间的距离 align 表格水平的位置 tr行 align 调
  • 并发编程NO.2

    并发编程 共享模型之管程 4 1共享资源问题 临界区 一个程序运行多个线程本身是没问题的 问题出在多个线程访问共享资源 多个线程读共享资源没有问题 但是多线程对共享资源进行读写操作 就会有问题 一段代码内如果存在对共享资源的多线程读写操作
  • leetcode 2. 两数相加

    2023 9 14 这道题还是有点难度 需要维护一个进位值 构造一个虚拟头节点dummy 用于结果的返回 还要构造一个当前节点cur 用于遍历修改新链表 整体思路就是长度短的链表需要补0 然后两链表从头开始遍历相加 要考虑进位 需要注意的点
  • [PHP] CURL获取cookie,模拟登录获取数据

    需求 通过CURL先登录 然后获取登录后的cookie 在请求数据接口的时候带上这个cookie即可 直接贴代码 1
  • 决策树分箱-特征工程之数据离散化处理-基于python实现

    一 简介 离散化是通过创建一组跨越变量值范围的连续区间将连续变量转换为离散变量的过程 1 1 离散化有助于处理异常值和高度偏斜的变量 离散化通过将这些值 与分布的剩余内点值一起放入较低或较高的区间来帮助处理异常值 因此 这些异常值观察不再与
  • rosbag与csv等格式转换

    1 rosbag 转换成csv 参看 https blog csdn net cliukai article details 94554350 具体就是 rostopic echo b
  • Cocos Creator 用JS脚本实现游戏背景的无限滚动

    首先是实现的一个原理 使用2张相同的图片 让它们在脚本中不停的移动 用y值的减少来实现 当有图片离开场景时 给此图片的y重新赋值 相当于位置的重置 在update中无限调用背景移动的函数 我的canvas 位于上方的图片结点名称为BG 下方