cocos creator基礎-(八)cc.Label使用

1: 掌握cc.Label組件使用;
2: 掌握cc.RichText組件使用;

 

cc.Label

1:cc.Label是顯示文字的組件;
2:cc.Label屬性面板:
　　String: 文本顯示的內容;
　　Horiznotal: 水平對齊的方式: 左 右 居中;
　　Vertial: 上, 下, 居中, 字與行的排版
　　Font Size: 字體大小;
　　LineHeight: 每行的高度;
　　OverFlow:文字排版:
　　　　None: 沒有任何特性; Clamp: 截斷;
　　　　Shank:自動縮放到節點大小; Resize Height: 根據寬度自動折行;
　　Font: ttf字庫文件, 位圖字體字庫文件;
　　Font Family: 字體家族,使用系統的哪種字庫;
　　Use System Font: 是否使用系統字體;
3: Label節點所在的錨點修改;

 

自定義字庫

1: 准備好字體文件 .ttf矢量字庫;
使用矢量字體 , 優點: 靈活方便，缺點:字庫文件占資源

2: 使用字體制作工具生成位圖字體;
使用位圖字體;

3: 位圖字體的優點與缺點:
速度快，文件小; 支持的字符個數是有限的;

4: 自定義ttf字庫與自定義位圖字庫: 個性化我們的字體,個性化系統沒有的字庫;
自定義ttf字庫，字符不限制，你這個字庫里面有多少字符，就會支持, 靈活,占空間比較大
位圖字庫, 字符的個數是有限制的，省空間

 

代碼使用cc.Label

1: 代碼中獲取cc.Label組件;
2: 代碼綁定cc.Label組件到編輯器;
3: 修改cc.Label的文字內容: label.string = “xxxxxxxxxx”;

 

RichText組件

1: 添加富文本組件;
2: 設置富文本的字符內容;
<color=#0fffff>Text</color> 指定文字的顏色;
　　<img src='cow1_1'/> img標簽,文本插入圖片，圖片要在指定的圖集里面;
　　u: 給文本加下划線
　　i: 用斜體來渲染, b: 用粗體來渲染
　　size: 指定字體渲染大小，大小值必須是一個整數 <size=30>enlarge me</size>
　　outline: 設置文本的描邊顏色和描邊寬度 <outline color=red width=4>A label with outline</outline>

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //    default: null,      // The default value will be used only when the component attaching
        //                           to a node for the first time
        //    url: cc.Texture2D,  // optional, default is typeof default
        //    serializable: true, // optional, default is true
        //    visible: true,      // optional, default is true
        //    displayName: 'Foo', // optional
        //    readonly: false,    // optional, default is false
        // },
        // ...
        bmp_font: {
            type: cc.Label,
            default: null,
        },
    },

    // use this for initialization
    onLoad: function () {
        this.bmp_font.string = "1111";

        // 代碼里面獲取cc.Label組件, 修改文本內容
        var sys_label = this.node.getChildByName("sys_label").getComponent(cc.Label);
        sys_label.string = "MMM NNN";
    },

    // called every frame, uncomment this function to activate update callback
    // update: function (dt) {

    // },
});