利用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年游戏主程一起学习设计模式

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

知识付费专栏

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

相关推荐
狂炫冰美式8 小时前
3天,1人,从0到付费产品:AI时代个人开发者的生存指南
前端·人工智能·后端
一千柯橘8 小时前
从摄影新手到三维光影师:Three.js 核心要素的故事
前端·three.js
南囝coding8 小时前
2025年CSS新特性大盘点
前端·css
c***V3239 小时前
前端框架对比:10个主流框架优缺点分析
前端·前端框架
栀秋6669 小时前
当我把 proto 打印出来那一刻,我懂了JS的原型链
前端·javascript
Cassie燁9 小时前
element-plus源码解读1——useNamespace
前端·vue.js
一直在学习的小白~9 小时前
npm发布脚手架流程
前端·npm·node.js
ErMao9 小时前
TypeScript的泛型工具集合
前端·javascript
涔溪9 小时前
如何解决微前端架构中主应用和微应用的通信问题?
前端·架构
重铸码农荣光10 小时前
深入理解 JavaScript 原型链:从 Promise.all 到动态原型的实战探索
前端·javascript·promise