CocosCreator UI元件

Canvas

在 Canvas 中，可以設定分辨率和對齊方案，當手機螢幕發生變化時，會自動适配手機，有根據寬适配和根據長适配兩種政策。

Widget

• 能使目前節點自動對齊到父物體的任意位置，或者限制尺寸，讓你的遊戲可以友善地适配不同的分辨率。

  

• 如圖，為UI界面設定，其中，值可以是%為機關，也可以是 px 為機關，當左右兩側都有資料時，圖檔将會被拉伸。

Layout

• Layout 是一種容器元件，容器能夠開啟自動布局功能，自動按照規範排列所有子物體，友善使用者制作清單、翻頁等功能

  

Label

• Label 元件用來顯示一段文字，文字可以是系統字型，TrueType 字型或者 BMFont 字型和藝術數字。另外，Label 還具有排版功能。

  

• 排版功能：

• Label 元件的排版也是基于節點尺寸（Size），也就是限制框（Bounding Box）所規定的範圍。
• Label 中以下的屬性決定了文字在限制框中顯示的位置：
  • Horizontal Align（水準對齊）：文字在限制框中水準方向的對齊準線，可以從 Left、Right、Center 三種位置中選擇。
  • Vertical Align（垂直對齊）：文字在限制框中垂直方向的對齊準線，可以從 Top、Bottom、Center 三種位置中選擇。
• 大小與行高
  • Font Size（文字尺寸）決定了文字的顯示大小，機關是 Point （也稱作“磅”）
  • Line Height（行高）決定了文字在多行顯示時每行文字占據的空間高度，機關同樣是 Point
  • 如果 Font Size 和 Line Height 設為相同數值，文字正好占據一行大部分的空間高度。
  • 如果 Font Size 小于 Line Height，多行文字之間間隔會加大
  • 如果 Font Size 大于 Line Height，多行文字之間間隔會縮小，甚至出現文字互相重疊的情況。
• 排版模式：
  • Overflow（排版模式） 屬性，決定了文字内容增加時，如何在限制框的範圍内排布。共有 NONE、CLAMP、SHRINK、RESIZE_HEIGHT 四種模式，而隻有在後面三種模式下才能通過編輯器左上角的 矩形變換工具 或者修改 屬性檢查器 中的 Size 大小或者添加 Widget 元件 來調整限制框的大小。
  • Clamp：截斷模式下，文字首先按照對齊模式和尺寸的要求進行渲染，而超出限制框的部分會被隐藏（截斷）
  • Shrink：自動縮小模式下，如果文字按照原定尺寸渲染會超出限制框時，會自動縮小文字尺寸以顯示全部文字。
  • Resize Height：自動适應高度模式會保證文字的限制框貼合文字的高度，不管文字有多少行。這個模式非常适合顯示内容量不固定的大段文字，配合 ScrollView 元件可以在任意 UI 區域中顯示無限量的文字内容。
• 自動換行
  • Enable Wrap Text 可以切換文字的自動換行開關。在自動換行開啟的狀态下，不需要在輸入文字時手動輸入回車或換行符，文字也會根據限制框的寬度自動換行。
• 截斷（Clamp）模式自動換行
  • 截斷模式開啟自動換行後，會優先在限制框允許的範圍内換行排列文字，如果換行之後仍無法顯示全部文字時才發生截斷。

• 文位元組點的錨點

  • 文位元組點的錨點和文字在限制框中的對齊模式是需要區分的兩個概念。在需要靠文字内容将限制框撐大的排版模式中（如 Resize Height），要正确設定錨點位置，才能讓限制框向我們期望的方向調整。
  • 例如，如果希望文字限制框向下擴充，需要将錨點（Anchor）的 y 屬性設為 1。

Sprite

• Sprite（精靈）是 2D 遊戲中最常見的顯示圖像的方式，在節點上添加 Sprite 元件，就可以在場景中顯示項目資源中的圖檔。

  

• 添加 Sprite 元件之後，通過從 資料總管 中拖拽 Texture 或 SpriteFrame 類型的資源到 Sprite Frame 屬性引用中，就可以通過 Sprite 元件顯示資源圖像。
• 如果拖拽的 SpriteFrame 資源是包含在一個 Atlas 圖集資源中的，那麼 Sprite 的 Atlas 屬性也會被一起設定。

• 渲染模式

  • Sprite 元件支援五種渲染模式：
  • 普通模式（Simple）：按照原始圖檔資源樣子渲染 Sprite，一般在這個模式下我們不會手動修改節點的尺寸，來保證場景中顯示的圖像和美術人員生産的圖檔比例一緻。
  • 九宮格模式（Sliced）：圖像将被分割成九宮格，并按照一定規則進行縮放以适應可随意設定的尺寸(size)。通常用于 UI 元素，或将可以無限放大而不影響圖像品質的圖檔制作成九宮格圖來節省遊戲資源空間。詳情點這裡
  • 平鋪模式（Tiled）：當 Sprite 的尺寸增大時，圖像不會被拉伸，而是會按照原始圖檔的大小不斷重複，就像平鋪瓦片一樣将原始圖檔鋪滿整個 Sprite 規定的大小。
  • 填充模式（Filled）：根據原點和填充模式的設定，按照一定的方向和比例繪制原始圖檔的一部分。經常用于進度條的動态展示。
  • 網格模式（Mesh）：必須使用 TexturePacker 4.x 以上版本并且設定 ploygon 算法打包出的 plist 檔案才能夠使用該模式。
• 填充模式屬性

  

Button

• Button 元件可以響應使用者的點選操作，當使用者點選 Button 時，Button 自身會有狀态變化。另外，Button 還可以讓使用者在完成點選操作後響應一個自定義的行為。

• Button 屬性

• Button Transition

  • Button 的 Transition 用來指定當使用者點選 Button 時的狀态表現。目前主要有 NONE，COLOR，SPRITE 和 SCALE。
  • Color：用于設定 Button 在不同狀态下的顔色
  • Sprite：用于設定 Button 在不同狀态下的 SpriteFrame
  • Scale：用于設定 Button 在不同狀态下的縮放

• Button 事件

  • Button 隻支援 click 類型的事件
• button.node.on(‘click’, …)（無法實作參數傳遞）

cc.Class({
    extends: cc.Component,

    properties: {
       button: cc.Button
    },

    onLoad: function () {
       this.button.node.on('click', this.callback, this);
    },

    callback: function (button) {
       //do whatever you want with button
       //另外，注意這種方式注冊的事件，也無法傳遞 customEventData
    }
});
           

• 構造 cc.Component.EventHandler

cc.Class({
    extends: cc.Component,
    properties: {},

    onLoad: function () {
        var clickEventHandler = new cc.Component.EventHandler();
        clickEventHandler.target = this.node; //這個 node 節點是你的事件處理代碼元件所屬的節點
        clickEventHandler.component = "MyComponent";//這個是代碼檔案名
        clickEventHandler.handler = "callback";
        clickEventHandler.customEventData = "foobar";

        var button = node.getComponent(cc.Button);
        button.clickEvents.push(clickEventHandler);
    },

    callback: function (event, customEventData) {
        //這裡 event 是一個 Touch Event 對象，你可以通過 event.target 取到事件的發送節點
        var node = event.target;
        var button = node.getComponent(cc.Button);
        //這裡的 customEventData 參數就等于你之前設定的 "foobar"
    }
});
           

• 在屬性檢查器添加監聽

• 注：在屬性檢查器中設定監聽，比腳本設定更加友善，但是也有其局限性。我們傳遞的參數隻能是一個字元串。是以當我們需要動态傳遞一個類的時候，我們就需要用腳本注冊監聽，然後用 JSON 将對象打包成字元串，傳遞後再用 JSON 解出對象。