LayaAir的那些坑

IDE

千萬不要在src/ui下寫任何js類, 它會(huì)莫名其妙的消失

src/ui目錄是界面編輯器動(dòng)態(tài)生成所需要的目錄, 自己寫的什么都不能放進(jìn)去

打包時(shí)錯(cuò)誤
Snip20180116_22.png

把錯(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)建模奇怪的問題

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。