前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >用 Cocos Creator 做跑马灯效果!

用 Cocos Creator 做跑马灯效果!

作者头像
一枚小工
发布2020-04-23 11:45:37
1.5K0
发布2020-04-23 11:45:37
举报
文章被收录于专栏:Cocos Creator开发Cocos Creator开发

● 效果预览

● 使用说明

简单的实现了功能,没有封装,如果有需要,可以参考代码,实现更多的功能,或者增加更多颜色文字内容的显示。

● UI布局

显示消息内容的节点,主要由:暗色背景、消息内容父节点、消息内容节点组成。暗色背景就是为了显示效果;消息内容父节点需要添加一个以子节点内容大小自动调节大小的 Layout 组件;消息内容节点,就使用 Label 组件,根据自己的需要,设置字体大小和颜色,可以根据需要,使用代码设置。

消息显示节点父节点,Layout 设置如下:

● 实现逻辑

1. 设置 Label 组件内容,可以根据需要设置字体大小和颜色;

2. 更新 Label 显示的实际宽度,更新 Layout 的大小,更新 Label 实际宽度,demo 使用的是2.3.3 版本,API 是 _forceUpdateRenderData,以往老版本是 _updateRenderData(true),具体使用哪个 API,可以进对应版本的 Label 组件源码查看;

3. 判断 Layout 的宽度,如果小于屏幕宽度,直接显示,延迟后消失;

4. 如果Layout的宽度,超过屏幕宽度,启动定时器,修改 Layout 的位置,使 Layout 实现不断往左边移动的效果,当移动到最大值时消失。

● 获取代码

关注公众号,发送【跑马灯】获取完整代码下载地址,扫码关注公众号,获取更多技术分享和游戏源码!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-04-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 一枚小工 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档