cc.Button和Label組件

cc.Button

1.添加按鈕的方法

直接添加帶Button組件的節(jié)點

先創(chuàng)建節(jié)點,再添加組件

2.過渡效果

普通狀態(tài), 鼠標(biāo)滑動到物體上,按下狀態(tài),禁用狀態(tài).

這個就是過渡效果,可以有這幾種方式.

(1)不設(shè)置過渡,只響應(yīng)事件;

(2)顏色過渡.過渡效果中使用顏色,

(3)精靈過渡,使用圖片過渡;

在這里選擇過渡效果,

(1) COLOR顏色過渡

Normal普通狀態(tài)

Pressed按下狀態(tài)

Hover鼠標(biāo)懸停狀態(tài)

Disabled禁用狀態(tài)

Duration 過渡時間,也就是改變狀態(tài)的時間

(2)SPRITE 使用精靈來過渡

只要把對應(yīng)的精靈放到對應(yīng)的地方即可

(3)按縮放過渡

第一個是時間

然后是縮放的大小

3.Enable Auto Gray Effect

也就是你勾選上的時候

如果你的按鈕是被禁用狀態(tài),他會再內(nèi)部把這個

精靈渲染成灰色/

4.按鈕添加響應(yīng)事件

按鈕添加響應(yīng)事件-->到節(jié)點-->代碼組件的響應(yīng)函數(shù)

    //響應(yīng)函數(shù)
    on_button_click: function(){
    console.log("領(lǐng)取成功");
    },

這個代碼組件掛在哪個節(jié)點上,就要通過這個節(jié)點才能調(diào)用響應(yīng).

選擇代碼組件

選擇響應(yīng)函數(shù)

如果這個函數(shù)每次進來要傳遞參數(shù).應(yīng)該怎么弄呢？

使用這個進行傳遞,
這個參數(shù)是一個字符串

    on_button_click: function(e,str){
    //第一個參數(shù)是event
    //第二個是闖進來的參數(shù) 字符串
    console.log("領(lǐng)取成功");
    console.log(str);
    },

5.在代碼里面使用cc.Button

(1)首先你要添加或者獲取這個cc.button組件

通過代碼獲取

    //獲取子節(jié)點
    var btn_rev = this.node.getChildByName("btn_receive_0");
       //通過這個節(jié)點獲取 cc.Button組件
       this.button_rev = btn_rev.getComponent(cc.Button);
       
       
     換一種寫法
    this.button_rev = this.node.getChildByName("btn_receive_0").getComponent(cc.Button);

再代碼里添加button組件

 this.button_rev = this.node.getChildByName("btn_receive_0").addComponent(cc.Button);

(2)代碼添加響應(yīng)函數(shù)

他有一個響應(yīng)事件列表,也就是多個響應(yīng)事件

也就是在clickEvents里面加入一個元素

數(shù)組的類型是Component.EventHandler

他有4個屬性

    onLoad: function () {
    //獲取子節(jié)點
       //通過這個節(jié)點獲取 cc.Button組件
       this.button_rev = this.node.getChildByName("btn_receive_0").getComponent(cc.Button);
       console.log(this.button_rev );
       //創(chuàng)建響應(yīng)handle
       var click_event = new cc.Component.EventHandler;
       //找到目標(biāo)節(jié)點 
       click_event.target = this.node;
       //找到目標(biāo)組件名 就是這個腳本
       click_event.component = "HelloWorld";
       //找到組件的響應(yīng)函數(shù)
       click_event.handler =  "on_re_button_click";
       //自定義數(shù)據(jù) 參數(shù) 字符串類型
       click_event.customEventData = "hello";
       //添加到響應(yīng)事件列表
       this.button_rev.clickEvents.push(click_event);
    },
    on_re_button_click: function(e,str){
    console.log("領(lǐng)取成功"+str);
    },

Button響應(yīng)這個觸摸點擊,所以Button所掛在的節(jié)點，

一定要有大小,如果掛再一個大小為0的節(jié)點上,按鈕響應(yīng)不到.

6.主動觸發(fā)事件,有時候這個事件是由用戶點擊觸發(fā),有時候系統(tǒng)觸發(fā)

比如用戶3分鐘沒有點擊返回主菜單,這時候要系統(tǒng)自動觸發(fā)返回就行了.

使用emit 觸發(fā)指定 handler 函數(shù)，該參數(shù)是回調(diào)函數(shù)的參數(shù)值（可不填）。

       //5秒后自動觸發(fā)
       this.scheduleOnce(function(){
       //通過代碼觸發(fā)響應(yīng)事件
       //首先獲取觸摸事件列表
       var click_e = this.button_rev.clickEvents;
       //遍歷事件列表
       for(var i =0;i<click_e.length;i++){
       //獲取事件
       var comp_handler = click_e[i];
       //主動觸發(fā)
       comp_handler.emit(["","aaa"]);
       }
       
       }.bind(this),5);

cc.Label

1.String 要顯示的內(nèi)容

2.文字水平對齊模式 

左對齊

居中

右邊

3.Line Height 文字行高,以point為單位

也就是以行的高度,不管你字體大小.

這個node的高度是行數(shù)*(乘以)行高 來計算的

4.Vertical Align 文字垂直對齊模式

TOP在一行的最頂上 對齊

CENTER 中間

BOTTOM底邊

6.FontSize 字體大小尺寸

7.Overflow 文字排版模式

如果文字排版超出范圍怎么辦？

(1)CLAMP 范圍之外的文字被裁剪掉

(2)SHRINK 自動根據(jù)點擊約束框縮小文字

(3)RESIZE 根據(jù)文本內(nèi)容更新節(jié)點height屬性

類似自動換行

8.是否默認使用系統(tǒng)字體,Use SystemFont

Font Family:字體家族,你要使用系統(tǒng)的哪種字庫

如果你不用系統(tǒng)字體,那么他就不顯示.

9.Font 自定義字庫, 使用自己的字體資源

自定義字體有兩種:

(1)準(zhǔn)備好字體文件.ttf矢量字庫

使用矢量字體,優(yōu)點:靈活方便,缺點:字庫文件占用資源,

(2)使用字體制作工具生成的位圖,使用位圖字體;

fnt是這個位圖字庫 描述文件:有對應(yīng)的圖片的位置、大小偏移

優(yōu)點:速度快,文件小, 缺點: 支持的字符個數(shù)是有限的;

只有里面元素有的圖片才能顯示出來.

總結(jié):

上面兩種自定義ttf字庫和位圖字庫,都是用來個性化我們的字體的.

自定義ttf字庫,字符不受限制,你這個字庫里有多少個字符,都會支持

,靈活, 但是占用空間比較大

位圖字庫 他的字符個數(shù)有限的圖片里有的才有,他比較省空間

10.錨點 Label的錨點 是個重要的屬性

如果你的錨點是中心也就是0.5那么他添加字體往兩邊增加、

如果錨點為0,就是往右邊增加

11.代碼中使用cc.Label

獲取組件兩種辦法,還是一樣

(1)就是通過編輯器來指定

bmp_font:{

default: null,

type: cc.Label,

}

(2)通過代碼來獲取

    var zLabe = this.node.getChildByName("my_labell");
    //獲取label
    this.bmp_font = zLabe.getComponent(cc.Label);
    //設(shè)置內(nèi)容
    this.bmp_font.string = "hhh211";

12.RichText組件

(1)添加富文本組件

(2)設(shè)置富文本的字符內(nèi)容;

<color=#0fffff>text</color>指定文字的顏色

<img src='cow1_1/'>img標(biāo)簽,文本插入圖片,圖片要在指定的圖集里

u:給文本加下劃線,i:用斜體來渲染,b:用粗體來渲染.

size:指定字體渲染大小,大小值必須是一個整數(shù)<size=30>aa mm</size>

outline:設(shè)置文本的描邊顏色和描邊寬度<outline color=red width=4>

A label with</outline>

如果你要放圖片 這里放圖集Image Atlas

也就是你用的圖片都會在這里.

這樣就能顯示圖片了