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效果實現