Layaair 第一個“微信小游戲”

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/

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,837評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,196評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,688評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,654評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,456評論 6 406
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,955評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,044評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,195評論 0 287
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,725評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,608評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,802評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,318評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,048評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,422評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,673評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,424評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,762評論 2 372

推薦閱讀更多精彩內容