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

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

知识付费专栏

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

相关推荐
长天一色5 分钟前
【ECMAScript 从入门到进阶教程】第三部分:高级主题(高级函数与范式,元编程,正则表达式,性能优化)
服务器·开发语言·前端·javascript·性能优化·ecmascript
NiNg_1_23422 分钟前
npm、yarn、pnpm之间的区别
前端·npm·node.js
秋殇与星河24 分钟前
CSS总结
前端·css
BigYe程普1 小时前
我开发了一个出海全栈SaaS工具,还写了一套全栈开发教程
开发语言·前端·chrome·chatgpt·reactjs·个人开发
余生H1 小时前
前端的全栈混合之路Meteor篇:关于前后端分离及与各框架的对比
前端·javascript·node.js·全栈
程序员-珍1 小时前
使用openapi生成前端请求文件报错 ‘Token “Integer“ does not exist.‘
java·前端·spring boot·后端·restful·个人开发
axihaihai1 小时前
网站开发的发展(后端路由/前后端分离/前端路由)
前端
流烟默1 小时前
Vue中watch监听属性的一些应用总结
前端·javascript·vue.js·watch
2401_857297912 小时前
招联金融2025校招内推
java·前端·算法·金融·求职招聘
茶卡盐佑星_2 小时前
meta标签作用/SEO优化
前端·javascript·html