Layabox新建文件
步驟一:選中bin右鍵單擊,然后左鍵點擊“新建文件”,在bin目錄下建立一個HelloLaya.js的文件。
步驟二:按建步驟一的方式,還在bin目錄下,修改index.html的文件,
步驟三:準備工作完成后,就可以編碼了,我們打開bin目錄下的HelloLaya.js,開始編寫如下代碼:
編寫代碼
點點文字,文字會往下移動:
Laya.MiniAdpter.init();//初始化引擎
Laya.init(600,400); //初始化,創建一個舞臺
Laya.stage.bgColor='#00aaff'; //修改背景色
var txt=new Laya.Text(); //創建文字對象
txt.text='帶我飛!!'; //定義文字對象的內容
txt.fontSize=35; //設定文本大小
txt.color='#ff1900'; //文本顏色
txt.x=50; //文本X位置
txt.y=100; //Y位置
Laya.stage.addChild(txt); //為舞臺(stage)添加上你創建的這個小文本
txt.on('click',this,function(){ //點擊事件,和JS的on事件一樣,寫在點它它會撒驕!
if(txt.y>=300)
{
txt.text='我跳!!';
txt.y = 100; //坐標回到最初位置
}
else
{
txt.text='點我!!';
txt.y+=20; //坐標往下移
}
});
步驟四:編碼完成后,按F5調試,在彈出的頁面里,我們可以看到代碼的運行結果,如下圖所示
發布
點擊發布快捷鍵,如下圖所示:
微信開發者工具
點擊預覽,若提示文件超過4M,則刪除3D文件,先完成一個超小游戲DEMO,
后期補充超過4M的解決方案。
使用微信掃預覽生成的二維碼,即可看到我們做好的小游戲了~!
微信小游戲4M本地包的使用
通常我們開發項目的時候,會直接使用本地路徑,比如示例中引用的就是本地路徑,
Laya.Texture2D.load("res/layabox.png");
如果項目的目錄中,全部大小加起來不超過4M的話,只要能找到本地的資源,怎么寫也沒問題。
但是,
微信小游戲的本地包有4M的限制,一旦超過這個限制,那就不允許上傳,不允許真機預覽。
所以,我們的項目要是大于4M后,怎么處理呢?
要進行資源目錄的規劃,分為本地加載與網絡動態加載,兩種模式結合使用。
本地加載的規劃里,我們除了入口文件和必用的配置文件外,只放一些預加載必用的素材,比如加載進度(Loading)頁用到的背景與圖形等。總之,就是不能超過4M。
Tips:需要提醒注意的是微信小游戲不允許動態加載創建JS,所以,JS必須要放在4M包里,也就是說JS加上基礎配置文件必須要小于4M,項目適配時如果超過4M,要進行優化控制。
網絡動態加載的路徑怎么處理呢。在本地加載的load()方法之后使用URL.basePath方法。
例如:
material.diffuseTexture = Laya.Texture2D.load("res/layabox.png");
box.meshRender.material = material;
Laya.URL.basePath = "https://XXXX.com";//請把XXXX換成自己的真實網址;
//在此之下,再使用load加載資源,都會自動加入URL網址。從網絡上動態加載。
使用URL.basePath方法后,再使用load加載本地路徑,都會自動加上URL.basePath里的網址。這樣就實現了本地與網絡加載的結合。
這樣就結束了嗎?并沒有!
按剛剛的寫法,res/layabox.png明明已經上傳到微信小游戲的本地目錄,但是如果在使用URL.basePath之后,再次加載res/layabox.png并不會從本地加載使用,而是從網絡動態加載使用。這并不是我們要的結果。
所以,引擎針對使用URL.basePath之后,如何再次使用本地加載,進行了特殊目錄和文件的處理,也就是本地包白名單機制。如下例所示:
MiniAdpter.nativefiles = [
"wxlocal",
"res/atlas/houzi.atlas",
"res/atlas/houzi.png",
"common/tishi.png",
"common/bg.png",
"ui.json",
"newLb/bg031.png"
];
只要是MiniAdpter.nativefiles里存在的目錄名或文件,引擎會自動將該目錄視為本地目錄,即便使用了URL.basePath,對于包含在nativefiles白名單內的目錄名或文件,都不會從網絡動態加載,只會從本地加載。
本文為原創文章,若轉載請注明出處:https://heijiejie.github.io/