cocoscreator实现跑马灯/滚动公告

几乎所有的游戏中 都会有这么一个功能。 来告诉玩家 有啥新鲜事发生了，有啥活动出台了等等 ，这个功能就是「跑马灯」。也就是 一个 「滚动的公告功能」

需求

实现一个 滚动的消息 ，从右往左循环展示。

实现思路

1. 首先要让消息是移动的。肯定需要两个点。起始点和终点,当消息体位置到达终点时。重置消息题的 位置为起点位置，如此循环
2. 其次消息不能滚动到设定显示的范围外。所以需要一个遮罩 当 消息体某部分 到达终点位置时 隐藏该部分消息。可以用cocoscreator自带的 Mask组件实现

实操

1.界面结构如下图

Mask组件 用于规定子节点可渲染的范围，带有 Mask 组件的节点会使用该节点的约束框，也就是 属性检查器 中 Node 组件的 Size 规定的范围。创建一个渲染遮罩，该节点的所有子节点都会依据这个遮罩进行裁剪，遮罩范围外的将不会渲染。

Mask组件添加：创建一个node，选择添加渲染组件 找到mask组件添加

然后把Label的锚点设置为（0，0.5），最好是将锚点X设置为0，这样的话，Label节点的水平位置会以节点的左边界为基准，最左边的位置 就是 label的当前位置。便于后面的位置计算。或者不改变锚点用 x位置*锚点也可以。

「tips:」

label建议用富文本 richtext. 因为richtext可以用BBCode（标签格式）让滚动消息突出重点部分 区分内容等

RichText 组件参考链接

2.代码如下

 start () {
       let str = "<color=#00ff00>关注公众号  </c><color=#0fffff>亮亮同学TT</color>   获取更多精彩内容"
       this.noticeLabel.string = str;
       let contentSize = this.noticeLabel.node.getBoundingBox();
       this.startx =  this.mask.width * this.mask.anchorX;
       this.endx =  -this.mask.width * this.mask.anchorX - contentSize.size.width;
       this.noticeLabel.node.x = this.startx;
    }

    setSpeed(speed:number){
        this.speed = speed;
    }

    update (dt) {
        if (this.noticeLabel.node.x <= this.endx ) { 
            this.noticeLabel.node.x = this.startx;
        }
        this.noticeLabel.node.x -= this.speed * dt;

    }

「另外」

代码中除了在update中实现 消息的移动 外还可以用cocoscreator缓动系统 cc.tween去实现。

私信作者获取完整源码

往期精彩内容：

TS项目中使用全局变量/对象

虚拟摇杆功能实现

无限滚动背景

子弹追踪实现

技能cd效果实现