Cocos creator 游戏背景循环滚动--Javascript编写

最新推荐文章于 2021-07-25 11:12:54 发布
VIP文章 最新推荐文章于 2021-07-25 11:12:54 发布
阅读量1.3w 收藏 18
点赞数 3
分类专栏： Cocos creator 文章标签： cocos creator 2D游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_38630622/article/details/79074151
版权

Cocos creator 制作游戏背景循环滚动--Javascript编写

     我们知道，在利用触控的Cocos creator编辑器开发2d横屏游戏的时候，经常需要利用背景的移动来模拟主角前进后退等效果。作为小白，在自己完成毕业设计和做一些案例的时候，接触到了这方面的东西，所以结合其他写者的方法，加上自己的一些代码，分享给需要的人。

  • 了解原理

    简单来说就是场景中两张背景图片交替的在移动，在游戏的每帧中不断调整图片的位置，以实现背景的循环滚动效果。

  • 实现步骤  
  • 在编辑器上先添加三个节点，分别命名为backgruond，bg1，bg2࿰
最低0.47元/天 解锁文章
忧桑该小绵羊
关注
  • 3
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
CocosCreator背景无限滚动(使用多张图片实现)
楊帥
09-05 3884
本示例使用三张同样图片，排列方式为并排排列 逻辑关键代码： @property([cc.Node]) bgs: cc.Node[] = []; //用于管理背景图片结点的数组,记得回cocos面板中添加数组的结点数量 bg_speed: number = 20; //移动时控制速度的变量 dis: number = this.bg_speed * 10; //即将消失的图片延迟...
cocos creator实现图片的循环滚动效果
热门推荐
lck898989的博客
03-16 1万+
首先在一个cocos creator上创建一个节点，比如说是bg1,bg2它们分别代表同样的图片要实现循环滚动效果，需要做的是两张图片具有相同的移动速度，然后到达临界条件的时候将第一幅图进行重置位置我在bg1上绑定脚本BackGround1.js在BackGround1.js中设置相关属性//将全局变量加载进来 cc.Class({ extends: cc.Component, ...
CocosCreator三消小游戏-3.6版本-Ts
02-03
游戏演示视频B站地址：https://www.bilibili.com/video/BV1th411a7j1/ 开始界面：调节音量大小、开始游戏 游戏界面：分数显示、三消游戏玩法（消除奖励时间+1秒）、元素动画入场、更换现有元素动画效果、更换背景、结束游戏（返回主界面）、暂停面板可以控制背景音乐与音效播放以及声音大小 结算界面：本次获分、历史最高、根据本次获分与历史提高对比提示不同信息、再玩一次、返回主界面
cocos creator 2.4.5 2D RPG 无限滚动背景实现
LANGZI7758521的专栏
07-25 1569
要点： 场景默认自带一个Camera，渲染场景内所有的物体 Camea节点可以看做是一个空节点下挂接一个Camea组件，所以本身不可见 每个场景都可以有多个Camera，通过关联组名来分组渲染 多个Camera的渲染层级符合节点树规则，先按Camera节点的层级分优先级，越下面的Camera，其关联的组越后渲染；同一Camera分组下的节点，越下面的节点越后渲染。越后渲染的节点看起来越接近顶层。 案例 Camera 实践：无限视差滚动地图实现 一、Camer
cocos creator:背景无限滚动
嗜酒醉狼
10-17 3949
代码地址：https://gitee.com/wolfdong7/bg_roll const {ccclass, property} = cc._decorator; @ccclass export default class NewClass extends cc.Component { bg1 = null; bg2 = null; cur_bg = null; ...
cocos黑暗斩_动态合图你真的用好了吗？| Cocos Creator
weixin_39919948的博客
12-19 620
支持动态合图的渲染组件： Sprite、 Label( BITMAP 模式)。注意事项：在场景加载前，动态合图系统会进行重置， SpriteFrame贴图的引用和 uv 都会恢复到初始值。查看方法：通过以下代码可以在游戏中看到所有动态合图会被加到一个 scrollview上，便于实时查看合图效果。cc.dynamicAtlasManager.showDebug( true);其它规则(文档里未直接...
Cocos Creator 实现相机移动背景无限滚动效果
对酒当歌﹏✍
06-24 925
目录1、引言2、方法一2.1、实现方法2.2、问题分析3、方法二3.1、实现思路3.2、Demo演示3.3、示例下载4、结束语 1、引言   这段时间写了一个休闲小游戏，其中一个点就是背景移动的，事实上我直接照着上一篇的思路写完了，发布后发现有问题，当切入后台又返回的时候，两个移动的背景之间间隙！发布在vivo上没问题，发布在oppo上就一直存在这个问题，然后我就尝试解决问题！ 2、方法一 2.1、实现方法   看到使用动作系统不可以，我立即修改代码使用了update来不断刷新背景的位置，代码如下： on
Cocos Creator 用JS脚本实现游戏背景的无限滚动
OMGholyshit的博客
08-09 4426
       首先是实现的一个原理：使用2张相同的图片，让它们在脚本中不停的移动（用y值的减少来实现）。当有图片离开场景时，给此图片的y重新赋值（相当于位置的重置），在update中无限调用背景移动的函数。 我的canvas: 位于上方的图片结点名称为BG，下方的名称为BG2 背景结点的位置属性：   代码如下： properties: { far_bg: [cc.Node],...
Cocos Creator 实现背景无限滚动效果
对酒当歌﹏✍
02-28 4173
文章目录1、引言2、问题3、原理4、实现4.1、场景搭建4.2、代码5、效果展示6、结束语 1、引言   我们在制作一些2d游戏时经常需要用到背景的滚动效果来做一些文章。 2、问题   那么既然背景滚动，那么我们总不能做一个无限长的背景来移动吧，那怎么办呢！事实上，解决方案不止一种，我们这里说一下两张背景图无限滚动的方法。 3、原理   简单来说就是场景中两张背景图片交替的在移动，在游戏的每帧中...
CocosCreator无限滚动背景
公众号 亮亮同学TT
10-15 560
想法是： 两张背景图同时移动，到达边界点 重置 背景图的位置，但是效果不好 会出现 黑边。于是看了 坐标的数据，找到了问题点是出边界的 临界点的 坐标 会有偏差，于是 变更改了 计算边界的 方法。凑效。 总体逻辑：在update里两张背景图 同时 移动 ，每张图移出屏幕时将该背景图放到 另一张图的上方。如此循环。 实操： 代码： 横版滚动以此类推。 长按 或 搜索 亮亮同学TT 关注微信公众号。获取更多 ...
cocosCreator支持gif图片demo-使微信小游戏支持gif图片
01-13
pc浏览器能加载出来，但微信开发者工具和真机上就报错了，因此优化了下源码，使cocosCreator支持gif图片，pc浏览器、微信开发者工具、微信小游戏真机都能加载出来，支持远程、本地图片。下载项目可直接运行预览效果...
CocosCreator-Build-Encrypt.zip
03-27
1.加密图片资源 2.加密配置文件 3.自定义加解密方式
cocos creator 实例项目文件--Flip the gun
12-11
cocos creator 配合ts脚本开发的休闲游戏，玩法简单，不断地跳跃获得奖励，可以作为新手的入门项目，包含转场，Json操作等内容。 导入cocos creator 即可打开
Cocos Creator 3D开发入门----CocosCreator3D篮球.zip
12-13
Cocos Creator 3D开发入门----CocosCreator3D篮球.zip import { _decorator, Component, Node, RigidBodyComponent, PhysicMaterial, ColliderComponent } from "cc"; const { ccclass, property } = _...
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告.docx
04-18
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告
网站界面设计mortal0418代码
04-18
网站界面设计mortal0418代码
PHP毕业设计-校园失物招领系统源码+数据库.zip
04-18
PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可
2024年神经酸行业分析报告.pptx
最新发布
04-18
2024年神经酸行业分析报告.pptx
Java爬虫信息抓取的实现 完整实例（源码）
04-18
【Java爬虫】信息抓取的实现 完整实例（源码）
cocos creator游戏开发-消灭星星
10-02
同时，Cocos Creator还提供了强大的脚本编写功能，开发者可以使用JavaScript或TypeScript编写游戏逻辑，实现游戏中的各种功能。 除了基本的消除星星玩法，Cocos Creator还支持添加特殊道具、关卡设计、人物角色等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值