Cocos Creator 教程:RichText 简单使用

有时游戏中要做一个广播公告，然后广播给所有的玩家。因为要突出用户信息与数字，如果还是cc.Label的话，就是太单调了，也没有突出重点。这时就要使用RichText了。

支持标签

注意：所有的 tag 名称必须是小写，且属性值是用=号赋值

名称	描述	示例	注意事项
color	指定字体渲染颜色，颜色值可以是内置颜色，比如 white，black 等，也可以使用 16 进制颜色值，比如#ff0000 表示红色	Red Text	内置颜色值参考 cc.Color
size	指定字体渲染大小，大小值必须是一个整数	enlarge me	Size 值必须使用等号赋值
outline	设置文本的描边颜色和描边宽度	A label with outline	如果你没有指定描边的颜色或者宽度的话，那么默认的颜色是白色(#ffffff),默认的宽度是 1
b	指定使用粗体来渲染	This text will be rendered as bold	名字必须是小写，且不能写成 bold
i	指定使用斜体来渲染	This text will be rendered as italic	名字必须是小写，且不能写成 italic
u	给文本添加下划线	This text will have a underline	名字必须是小写，且不能写成 underline
on	指定一个点击事件处理函数，当点击该 Tag 所在文本内容时，会调用该事件响应函数	click me!	除了 on 标签可以添加 click 属性，color 和 size 标签也可以添加，比如 click me
br	插入一个空行		注意：  和   都是不支持的。
img	给富文本添加图文混排功能，img 的 src 属性必须是 ImageAtlas 图集里面的一个有效的 spriteframe 名称		注意: 只有  这种写法是有效的。如果你指定一张很大的图片，那么该图片创建出来的精灵会被等比缩放，缩放的值等于富文本的行高除以精灵的高度。

标签与标签是支持嵌套的，且嵌套规则跟 HTML 是一样的。比如下面的嵌套标签设置一个文本的渲染大小为 30，且颜色为绿色。

I'm green>

也可以实现为:

I'm green

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 = '恭喜 ' + name + ' 获取 ' + coin + ' 万金币';
        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