在實際開發遊戲時，會使用大量的工具來輔助我們快速開發遊戲。比如：CocosStudio，TiledMap(地圖編輯器)，Particle Builder(粒子編輯器)，TexturePacker(圖片資源打包)等。CocosStudio和TexturePacker程式需要掌握，資源圖片和UI得拼裝我們都得管理。這節主要講解怎麼把CocosStudio製作好的UI介面載入到遊戲中。

一、載入UI介面

1.程式碼

--MainScene類，繼承ViewBase
local MainScene = class("MainScene", cc.load("mvc").ViewBase)

function MainScene:onCreate()
    --載入DemoLogin.json,形成介面，uiRoot：ui的根節點
    local uiRoot = ccs.GUIReader:getInstance():widgetFromJsonFile("ui/DemoLogin.json"); 
    --新增到場景中
    self:addChild(uiRoot);
end

return MainScene
 

2.執行效果

二、獲取UI節點（也稱控制元件）

1.UI比如是一棵樹，首先要有根（根節點），通過這根、枝幹去找葉（節點），每個葉要有唯一標識（名字）。那我們如何獲取UI的節點呢？父節點通過子節點的名稱，標識Tag來獲取子節點，所以在我們CocosStudio中的節點命名，Tag一定要規範，唯一。

• 通過子節點名稱，方法名：getChildByName
• 通過子節點Tag，方法名：getChildByTag
• 推薦，使用節點名稱獲取節點節點名稱

2.任務：獲取控制元件name_LabelBMFont（tag:501），password_LabelBMFont（tag:502），confirm_LabelBMFont（tag:503）

--MainScene類，繼承ViewBase
local MainScene = class("MainScene", cc.load("mvc").ViewBase)


function MainScene:onCreate()
    --載入DemoLogin.json,形成介面
    local uiRoot = ccs.GUIReader:getInstance():widgetFromJsonFile("ui/DemoLogin.json"); 
    --新增到場景中
    self:addChild(uiRoot);


--    self:resetLabelByName(uiRoot);
    self:resetLabelByTag(uiRoot);
end


function MainScene:resetLabelByName(uiRoot)
    --通過名稱獲取控制元件
    local nameLabelBMFont = uiRoot:getChildByName("name_LabelBMFont")
    --設定文字
    nameLabelBMFont:setString("A")


    local passwordLabelBMFont = uiRoot:getChildByName("password_LabelBMFont")
    passwordLabelBMFont:setString("B")


    local confirmLabelBMFont = uiRoot:getChildByName("confirm_LabelBMFont")
    confirmLabelBMFont:setString("C")
end


function MainScene:resetLabelByTag(uiRoot)
    --通過Tag獲取控制元件
    local nameLabelBMFont = uiRoot:getChildByTag("501")
    --設定文字
    nameLabelBMFont:setString("E")


    local passwordLabelBMFont = uiRoot:getChildByTag("502")
    passwordLabelBMFont:setString("F")


    local confirmLabelBMFont = uiRoot:getChildByTag("503")
    confirmLabelBMFont:setString("G")
end


return MainScene
 

執行之後，你會發現沒什麼變化，MainScene.lua檔案需要的編碼為：UTF-8 無簽名 3.修改編碼，vs --> 檔案 --> 高階保護選項 

4.執行

這篇已經完了，文字控制元件如何設定中文，這篇沒講。如果沒看懂的，留言！