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

最新推荐文章于 2024-05-29 10:12:50 发布
最新推荐文章于 2024-05-29 10:12:50 发布
阅读量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 3953
本示例使用三张同样图片，排列方式为并排排列 逻辑关键代码： @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, ...
Cocos Creator 实现相机移动背景无限滚动效果
对酒当歌﹏✍
06-24 966
目录1、引言2、方法一2.1、实现方法2.2、问题分析3、方法二3.1、实现思路3.2、Demo演示3.3、示例下载4、结束语 1、引言   这段时间写了一个休闲小游戏，其中一个点就是背景移动的，事实上我直接照着上一篇的思路写完了，发布后发现有问题，当切入后台又返回的时候，两个移动的背景之间间隙！发布在vivo上没问题，发布在oppo上就一直存在这个问题，然后我就尝试解决问题！ 2、方法一 2.1、实现方法   看到使用动作系统不可以，我立即修改代码使用了update来不断刷新背景的位置，代码如下： on
cocoscreator游戏源码小程序游戏代码
最新发布
cocoscreator8的博客
05-29 1122
需要直接联系邮箱 获取 xaysfkmnl362@gmail.com
Cocos Creator 用JS脚本实现游戏背景的无限滚动
OMGholyshit的博客
08-09 4445
       首先是实现的一个原理：使用2张相同的图片，让它们在脚本中不停的移动（用y值的减少来实现）。当有图片离开场景时，给此图片的y重新赋值（相当于位置的重置），在update中无限调用背景移动的函数。 我的canvas: 位于上方的图片结点名称为BG，下方的名称为BG2 背景结点的位置属性：   代码如下： properties: { far_bg: [cc.Node],...
Cocos Creator 实现背景无限滚动效果
对酒当歌﹏✍
02-28 4306
文章目录1、引言2、问题3、原理4、实现4.1、场景搭建4.2、代码5、效果展示6、结束语 1、引言   我们在制作一些2d游戏时经常需要用到背景的滚动效果来做一些文章。 2、问题   那么既然背景滚动，那么我们总不能做一个无限长的背景来移动吧，那怎么办呢！事实上，解决方案不止一种，我们这里说一下两张背景图无限滚动的方法。 3、原理   简单来说就是场景中两张背景图片交替的在移动，在游戏的每帧中...
CocosCreator三消小游戏-3.6版本-Ts
02-03
游戏界面：分数显示、三消游戏玩法（消除奖励时间+1秒）、元素动画入场、更换现有元素动画效果、更换背景、结束游戏（返回主界面）、暂停面板可以控制背景音乐与音效播放以及声音大小 结算界面：本次获分、历史最高...
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
1. **Cocos Creator**：Cocos Creator是一款全栈式的2D/3D游戏开发工具，它提供了直观的可视化编辑器和强大的脚本系统，支持JavaScript和TypeScript。开发者可以使用Cocos Creator创建跨平台的游戏，包括iOS、...
小鸟闯管道CocosCreator 2D小游戏
12-14
JavaScript是CocosCreator的主要编程语言，它允许开发者编写逻辑，控制游戏的行为。在这个项目中，JavaScript脚本被用于处理游戏逻辑，如小鸟的飞行行为、管道的生成与移动、分数的计算等。开发者可以通过事件监听、...
cocos creator 2.4.5 2D RPG 无限滚动背景实现
LANGZI7758521的专栏
07-25 1639
要点： 场景默认自带一个Camera，渲染场景内所有的物体 Camea节点可以看做是一个空节点下挂接一个Camea组件，所以本身不可见 每个场景都可以有多个Camera，通过关联组名来分组渲染 多个Camera的渲染层级符合节点树规则，先按Camera节点的层级分优先级，越下面的Camera，其关联的组越后渲染；同一Camera分组下的节点，越下面的节点越后渲染。越后渲染的节点看起来越接近顶层。 案例 Camera 实践：无限视差滚动地图实现 一、Camer
CocosCreator无限滚动背景
公众号 亮亮同学TT
10-15 575
想法是： 两张背景图同时移动，到达边界点 重置 背景图的位置，但是效果不好 会出现 黑边。于是看了 坐标的数据，找到了问题点是出边界的 临界点的 坐标 会有偏差，于是 变更改了 计算边界的 方法。凑效。 总体逻辑：在update里两张背景图 同时 移动 ，每张图移出屏幕时将该背景图放到 另一张图的上方。如此循环。 实操： 代码： 横版滚动以此类推。 长按 或 搜索 亮亮同学TT 关注微信公众号。获取更多 ...
cocos creator:背景无限滚动
嗜酒醉狼
10-17 3994
代码地址：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; ...
CocosCreator滚动背景
nihaoqlw的博客
11-06 2374
先上代码： cc.Class({ extends: cc.Component, properties: { bg1: { default: null, type: cc.Node, }, bg2: { default: null, type: cc.Node, }, roll_speed: 3, }, update: function(dt) { var ...
CocosCreator:背景滚动 、背景循环滚动
weixin_39114763的博客
11-07 471
CocosCretor版本3.2.1。制作游戏背景的循环滚动。
LazyAn-CocosCreator3D教程-玩家移动和地面uv滚动
qq_39014369的博客
03-01 1649
前言 最近开始做3D项目了,用了一段时间CocosCreator3.4.1版本,记录一些简单的功能实现 点击地图玩家移动 摄像机跟随 地面uv无限滚动 准备工作 新建一个3D工程,用cocos官方的soldier模型作为我们的玩家角色,找一张图片作为地面贴图,注意图片尺寸一定要是2的n次幂,并且,红框属性调成repeat,这样才可以实现uv滚动. 有了地面贴图,再新建一个材质文件,并把贴图拖入 在场景创建一个Plane,拖入材质,将主摄
cocos creator游戏开发-消灭星星
10-02
Cocos Creator是一款面向游戏开发者的跨平台游戏开发工具，它集成了Cocos2d-x游戏引擎和Cocos Studio编辑器，支持多种平台上的游戏开发，如iOS、Android、Windows等。 消灭星星是一款基于Cocos Creator开发的游戏。在游戏中，玩家需要消除屏幕上的星星，以获得分数。游戏开始时，屏幕上会随机生成一些星星，玩家可以通过点击相连的星星来消除它们。消除的星星越多，得到的分数就越高。玩家可以通过不断消除星星来刷新高分记录，挑战自己的极限。 在消灭星星游戏中，Cocos Creator提供了丰富的功能和工具，为游戏开发者提供了便利。开发者可以使用Cocos Creator的图形界面编辑器来创建游戏场景、导入资源和设置游戏规则等。同时，Cocos Creator还提供了强大的脚本编写功能，开发者可以使用JavaScript或TypeScript编写游戏逻辑，实现游戏中的各种功能。 除了基本的消除星星玩法，Cocos Creator还支持添加特殊道具、关卡设计、人物角色等功能。开发者可以根据自己的需求，自定义游戏的玩法和功能，使游戏更加有趣和有挑战性。 总而言之，Cocos Creator游戏开发工具提供了强大的功能和便捷的开发环境，使开发者可以轻松地开发出各种各样的游戏，包括消灭星星这样的小而精致的休闲游戏。无论是想要学习游戏开发还是实现自己的游戏创意，Cocos Creator都是一个不错的选择。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值