使用Laya引擎開發微信小遊戲
| 導語使用一個簡單的遊戲開發示例,由淺入深,介紹瞭如何用Laya引擎開發微信小遊戲。
作者:馬曉東,騰訊前端高階工程師。
微信小遊戲的推出也快一年時間了,在IEG的遊戲運營活動中,也出現了越來越多的以小遊戲作為載體運營的活動型別,比如遊戲預約,搶先試完等等,都收到了非常良好的效果。
在支援微信小遊戲的遊戲引擎中,Cocos,Egret,Laya都對小遊戲的開發提供了很多強大的支援。前段時間正好抽空研究了一下這塊的內容,現做一個總結,針對如何使用Laya引擎開發微信小遊戲給大家做一下介紹。因為時間有限,研究並不深入, 如有高手路過,忘不吝賜教。
做個啥遊戲呢?“絕地求生”很火,我們做個“絕地求死”如何?策劃也很簡單,和絕地求生相反,主角不是跳傘的玩家,而是地面的炮手,大炮要把跳傘的傘兵用大炮一個個都消滅掉。
牛逼的策劃有了,咱們進入正題,看看怎麼實現吧!
1. 如果不用引擎會怎樣?
1.1 Canvas瞭解下
微信小遊戲提供了canvas這個遊戲核心元件。利用Canvas可以在畫布上畫出文字、圖形、影象等等。 不過講微信小遊戲之前,得先說說H5,在H5時代獲取canvas物件非常簡單,如下圖:
var canvas=document.getElementById("myCanvas"); var ctx=canvas.getContext("2d");
常用的一些API:
ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); //繪製圖片 ctx.fillText(text,x,y,maxWidth); //繪製文字 ctx.rect(x,y,width,height); //繪製矩形 ctx.clearRect(x,y,width,height);//清除矩形內畫素 ctx.scale(scalewidth,scaleheight);//縮放 ctx.rotate(angle);//旋轉角度 。。。。
微信小遊戲裡,也提供了canvas物件,只不過獲取介面變了:
wx.createCanvas()
其他H5環境下有的Canvas API,微信環境裡也都有。
1.2 動畫的原理
Canvas只是一個2D的畫布,要做一個遊戲,動畫總不能少吧?要讓圖片能動起來,這又是怎麼做到的呢?請看下圖:
好吧,動畫其實就是不斷畫圖片,然後擦除,再畫圖片,再擦除的迴圈過程,肉眼看起來,那就是動起來了。
在古老的電影膠片時代,我們看到的電影,就是一張一張連續幀的膠片組成的,最後投射到大螢幕上,變成了我們看到的電影。
1.3 動畫效能優化
但是,動畫是講究幀率的,一般如果能達到每秒60幀,那就和電影一樣是很流暢的動畫效果了。計算公式:1000ms/60fps=16.67ms,這就要求我們每次動畫裡的業務邏輯計算,都要16.6ms裡完成,不能影響下一幀的顯示,否則就是卡頓,也就被人說這個遊戲好卡,效能好差了。
知道原理了,效能優化具體怎麼做呢?
- Canvas分層 有些遊戲中,背景是不變的,為了提高效能,可以把遊戲背景抽離出一個單獨的canvas,這樣,在畫面發生變化的時候,不需要重繪整個背景,只需要繪製變化的那部分就可以。
- 減少API呼叫 每次的ctx的api呼叫,都是有效能消耗的,所以,儘量減少每幀的api呼叫次數,具體怎麼減少,就要看業務需求了。
- 圖片預裁剪 圖片的裁剪過程,也是有效能消耗的,我們可以把裁剪的圖片預先存起來,之後在繪製的時候,直接從記憶體裡拿,而不需要每次都重新裁剪。
- 離屏繪製 直接操作上屏的canvas,效能是很差的,尤其是有單幀繪製操作很多的時候,效能下降更明顯。 這個時候,我們可以預先建立一個離屏的canvas,預先在這個canvas完成這一幀要繪製的所有動作,最後一次性的把這個離屏canvas繪製到上屏canvas中。
- 避免阻塞 由於我們需要保證16.67ms就要完成一次幀的繪製,如果這一幀裡,邏輯運算時間超過16ms怎麼辦?那就一定會卡幀了。 我們可以使用webworker之類的技術,把耗時的邏輯計算在另一個執行緒執行,或者把任務進行拆解,降低每幀的耗時。
當然還有很多其他更多的技巧和手段來提升canvas的效能,在這樣的情況下如果我們直接使用canvas去開發一個遊戲,還會面臨比如碰撞演算法、物理系統之類的問題。 所以,如果只用canvas去開發遊戲,就如同你在吃雞遊戲裡,只拿了一把平底鍋,你怎麼和別人正面剛?
所以,我們需要一把98K把自己武裝起來,那就是使用遊戲引擎開發。
2. 為什麼選擇Laya?
目前支援微信小遊戲的引擎,有Cocos,Egret,Laya,我們先看下三者的功能比較:
從各種支援度上來講,laya是目前支援度最好的,也據laya側的宣傳,他的效能也是最高的。(關於效能的問題,因外部水軍比較多,在沒有做實際詳細測試前,暫時不發表評價。)
在公司內部,都有三種引擎的遊戲實現,下面是截止5月份的公開資料的引擎佔比:
其實三個引擎都提供了很好的支援度,一般來說,如果原先使用過Cocos實現過APP端遊戲要移植到微信小遊戲端來的,使用Cocos是最好的選擇,如果是從頭開發一款小遊戲,那還是在Egret和Laya裡選擇一款吧!
3. Laya 環境搭建
前面講了那麼多,都還只是前戲,只是為了大家對遊戲的開發有個初步的瞭解,從這一節開始我們就進入正題了。
到ofollow,noindex"> https://www.layabox.com/ 去下載最新的版本,並進行安裝。目前有1.X版本和2.0版本。(本文使用1.7.20版本做示例)
然後就可以建立一個新的遊戲專案了,我們可以現在選擇建立一個UI示例專案
[ 建立新工程 ]
3.1 程式碼模式
當然就是給你寫程式碼的地方,感覺這個編輯器,就是在VSCode的基礎上改的。連最頂上的Code標識都還在。也因為這樣,所以才能很好的支援TypeScript。
[ 程式碼模式佈局 ]
為什麼要使用TypeScript? 本文不詳細展開比較,只需要瞭解TypeScript 是Javascript的超集,因為多了個“Type”表示他支援強型別,並且由於靜態型別化,在寫程式碼的時候編輯器就能提示你的錯誤,所以更適合開發遊戲這種邏輯複雜的應用就好了。當然最終TypeScript還是會像ES6一樣,被編譯成普通的Javascript執行。但是在開發階段管理程式碼來說,已經可以駕馭大型專案了。
3.2 設計模式
就是用來設計UI介面的地方,拖拖拽拽就可以把遊戲頁面整出來。Laya提供了好多元件,如果有需要的可以使用,當然也可以不用他的元件,自己搞自己的自定義元件。
[ 設計模式佈局 ]
4. Laya的HelloWorld
都說作為一個程式員,買來文房四寶之後,寫下的第一行字,一定是“Hello World”。(我拿著公司剛發的 20週年LAMY紀念鋼筆,寫的第一行字,居然也是“Hello World”,汗~~~)
4.1 遊戲初始化
4.1.1.GameMain.ts
首先刪掉系統剛才預設的檔案“LayaUISample.ts”,然後新建檔案GameMain.ts
import WebGL = Laya.WebGL; class GameMain{ constructor() { //TS或JS版本初始化微信小遊戲的適配 Laya.MiniAdpter.init(true,false); //初始化佈局大小 Laya.init(375,667, WebGL); //佈局方式設定 Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL; Laya.stage.screenMode = Laya.Stage.SCREEN_VERTICAL; Laya.stage.alignV = Laya.Stage.ALIGN_CENTER; Laya.stage.alignH = Laya.Stage.ALIGN_CENTER; } } new GameMain();
Laya.MiniAdpter.init()
是Laya提供的對小遊戲提供的適配,因為在小程式&小遊戲環境下,並沒有Bom和DomAPI,比如,沒有window,document, 所以需要這樣一個介面卡,對小遊戲的開發方式,進行相容。
4.1.2. bin/index.html
修改bin目錄下的index.html ,刪掉LayaUISample.ts的引用,改為下面的方式:
<!--啟動類新增到這裡--> <!--jsfile--Main--> <script src="js/GameMain.js"></script> <!--jsfile--Main-->
在index.html裡,提供了很多Laya的類庫,這些類庫,最終會被打包成合並一個code.js. 因為微信小遊戲的體積限制,我們不需要把所有的庫都載入進來,只選擇我們需要的庫就好了,用不到的可以都刪除。
4.1.3. run
接下來,點選執行,就會出現模擬器介面了。
[ 執行模擬器 ]
先別管黑乎乎的一團,下面我們就要增加“Hello World”了。
4.2 繪製文字
4.2.1. Laya.Text
再次修改GameMain的程式碼如下,重點是var txt:Laya.Text = new Laya.Text();
import WebGL = Laya.WebGL; class GameMain{ constructor() { //TS或JS版本初始化微信小遊戲的適配 Laya.MiniAdpter.init(true,false); //初始化佈局大小 Laya.init(375,667, WebGL); //佈局方式設定 Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL; Laya.stage.screenMode = Laya.Stage.SCREEN_VERTICAL; Laya.stage.alignV = Laya.Stage.ALIGN_CENTER; Laya.stage.alignH = Laya.Stage.ALIGN_CENTER; //建立Text物件 var txt:Laya.Text = new Laya.Text(); //給Text的屬性賦值 txt.text = "Hello World";//設定文字內容 txt.color = "#ffffff"; //設定顏色 txt.fontSize=20; //設定字型大小 txt.pos(100,200); //設定位置 //將Text物件新增到舞臺 Laya.stage.addChild(txt); } } new GameMain();
在上面的程式碼中,我們給Stage舞臺上,添加了Text物件,然後點選執行
啊哦,傳說中的HelloWorld終於出現了
4.3 繪製圖片
4.3.1 loadImage
Laya的Sprite提供了一個非常簡單的loadImage
方法,可以即時載入圖片並載入到舞臺上。
//設定舞臺背景色 Laya.stage.bgColor="#1e83e8"; //建立img Sprite精靈 var img:Laya.Sprite = new Laya.Sprite(); //載入顯示圖片,座標位於100,50,並設定寬高 130*108 img.loadImage("demo/paratrooper.jpg",100,50,130,108); //把圖片新增到舞臺 Laya.stage.addChild(img);
預覽如下,是不是很簡單?
但是這個方法,其實並不實用,在真實專案中,一般會有很多圖片,我們不會一張一張圖片的去載入,而是預先載入好,再去顯示圖片。也就是我們常常在遊戲主介面看到的進度條,其實就是在載入資源。
4.3.2 資源預載入
Laya提供一個資源載入器:Laya.loader
,來解決載入的問題。我們把上面的程式碼再修改下,實現先載入完圖片,然後再繪製圖片。
private imgPath1:string="demo/paratrooper.jpg"; private imgPath2:string="demo/shell.jpg"; constructor() { //.....省略N行程式碼 this.renderImage(); //....省略N行程式碼 } renderImage():void{ //定義圖片路徑集合 var resArray=[ {url:this.imgPath1,type:Laya.Loader.IMAGE}, {url:this.imgPath2,type:Laya.Loader.IMAGE} ] //使用載入器載入圖片路徑 Laya.loader.load(resArray,Laya.Handler.create(this,this.onLoadComplete),Laya.Handler.create(this,this.onLoadProgress)) } //載入完成後,把圖片繪製到畫布上 onLoadComplete():void{ console.log("載入完成"); var img1:Laya.Sprite = new Laya.Sprite(); img1.graphics.drawTexture(Laya.loader.getRes(this.imgPath1),100,50,100,100); Laya.stage.addChild(img1); var img2:Laya.Sprite = new Laya.Sprite(); img2.graphics.drawTexture(Laya.loader.getRes(this.imgPath2),100,300,100,100); Laya.stage.addChild(img2); } //這裡可以獲取到載入的進度,以後可以製作進度條 onLoadProgress(percent:number):void{ console.log("percent->"+percent); }
4.3.3 圖集
只是預載入圖片還不夠,實際場景由於有很多小圖片,所以我們可以把這些小圖片拼合成圖集,這就類似在前端在做效能優化的有時候所使用的css sprite精靈圖,這樣製作成圖集,不但載入效能更高,而且也更便於製作幀動畫。
圖集的載入類似這樣:
var resArray=[ {url:"res/atlas/demo.atlas",type:Laya.Loader.ATLAS}, ] Laya.loader.load(resArray,Laya.Handler.create(this,this.onLoadComplete),Laya.Handler.create(this,this.onLoadProgress))
和之前的圖片載入時Laya.Loader.IMAGE
不同的是,type變成了Laya.Loader.ATLAS
。
那圖集怎麼製作呢?還有,大量的遊戲介面,真的就靠手動一張圖片一張圖片的顯示嗎? 當然不!因為我們接下來該瞭解下UI編輯器了。
5. UI編輯器
UI編輯器,當然是用來編輯UI的,大多數的客戶端程式開發環境,都有類似的UI編輯器。點選左側的
圖示,進入UI編輯器模式,如下圖:
具體UI編輯器的功能介紹,建議還是看 官方文件 ,這裡就不贅述了。
5.1建立UI
因為我們建立的是預設UI專案,所以UI編輯器裡,有一個TestPage.ui,可以不用管他,我們建立一個自己的UI。 點選 檔案->新建檔案
進入新建頁面視窗,頁面型別有View 和Dialog兩種,因為這裡我們做的是整個頁面,所以選View。如果你有興趣去看原始碼,其實Dialog也是基於View實現的,只不過多了Dialog的一些特性。
如果對這個view後面還有邏輯程式碼要寫,建議勾選“建立邏輯類”,這樣就會自動在View目錄下自動建立一個和UI對應的GamePage.ts
[ 新建頁面UI ]
5.2 匯入資源
在assets目錄下,新建一個demo資源目錄,把需要的圖片都扔進去,然後在UI編輯器的資源面板最下方找找到重新整理按鈕
,新增資源圖片後,一定要記得點下重新整理,否則資源面板的內容不會自動重新整理。
只要是demo檔案下的圖片,都會被自動打包成圖集,路徑就是res/atlas/demo.atlas
。
不知道有沒有同學發現,在上面的圖片中,有部分資源顯示“不打包”,這是什麼原因的?
點選檔案-》專案設定,我們會看到圖集限制了能被打入圖集的單圖的最大寬高,和最終圖集的最大寬高,預設標準可以自行修改。超過這個圖集標準的圖片,就不會打包到圖集中去,就需要手動載入了。
[ 請在這裡填寫圖片描述 ]
5.3 編輯UI
編輯頁面功能,會用ppt的,應該都會用了,拖個圖片誰不會?直接把資源管理器的圖片,拖到右側場景編輯器裡。這次我們拖了一個藍天白雲的背景,並在最下方放了一個大炮,看起來還有點意思。
頂部有一排圖示,是用來協助對齊圖片用的,提供了頂部對齊,底部對齊,左對齊,右對齊,中線對齊等等,如果圖片很多,用這個對齊就很方便了。
右側的屬性欄,就比較常用了。 var這裡,你可以給你拖進來的圖片元件,給個變數名,這個變數名,最後會在之前自動生成的邏輯類裡用到。我們把大炮定個變數名“pao”,後面會用到;x,y,width,height這裡,就是座標和寬高,就不用多說了吧?
5.4 匯出UI
UI做好以後,有個重要的工作,就是千萬別忘記匯出。很多初學者,經常會忘記這點。匯出UI,才會重新生成圖集和UI相關設定。
匯出以後,我們看laya/pages/GamePage.ui 檔案,不用管裡面的詳細內容,裡面就是剛才我們拖拽圖片,自動生成的響應配置檔案。
5.5 使用UI
下面我們要把剛才編輯的GamePage顯示出來,那就回過頭來,再次修改GameMain.ts
class GameMain{ //定義靜態變數 gamePageView public static gamePageView:view.GamePage; constructor() { //... this.renderImage(); //... } renderImage():void{ //資源載入 var resArray=[ {url:"res/atlas/demo.atlas",type:Laya.Loader.ATLAS}, ] Laya.loader.load(resArray,Laya.Handler.create(this,this.onLoadComplete),Laya.Handler.create(this,this.onLoadProgress)) } onLoadComplete():void{ //初始化view GameMain.gamePageView = new view.GamePage(); //新增到舞臺 Laya.stage.addChild(GameMain.gamePageView); } } new GameMain();
執行一下,主介面遊戲背景,和大炮都已經架設好了,好的開端,就是成功的一半了。
接下來,根據最初的牛逼策劃,我們要像pubgm一樣,讓傘兵從天下掉下來,怎麼實現?接著看動畫部分吧!
6. 動畫
6.1 建立傘兵物件
在src目錄下建立一個新目錄role,用來存放遊戲中角色。 在role裡建立一個傘兵Soldier.ts物件檔案。
module role{ export class Soldier extends Laya.Sprite{ constructor(){ super(); this.init(); } init():void{ var img:Laya.Sprite = new Laya.Sprite(); img.graphics.drawTexture(Laya.loader.getRes("demo/soldier.png"),0,0,100,86); this.addChild(img); } } }
修改GamePage.ts,把傘兵加入到遊戲主畫面中去,重點看renderSoldier()
module view{ export class GamePage extends ui.GamePageUI{ private soldier:role.Soldier; constructor(){ super(); this.init(); } init():void{ this.renderSoldier(); } renderSoldier():void{ this.soldier= new role.Soldier(); this.addChild(this.soldier); } } }
執行起來看下,發現遊戲主畫面上,已經多了一個傘兵(請忽略我的很爛的摳圖,手動捂臉^_~ )
6.2 讓傘兵掉下來
做過前端的應該都明白,傘兵掉下來,就是要啟動一個定時器,不斷修改傘兵的Y座標+1,移動傘兵圖片的位置。原理都知道,但是如何實現呢? 一般定時器有兩種:
- setInterval: 基於使用者指定時間
- requestAnimationFrame : 基於瀏覽器幀能力
相比起來,requestAnimationFrame 效能更高,更適合做動畫。但是在遊戲裡會有很多地方都用到定時器,如何管理那麼多定時器,是非常讓人頭疼的事情。所以Laya也提供了自己的定時器的相關實現:Laya.timer
來簡化定時器的使用,這個定時器同樣是基於幀率的,我們來看看這個怎麼用。
修改GamePage如下,重點看Laya.timer.frameLoop
module view{ export class GamePage extends ui.GamePageUI{ private soldier:role.Soldier; constructor(){ super(); this.init(); } init():void{ this.renderSoldier(); //建立定時器 Laya.timer.frameLoop(1,this,this.onLoop); } renderSoldier():void{ this.soldier= new role.Soldier(); this.addChild(this.soldier); } onLoop():void{ //讓傘兵45度下降 this.soldier.y=this.soldier.y+1; this.soldier.x=this.soldier.x+1; } } }
來看下效果,看起來還不錯
7. 碰撞
7.1 增加炮彈
下一步,就改是大炮打傘兵了,當然首先得給大炮建立一個炮彈。 Ball.ts
module role{ export class Ball extends Laya.Sprite{ constructor(){ super(); this.init(); } init():void{ var img:Laya.Sprite = new Laya.Sprite(); img.graphics.drawTexture(Laya.loader.getRes("demo/ball.png"),0,0,45,54); this.addChild(img); } } }
在GamePage上新增炮彈
renderBall():void{ this.ball= new role.Ball(); this.ball.pos(162,540); this.addChild(this.ball); }
嗯,炮彈新增成功,不過,貌似有點問題,怎麼炮彈顯示層級在大炮上面了?似乎有點難看?
7.2 調整Sprite層級
還記得前端世界裡神奇的z-index嗎? Laya也有,叫zOrder。調整zOrder的數值,可以調節Sprite的層次(脫了馬甲,我一樣認識你,^_^) 把渲染炮彈部分改一下層級:
renderBall():void{ this.ball= new role.Ball(); this.ball.pos(162,540); this.pao.zOrder=10;//調高原先大炮的顯示層級 this.addChild(this.ball); }
這次炮彈躲在大炮後面去了,一會兒再讓他出來吧!
7.3 點選大炮發射炮彈事件
炮彈向上飛,就和傘兵向下掉一樣,在幀迴圈裡不斷修改y值就可以。但是這次,我們要響應事件了,必須點選大炮,觸發點選事件後,才發射炮彈。
再次修改GamePage.ts,這次的重點是多了this.pao.on(Laya.Event.MOUSE_DOWN,this,this.onMouseDown);
這個事件監聽
module view{export class GamePage extends ui.GamePageUI{ private soldier:role.Soldier; private ball:role.Ball; private isSendBall:boolean=false; constructor(){ super(); this.init(); } init():void{ this.renderSoldier(); this.renderBall(); //給大炮增加事件監聽 this.pao.on(Laya.Event.MOUSE_DOWN,this,this.onMouseDown); //建立定時器 Laya.timer.frameLoop(1,this,this.onLoop); } renderSoldier():void{ this.soldier= new role.Soldier(); this.addChild(this.soldier); } renderBall():void{ his.ball= new role.Ball(); this.ball.pos(162,540); this.pao.zOrder=10; this.addChild(this.ball); } onMouseDown():void{ this.isSendBall=true; } onLoop():void{ //讓傘兵45度下降 this.soldier.y=this.soldier.y+1; this.soldier.x=this.soldier.x+1; //如果是發射炮彈狀態,炮彈向上發射 if (this.isSendBall){ this.ball.y=this.ball.y-3; } } } }
在執行一下看看:
到目前為止,還進行得不錯,就差擊落傘兵了,可憐的傘兵,你的死期就要到了,還差一個碰撞了。
7.4 炮彈與傘兵的碰撞
碰撞演算法常見的有以下這些:
- 矩形碰撞: 矩形圖片接觸碰撞,計算效能最快,但是如果影象並不近似矩形的時候,準確度就不高了。
- 圓形碰撞: 和矩形類似,比如炮彈就是圓的,用圓形檢測,更適合真實情況。
- 多矩形碰撞: 如果影象相對比較複雜,可以拆分為多個矩形,在準確性和效能方面取得平衡。
- 畫素檢測碰撞: 如果需要非常精確的碰撞,就要使用畫素檢測了,這個效能相對就比較低了。
在Laya裡,對於矩形碰撞檢測,提供了Rectangle.intersection()
方法,可以非常方便的進行矩形檢測。
繼續修改GamePage.ts
gameOver():void{ Laya.timer.clear(this,this.onLoop); //停止遊戲幀定時器 this.renderBoom(); //顯示爆炸圖片 this.removeChild(this.soldier); //刪除傘兵 this.removeChild(this.ball); //刪除炮彈 } onLoop():void{ //讓傘兵45度下降 this.soldier.y=this.soldier.y+1; this.soldier.x=this.soldier.x+1; //如果是發射炮彈狀態,這炮彈向上發射 if (this.isSendBall){this.ball.y=this.ball.y-3; //使用矩形碰撞判斷,如果炮彈和傘兵碰撞,則遊戲結束 if (this.ball.getBounds().intersection(this.soldier.getBounds())){ this.gameOver(); } } }
再來看下效果:
Boom,傘兵成功被大炮打中,“絕地求死”完美收工!
8. Laya的效能優化
8.1 效能監測工具
Laya已經內建了效能監測工具,只要初始化後執行Laya.Stat.show();
就可以開啟
constructor() { //TS或JS版本初始化微信小遊戲的適配 Laya.MiniAdpter.init(true,false); //初始化佈局大小 Laya.init(375,667, WebGL); //佈局方式設定 Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL; Laya.stage.screenMode = Laya.Stage.SCREEN_VERTICAL; Laya.stage.alignV = Laya.Stage.ALIGN_CENTER; Laya.stage.alignH = Laya.Stage.ALIGN_CENTER; //開啟效能監測面板 Laya.Stat.show(); }
上面清楚的顯示了目前的FPS、Sprite的數量、DrawCall 、記憶體消耗等,我們優化的目標就是把這些值降低下來。
8.2 優化手段
- 減少Sprite的數量
- 不可見區域的Sprite及時移除
- 靜態內容使用cacheAs=bitmap降低DrawCall
- 使用Laya.Pool管理物件,減少重複建立的效能消耗
- 物件無用時,及時銷燬
- 定時器及時銷燬
- 。。。
具體的優化手段有很多,大家可以在具體的業務開發中不斷的總結提煉。
9. 釋出到微信小遊戲
講了那麼多的Laya,說好的微信小遊戲呢? 不要急,這就來了,Laya生成的程式碼,可以非常方便的釋出到微信小遊戲。
點選
進入釋出介面,在釋出平臺選擇“微信小遊戲”,此時生成可以在微信開發者工具下執行的release/wxgame版本
使用微信開發者工具開啟,已經可以完美運行了。而且我們發現laya把我們剛才寫的程式碼,和Laya的核心庫一起,都被打包成一個code.js了。
[ 微信開發者工具 ]
10. 開發環境相容
可是,作為微信環境下的遊戲,因為code.js是laya自動生成的,我們開發還是必須在laya的開發環境下,但是laya並不支援微信的介面除錯,那我們可以在Laya裡判斷開發環境嗎?
當然可以,用Laya.Browser.onWeiXin
就可以判斷了,比如:
if (Laya.Browser.onWeiXin) { let wx=Laya.Browser.window.wx; //執行微信的API邏輯..... }
只是除錯起來就有點蛋疼了,得Laya裡寫好,釋出到release/wxgame,再在微信開發者工具裡除錯。
=總結=
總體來說,Laya入門還是比較簡單的,雖然官方也做了很多文件,也有做視訊教程,但是感覺資料還是有點缺,這次自己研究Laya的歷程分享出來,也算是為Laya社群做點貢獻吧!
因為本人接觸Laya的時間並不長,也不是專業的遊戲開發人員,如果有講得不對的,也歡迎及時指出,歡迎大家一起交流。