1：利用編輯模式來設(shè)計(jì)UI的步驟
1.1：通過編輯模式設(shè)計(jì)好UI后，然后通過‘導(dǎo)出’->‘清理并導(dǎo)出’來將UI導(dǎo)出；
1.2：切換到代碼模式，導(dǎo)出的UI的代碼就在layaUI.max.all.js文件中生成了，如下圖：
如果UI中用到了圖片的話，記得導(dǎo)入圖片，圖片在bin->res->atlas下，找到對(duì)應(yīng)的與編輯模式下圖片所在文件夾的名字一樣的.atlas文件。
代碼模式下圖片所對(duì)應(yīng)的.atlas文件
編輯模式下圖片所在的文件夾
1.3：編寫代碼如下：
var Loader = Laya.Loader;
var Handler = Laya.Handler;
Laya.init(600, 400)
var a = new Laya.Sprite()
Laya.loader.load("res/atlas/wode.atlas", Handler.create(this, onLoaded));//加載UI中圖片所對(duì)應(yīng)的.atlas文件
function onLoaded() {
var cMask = new disanUI();//加載UI所對(duì)應(yīng)的代碼
Laya.stage.addChild(cMask);
}
Laya.stage.addChild(a)
1.4：然后運(yùn)行，會(huì)出現(xiàn)如下異常：
只需要將第6行代碼刪掉就行了，然后運(yùn)行，截圖如下：
2：多個(gè)圖片不在同一個(gè)文件夾的話，可以通過數(shù)組的方式導(dǎo)入多個(gè)atlas文件
3：制作動(dòng)畫時(shí)，如果通過代碼來導(dǎo)入動(dòng)畫的話，只有在右下角的動(dòng)畫才能顯示出來，其他位置是顯示不出來的。
4：創(chuàng)建動(dòng)效模板(EffectAnimation)：動(dòng)效模板是基于時(shí)間軸的動(dòng)畫效果，通過預(yù)設(shè)動(dòng)畫效果，然后把效果附加給某個(gè)組件。使得組件無需編碼卻能輕松實(shí)現(xiàn)與編碼相同的動(dòng)畫效果。動(dòng)效模板不能獨(dú)立顯示，僅可作為動(dòng)效模板讓UI頁面中的組件獲得動(dòng)畫效果。
第一步：創(chuàng)建動(dòng)態(tài)效果模板；
第二步：創(chuàng)建UI，然后將動(dòng)態(tài)效果模板拖到對(duì)應(yīng)的view上，然后分別設(shè)置view的anchorX和anchorY為0.5，這樣動(dòng)態(tài)效果就是從view的中間開始的動(dòng)畫（那時(shí)候我給button的skin設(shè)置的是顏色值，但是運(yùn)行后出現(xiàn)了lose skin的錯(cuò)誤，如果設(shè)置成圖片就沒有那個(gè)錯(cuò)誤了），設(shè)置動(dòng)態(tài)效果的playEvent為mousedown即鼠標(biāo)按下時(shí)觸發(fā)動(dòng)畫；
第三步：記得F9設(shè)置項(xiàng)目中導(dǎo)入動(dòng)態(tài)效果用到的EffectAnimation，不導(dǎo)入會(huì)報(bào)異常的，如下圖：
第四步：發(fā)布UI，在邏輯層調(diào)用UI類即可。
5：屏幕的適配，通過stage的scaleMode屬性來設(shè)置適配
代碼如下：
//初始化引擎
Laya.init(1600, 1400);
//設(shè)置舞臺(tái)背景色
Laya.stage.bgColor = "#ffffff";
//加載圖集成功后，執(zhí)行onLoaded回調(diào)方法
Laya.loader.load(["res/atlas/wode.atlas","res/atlas/comp.atlas"], Laya.Handler.create(this, onLoaded));
function onLoaded() {
var kaishi=new kaishiUI();
//添加到舞臺(tái)
//Laya.stage.scaleMode="full";
Laya.stage.addChild(kaishi);
}
看以看到舞臺(tái)的上下左右都有滾動(dòng)條
將Laya.stage.scaleMode="full";這句代碼取消注釋，效果如下：
可以看到上下左右的滾動(dòng)條消失了
6：在編輯模式下創(chuàng)建的粒子特效，你直接清理并導(dǎo)出，然后回代碼模式里面是找不到的，你可以通過將粒子特效附著在UI中，然后導(dǎo)出，這時(shí)在代碼中使用UI，就可以看到粒子特效了。如下圖所示：
