利用Cocos游戏开发中的跑马灯祝女神们节日快乐

点击上方亿元程序员+关注和★星标

引言

Cocos游戏开发中的跑马灯广播效果

大家好,今天是国际劳动妇女节,也就是我们如今熟知的女神节。

今天打算通过游戏开发中的跑马灯广播这最直接的方式祝女神们节日快乐!

跑马灯作为游戏中常见的UI元素,通常被用来展示重要的信息或者提示玩家,例如系统广播。

本文重点给大家介绍一下如何在Cocos游戏开发中实现跑马灯广播效果

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

1. 跑马灯的基本原理

跑马灯通常由一个矩形区域组成,其中包含了需要显示的文字或图像。

这个区域会在游戏界面中滚动,以吸引玩家的注意并传达信息。

跑马灯的滚动速度、文字或图像内容、字体样式等都可以根据游戏的需要进行调整和定制。

2. 跑马灯的应用场景

  1. 提示和提醒:跑马灯可以用来提示玩家游戏中的重要事件、任务或活动,例如"BOSS即将出现"、"活动时间剩余30分钟"等,帮助玩家及时作出反应。

  2. 传递信息:游戏开发者可以利用跑马灯向玩家传达游戏更新、新功能、活动公告等信息,保持玩家与游戏的互动和沟通。

3. 跑马灯广播效果的Cocos实例

1.资源准备

首先我们从美术小姐姐那里拿到我们本次女神节节目效果的资源,精致又美丽。毕竟人靠衣装,游戏靠UI装。

2.拼UI

如图所示 ,把小姐姐给的图片拖到场景中去,然后添加一个按钮用于测试触发跑马灯,再添加一个Mask组件和RichText组件。

3.写代码

首先 添加一个HorseRaceLamp组件,包括以下几个属性:

  • maskTransMask遮罩组件的引用,主要用来获取位置和宽度。
  • richTextRichText富文本组件的引用,主要用来获取宽度和设置内容。
  • speed,跑马灯滚动的速度。
  • tipsList,等待列表,正在展示跑马灯时,缓存后面的信息。

提供一个接口,用来显示跑马灯,第一个参数没用到,主要是用来过滤掉点击事件的默认参数。

如果跑马灯正在显示,将提示添加到待显示列表中。

计算 并设置跑马灯的起始位置,通过tween动画实现跑马灯效果。

当前跑马灯结束后,检测是否还有下一条内容,继续播报。

按钮添加一个点击事件,并且填入我们自定义的内容进行测试。

4.效果演示

结语

在这个属于你们的节日里,愿所有的美好都围绕着你们,幸福永远伴随你们左右,健康平安紧相随,快乐无边永相伴,美丽永远不打烊!女神节快乐!

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

更多实用源码 可通过阅读原文搜索"亿元程序员"获取,感谢您的支持。

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

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

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

推荐专栏:

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

100个Cocos实例

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

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

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

知识付费专栏

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

相关推荐
蓝天白云下遛狗22 分钟前
goole chrome变更默认搜索引擎为百度
前端·chrome
come112341 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL2 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl023 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang3 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼3 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿3 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再3 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref