用 Cocos Creator 作跑马灯效果!

● 效果预览程序员



● 使用说明微信

简单的实现了功能,没有封装,若是有须要,能够参考代码,实现更多的功能,或者增长更多颜色文字内容的显示。app


● UI布局工具

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



消息显示节点父节点,Layout 设置以下:字体



● 实现逻辑
spa

1. 设置 Label 组件内容,能够根据须要设置字体大小和颜色;
.net

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

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

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




● 获取代码

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



往期小工推荐  

点击标题便可阅读

抽奖实现丨相似王者荣耀积分夺宝怎么实现 ?

资源压缩丨除了图片压缩,还有哪些方式 

美术工具丨谁说不会美术的程序员不能作UI了 ?

本文分享自微信公众号 - 一枚小工(caizj_cn)。
若有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一块儿分享。

相关文章
相关标签/搜索