Cocos Creator 教程:RichText 簡單使用

有時遊戲中要做一個廣播公告，然後廣播給所有的玩家。因爲要突出用戶信息與數字，如果還是cc.Label的話，就是太單調了，也沒有突出重點。這時就要使用RichText了。

支持標籤

注意：所有的 tag 名稱必須是小寫，且屬性值是用=號賦值

名稱	描述	示例	注意事項
color	指定字體渲染顏色，顏色值可以是內置顏色，比如 white，black 等，也可以使用 16 進制顏色值，比如#ff0000 表示紅色	<color=#ff0000>Red Text</color>	內置顏色值參考 cc.Color
size	指定字體渲染大小，大小值必須是一個整數	<size=30>enlarge me</size>	Size 值必須使用等號賦值
outline	設置文本的描邊顏色和描邊寬度	<outline color=red width=4>A label with outline</outline>	如果你沒有指定描邊的顏色或者寬度的話，那麼默認的顏色是白色(#ffffff),默認的寬度是 1
b	指定使用粗體來渲染	<b>This text will be rendered as bold</b>	名字必須是小寫，且不能寫成 bold
i	指定使用斜體來渲染	<i>This text will be rendered as italic</i>	名字必須是小寫，且不能寫成 italic
u	給文本添加下劃線	<u>This text will have a underline</u>	名字必須是小寫，且不能寫成 underline
on	指定一個點擊事件處理函數，當點擊該 Tag 所在文本內容時，會調用該事件響應函數	<on click="handler"> click me! </on>	除了 on 標籤可以添加 click 屬性，color 和 size 標籤也可以添加，比如 <size=10 click="handler2">click me</size>
br	插入一個空行	<br/>	注意：<br></br> 和 <br> 都是不支持的。
img	給富文本添加圖文混排功能，img 的 src 屬性必須是 ImageAtlas 圖集裏面的一個有效的 spriteframe 名稱	<img src='emoji1' click='handler' />	注意: 只有 <img src='foo' click='bar' /> 這種寫法是有效的。如果你指定一張很大的圖片，那麼該圖片創建出來的精靈會被等比縮放，縮放的值等於富文本的行高除以精靈的高度。

標籤與標籤是支持嵌套的，且嵌套規則跟 HTML 是一樣的。比如下面的嵌套標籤設置一個文本的渲染大小爲 30，且顏色爲綠色。

<size=30><color=green>I'm green></color></size>

也可以實現爲:

<color=green><size=30>I'm green</size></color>

Demo

本人用RichText做了一個廣播通知：

cc.Class({
    extends: cc.Component,

    properties: {
        richTextInfo: cc.RichText
    },

    ctor() {
        this.startPosX = 640;
        this.totalWidth = 1280;
    },

    /**
     * 組件腳本的初始化,可以操作this.node
     */
    onLoad() {
        console.log('loLoad');
        this.init({ name: '就是這麼6', coin: 300 });
    },

    /**
     * 使用cc.instantiate()創建實例時
     * 通過getComponent(腳本名稱)取得腳本實例
     * 然後使用init(data)來傳遞參數
     * @param {*} data 
     */
    init(data) {
        this.startPosX = 640;
        this.richTextInfo.node.x = this.startPosX;
        this.richTextInfo.string = this.initTemplate(data.name, data.coin);
    },

    initTemplate(name, coin) {
        let text = '恭喜<color=#00ff00> ' + name + ' </c>獲取<color=#0fffff> ' + coin + ' </color>萬金幣';
        return text;
    },

    /**
     * 從o~1
     * @param {*} nowPoint 
     */
    easeExponentialIn(nowPoint, totalWidth) {
        let factor = (this.startPosX - nowPoint) / totalWidth;
        this.accel = factor === 0 ? 0 : Math.pow(2, 10 * (1 - factor));
        //得到跟線性速度的差值
        this.xAccel = 1 - this.accel / 1000;
        this.xAccel = this.xAccel - factor;
        return 5 * (this.xAccel < 0 ? 0 : this.xAccel >= 1 ? 0 : this.xAccel);
    },

    /**
     * 每一幀回調
     * @param {*} dt 
     */
    update(dt) {
        let length = this.richTextInfo.node.width;
        let moveX = this.easeExponentialIn(this.richTextInfo.node.x, length + this.totalWidth);
        console.log('moveX=', moveX);
        this.richTextInfo.node.x -= dt * 200 + moveX;
        if (this.richTextInfo.node.x < -(length + this.startPosX)) {
            this.richTextInfo.node.x = this.startPosX;
        }
    },

    /**
     * 統一回收組件
     */
    onDestroy() {
    }
});

已放到Github上。

官方文檔

介紹:http://docs.cocos.com/creator/manual/zh/components/richtext.html
api:http://docs.cocos.com/creator/api/zh/classes/RichText.html