有时游戏中要做一个广播公告，然后广播给所有的玩家。因为要突出用户信息与数字，如果还是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
网友评论