接觸3D/Webgl這么久,其實一直有個做款游戲玩玩的想法的。
然后這兩天看了下layabox的官網(引擎示例:https://layaair2.ldc2.layabox.com/demo/?category=3d&group=material&name=PBRStandardMaterialDemo),加上現在也是有一些空閑時間,就准備上手一下layabox。
經過了一天的學習,對layabox相關的工具軟件摸了一個遍,那么現在我站在新手的角度,記錄一下這個過程中遇到的問題和注意事項吧。
1.新建項目-ts項目
在laya IDE中新建一個ts項目
IDE中目錄結構是這樣
編碼的時候還是需要額外code相關IDE支持的,比如你直接雙擊GameUI.ts,他會讓你查找對應的code工具,我這里用的是vscode,於是現在雙擊會跳到vscode。
你可以從Main.ts這個程序入口文件看起,最終你會發現,模塊的調用順序是
Main.ts -----> Game.Config.ts -----> GameUI.ts
所以我們的程序開發入口默認就是GameUI.ts了。
2.添加模塊依賴
默認情況下,編譯后的web版程序是引入若干個基礎模塊的
但是通過官網的案例,你可以發現
每一個案例都會有額外的模塊依賴,所以對於新手來說,在不知道這一點的前提下,直接復制粘貼他上面的代碼,是跑不起來的,並且還有一點就是,如果你想跑他的case的話,比如我想跑一個尋路的case
你需要屏蔽掉這個bundle.js,這個相當於你自定義場景GameUI.ts編譯之后的文件,所以你的這個文件里面新建的scene會覆蓋AStarFindPath.js這個文件建立的scene,有這這個坑到,2333
那現在我們要怎樣添加額外依賴呢,第一種就是手動寫這個index.js中的加載項,另外一個就是在layaIDE中通過界面勾選
其實兩種操作方式,效果都是一樣的,都是重寫index.js文件。
另外一點就是,個人覺得,官網的案例對ts支持不友好,有的ts模塊沒有export,或者就是模塊里面沒有自動執行,所以如果你想本地跑一下官網的demo,推薦像下面這樣,手動在index.js中加載js文件
3.加載unity導出的ls場景文件
使用官方的unity插件將unity場景導出為ls文件之后,我們需要將這個場景通過GameUI.ts將這個場景加載進來。
下面提供兩種方式來加載這個ls場景文件
如果你的導出的場景用上述方式加載不進來的話,多半是依賴缺失,可以參考上述第二點添加依賴。
4.運行demo
最后放一張本地運行的官網demo,其中CameraMoveScript.js做了適應性的調整,使得更符合游戲中的操作習慣