使用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 环境搭建
前面讲了那么多,都还只是前戏,只是为了大家对游戏的开发有个初步的了解,从这一节开始我们就进入正题了。
到 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的时间并不长,也不是专业的游戏开发人员,如果有讲得不对的,也欢迎及时指出,欢迎大家一起交流。