IDE
千萬不要在src/ui下寫任何js類, 它會(huì)莫名其妙的消失
src/ui目錄是界面編輯器動(dòng)態(tài)生成所需要的目錄, 自己寫的什么都不能放進(jìn)去
打包時(shí)錯(cuò)誤
把錯(cuò)誤文本復(fù)制出來查看問題
在這里我的js刪除了, 但是bin下的index.html并沒有刪除對(duì)應(yīng)js導(dǎo)致的, 刪了即可
打包文件大小
雖然整個(gè)打包目錄很大, 但是真正需要的文件并不多
2d部分
屏幕尺寸
設(shè)備像素分辨率:Laya.Browser.clientWidth,Laya.Browser.clientHeight;
設(shè)備物理分辨率:Laya.Browser.width,Laya.Browser.height;
像素比:Laya.Browser.pixelRatio;
自適應(yīng)屏幕并不好用
還要自己去對(duì)應(yīng)window.outterWidth/Height去算, 然后縮放scaleX/Y和移動(dòng)位置來調(diào)整
創(chuàng)建ui搭建
- 背景參考圖雖然可選(不發(fā)布), 但是搭建快速盡量勾選
- 寬高一定要設(shè)置為參考值, 否則無法自適應(yīng)屏幕
- 搭建好一定要發(fā)布
加載ui布局
-
發(fā)布的布局根據(jù)是否打包資源分別在不同的部分
- 不打包的文件會(huì)從 laya/assets/ 拷貝到 bin/ 目錄
- 打包的文件從 laya/assets/
-
發(fā)布的場(chǎng)景變成js代碼在 layaUI.max.all.js 中
- 所有場(chǎng)景名都在這一個(gè)文件內(nèi)
在主代碼下輸入
Laya.stage.addChild(new MenuUI());
你會(huì)發(fā)現(xiàn), 未壓縮的背景會(huì)加載, 但是打包的圖集中的元素和按鈕沒有加載成功, 這是因?yàn)閍tlas加載不是自動(dòng)的, 需要這樣寫
Laya.loader.create("res/atlas/simbols.atlas",Laya.Handler.create(this,function(){
Laya.stage.addChild(new MenuUI());
}));
讓場(chǎng)景永遠(yuǎn)懸浮logo
//創(chuàng)建二級(jí)容器
var SceneMajor = Laya.stage.addChild(new Laya.View());
//再加載logo
Laya.stage.addChild(new LogoUI());
//這樣更改SceneMajor容器即可
按鈕交互
- 設(shè)計(jì)器里面輸入按鈕變量名稱 (var 設(shè)置為 btSth)
- 獲取當(dāng)前創(chuàng)建的UI對(duì)象
var logo = Laya.stage.addChild(new LogoUI());
- 獲取按鈕的變量
var btSth = logo.btSth;
- 給按鈕增加點(diǎn)擊事件
btSth.on('click', this, function(){
window.location.reload();
});
ui編輯器不支持texture透明
本來想設(shè)置個(gè)半透明背景
- 放上rect 設(shè)置大小后發(fā)現(xiàn)沒有透明度選項(xiàng)
- 放上texture將100x100大小的圖片放上去拉滿全屏, 設(shè)置透明度, ui表現(xiàn)不錯(cuò), 運(yùn)行時(shí)不支持
- 只能做個(gè)png半透明背景, 然后直接放上去, 局限性很大, 但是還算管用
官方說套個(gè)容器設(shè)置容器透明度可以解決
3d部分
設(shè)置位置
box.transform.position = new Laya.Vector3(0,1,1);
正交相機(jī)
正確的寫法
camera.orthographic = true;
camera.orthographicVerticalSize = 7;
錯(cuò)誤的官方教程 (官方回復(fù)留言很理直氣壯的貼了錯(cuò)誤的代碼)
camera.orthographicProjection = true;
創(chuàng)建簡(jiǎn)單建模注意
第二位居然是z.....但是后面移動(dòng)的時(shí)候, 第二位參數(shù)居然是控制縱向的
new Laya.BoxMesh(1, 1, 1);
box.transform.position = new Laya.Vector3(0,1,0);
官方并不推薦用tween來修改位置點(diǎn)
但是依舊可以實(shí)現(xiàn), 因?yàn)閜osition在transform中是個(gè)數(shù)值變量, 它如果被臨時(shí)賦給其他變量, 指向的只是這個(gè)position值, 而不是transform的變化量, 也就導(dǎo)致了無法直接對(duì)3d物體這樣處理. 不過無妨, 只要知道原理就很簡(jiǎn)單實(shí)現(xiàn)效果
box.potOld = box.transform.position;
Laya.Tween.to(box.potOld,{
x:1
,y:2
,update:new Laya.Handler(box,function(){
this.transform.position = this.potOld;
})
}, ConstValue.animationTime,Laya.Ease.elasticOut,Laya.Handler.create(this, function(){
console.log("complete");
}),ConstValue.animationDelay);
設(shè)置個(gè)臨變量, 整個(gè)過程tween只負(fù)責(zé)更改這個(gè)變量值, 而同步更新放在update中即可
陰影投影bug
當(dāng)你選擇好Laya并開始開發(fā)時(shí)候發(fā)現(xiàn)頭痛的事情出現(xiàn)了, 陰影詭異的有時(shí)候有有時(shí)候沒有, 這樣導(dǎo)致的問題還挺大的, 怎么解決呢?
陰影和資源尺寸, 資源格式?jīng)]太大關(guān)系, 和光源配置, 鏡頭也關(guān)系不大, 畢竟這些該處理的都處理了
結(jié)果發(fā)現(xiàn)陰影的投遞跟創(chuàng)建物有關(guān), 如果A想投到B上, A必須在B之后創(chuàng)建, 全部統(tǒng)一初始化創(chuàng)建避免了這個(gè)問題, 然而發(fā)現(xiàn)如果有多個(gè)B, 并動(dòng)態(tài)刪除, 那么動(dòng)態(tài)陰影還是會(huì)有問題.......
也就是說, 如果你想整個(gè)過程順利執(zhí)行投影, 那么你對(duì)這群AB模塊一個(gè)都不要?jiǎng)?創(chuàng)建完畢后就好好的擺他們的位置, 貼圖, 不要做創(chuàng)建和刪除的事情
代碼
CylinderMesh如果創(chuàng)建奇數(shù)面圓面和柱面接合會(huì)對(duì)不上,發(fā)現(xiàn)是頂部圓面以外,其他位置都加了PI旋轉(zhuǎn)了180,這樣非對(duì)稱的奇數(shù)面時(shí)會(huì)出現(xiàn)建模奇怪的問題