从龙珠到Cocos游戏开发中的无限循环滚动背景

引言

从龙珠到Cocos游戏开发中的无限循环滚动背景

近日,鸟山明去世的消息传来,网友们纷纷表示哀悼,这位被外交部哀悼的鸟山明或许你不熟悉,但是他的作品《龙珠》承载着一代人的记忆与青春。

**《龙珠》**作为一部向中国文化致敬的作品,笔者在刷视频时回忆了许多,当看到上面那段视频时,结合前几天的龙抬头,百感交集。

画面中,饱含梦想的少年追逐神龙,不断向前奔跑。像极了一场没有终点的酷跑游戏。

言归正传,今天给大家介绍一下如何在Cocos游戏开发中 实现酷跑游戏 中的无限循环滚动背景

本文源工程在文末获取,小伙伴们自行前往。

1. 什么是无限循环滚动背景

无限循环滚动背景是指在一个游戏或应用程序中的背景图像或纹理,通过不断循环滚动来模拟连续的运动效果,同时在滚动到一定程度时重新开始,从而创建了一种无限的感觉。

这种技术通常应用于2D游戏或应用程序中,用于模拟角色移动、车辆行驶等场景中的背景运动效果。

2. 无限循环滚动背景怎么实现

实现无限循环滚动背景的一种常见方法是,在背景图像(或纹理)的两个或多个副本之间无缝地切换,并确保当一个副本滚动到一定位置时,另一个副本可以接替它的位置,从而保持滚动连续性。

这样,即使玩家或对象在游戏中移动,也能持续观察到滚动的背景,而不会出现中断的感觉。

3. 无限循环滚动背景的Cocos实例

1.资源准备

首先我们借用一下酷跑游戏中的主角和背景图,资源仅供学习,请勿用作其他用途。

2.拼UI

如图所示,背景主要分成两部分,一部分是近景跑道,另外一部分是远景海与天。

其中实现无限循环滚动背景的关键在于:

  • 1.任意不同或者相同的背景块之间必须可以无缝连接。
  • 2.每个由背景散件组成的背景组必须占满一屏。

循环原理 如下图,当左边一块背景块完全离开视野后,移动到右边一块背景块的右边。

3.写代码

首先 添加一个BackgroundLoop组件,在start方法中克隆我们拼接好的一个背景块。

然后update方法中不断修改所有背景组位置,形成一个移动的效果。

为了区分近景和远景,我们添加一个移动速度的配置,使近景移动快,远景移动慢。

第一个背景块移动到屏幕外后,移动到屏幕右侧。

最后给近景和远景都添加上组件,并且配置不同的移动速度。

4.效果演示

由于太过于单调了,我们添加一个主角,这样就好看多了。

结语

本文源工程 可通过私信 发送BackgroundLoop获取。

近日,笔者受麒麟子 (深耕游戏引擎与游戏开发15年 ,每一滴干货都源自商业项目 实践)的邀请,以嘉宾 的形式加入知识星球,星球主要用于:

  • 聚焦问题、深度交流、一对一提问
  • 分享商业机会、交流变现心得
  • 分享社群独家干货信息
  • 使你获得技术与商业双修精进

总的来说,星球的目标 只有一个:提供优质内容,让你更加优秀 。感兴趣的小伙伴可以扫码 了解和捧场。72小时内随时退款 ,试试未尝不可!点击直达

我是"亿元程序员",一位有着8年游戏行业经验的主程。在游戏开发中,希望能给到您帮助, 也希望通过您能帮助到大家。

AD:笔者线上的小游戏《填色之旅》《方块掌机经典》《贪吃蛇掌机经典》《重力迷宫球》大家可以自行点击搜索体验。

实不相瞒,想要个在看 !请把该文章分享给你觉得有需要的其他小伙伴。谢谢!

推荐专栏:

你知道和不知道的微信小游戏常用API整理,赶紧收藏用起来~

100个Cocos实例

8年主程手把手打造Cocos独立游戏开发框架

和8年游戏主程一起学习设计模式

从零开始开发贪吃蛇小游戏到上线系列

知识付费专栏

点击下方绿色按钮+关注。

相关推荐
sbjdhjd4 小时前
Redis 主从复制、哨兵高可用与 Cluster 集群部署实验手册
运维·前端·redis·云原生·开源·bootstrap·html
乐兮创想 小林5 小时前
企业官网移动端性能优化实战:从 Core Web Vitals 到图片/CDN/响应式的工程清单
前端·性能优化·网站建设·北京网站建设公司
前端一小卒5 小时前
不手写代码的第 30 天,我才明白前端这个岗位还剩什么
前端·javascript·ai编程
Ajie'Blog5 小时前
Copilot Agent Tasks API 开放:AI 编程开始进入后台任务时代
服务器·前端·javascript·人工智能·copilot·ai编程
老毛肚6 小时前
jeecgboot vue TS & 模板化 04
前端·javascript·vue.js
AI_零食7 小时前
鸿蒙PC Electron跨平台应用开发:24时区时间表应用详解
前端·华为·electron·开源·harmonyos·鸿蒙
Electrolux8 小时前
[onlyoffice-v9]纯前端怎么实现编辑预览office
前端·javascript·github
码云之上8 小时前
聊聊如何设计一个高效、稳定的 Node.js 接入层
前端·后端·node.js
kyriewen9 小时前
我读了一遍 Babel 编译后的 async/await,终于搞懂了它的原理(附 20 行手写实现)
前端·javascript·面试
IT_陈寒9 小时前
Vite项目build后路由404了?你可能漏了这个小配置
前端·人工智能·后端