简单易用的跑马灯-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;

    @property
    text: 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 logic

        this.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

结束语

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

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