简单易用的跑马灯-Cocos Creator

本文概要

本次我要分享的是，在游戏中非常常用的一个功能-跑马灯。可能在游戏中的通知公告、弹幕消息中用到。

效果图

实现思路

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

创建一个带有遮罩Mask的Node，然后再创建一个带有Sprite组件的Node作为跑马灯的背景，再就是创建带有一个RichText（或者Label）组件的Node。

然后把Label的锚点设置为（0，0.5），最好是将锚点X设置为0，这样的话，Label节点的水平位置会以节点的左边界为基准。便于后面的位置计算。

在这里主要是处理Label节点的位置的变化，一直以某个速度往某个方向偏移，比如一直往右偏移，那么就在update中，每帧将x坐标加一个定值，刷新后，节点的位置自然就会往右偏移。往左偏移，处理方式也是一样的。每帧将x坐标减一个定值。

要考虑的是边界情况，一旦Label偏移到了Mask的边界，例如到了Mask右边界，那我们就把Label的位置设置为Mask的左边界x坐标 - Label的宽度width，防止Label直接出现在Mask中，显得十分突兀。那如果是往左偏移，到了Mask左边界 - Label的宽度width，那就直接将Label的x坐标设置为Mask的右边界x坐标，即可实现效果。

上代码

const { ccclass, property } = cc._decorator;enum Direction {LEFT_TO_RIGHT = 1,RIGHT_TO_LEFT,
}@ccclass
export default class HorseReceLamp extends cc.Component {@property(cc.RichText)label: cc.RichText = null;@property(cc.Mask)maskNode: cc.Mask = null;@property({tooltip:"每秒移动多少像素",})m_speed: number = 100;@propertytext: string = 'hello';m_xLeftEnd: number = 0;m_xRightEnd: number = 0;m_yPos: number = 0;@property({tooltip:"文字滚动的方向，1是从左到右，2是从右到左",})m_direction: number = Direction.LEFT_TO_RIGHT;start() {// init logicthis.label.string = this.text;this.m_xRightEnd = this.node.x + this.maskNode.node.width * this.maskNode.node.anchorX;this.m_xLeftEnd = this.node.x - this.maskNode.node.width * this.maskNode.node.anchorX;let contentSize = this.label.node.getContentSize();let xPos:number = 0;if(this.m_direction === Direction.LEFT_TO_RIGHT){xPos = this.m_xLeftEnd - contentSize.width;}else{xPos = this.m_xRightEnd;}this.label.node.x = xPos;this.label.node.y = this.m_yPos;}update(dt) {if (this.m_direction === Direction.LEFT_TO_RIGHT) {let contentSize = this.label.node.getContentSize();if (this.label.node.x >= this.m_xRightEnd) { this.label.node.x = this.m_xLeftEnd - contentSize.width;}this.label.node.x += this.m_speed * dt;}else{let contentSize = this.label.node.getContentSize();if (this.label.node.x <= this.m_xLeftEnd - contentSize.width) { this.label.node.x = this.m_xRightEnd;}this.label.node.x -= this.m_speed * dt;}}
}

实用功能集锦，尽在https://github.com/CoderXZ/CocosCreatorDemo

结束语

我是小周，一名移动开发程序员。每天学习一点点，从小白到大牛，并非遥不可及。加油！

以上都是小周的个人观点，与大家一起分享学习，如有错误，还请指出，一起学习，一起进步！感谢你的关注！