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

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

知识付费专栏

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

相关推荐
上优1 分钟前
Vue3纯前端同源跨窗口通信移动AGV小车
前端·vue.js·状态模式
h_k100862 分钟前
Chrome 插件开发入门技术文章大纲
前端·chrome
一只小阿乐2 分钟前
vue-router 的实现原理
前端·javascript·vue.js·路由·vue-router
Zz_waiting.3 分钟前
案例开发 - 日程管理 - 第七期
开发语言·前端·javascript·vue.js·html·路由
一只小风华~6 分钟前
Vue:事件处理机制详解
前端·javascript·vue.js·typescript·前端框架
dy17174 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918418 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂8 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技8 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip8 小时前
JavaScript二叉树相关概念
前端