本文由云+社区发表

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的时间并不长,也不是专业的游戏开发人员,如果有讲得不对的,也欢迎及时指出,欢迎大家一起交流。

此文已由作者授权腾讯云+社区发布

搜索关注公众号「云加社区」,第一时间获取技术干货,关注后回复1024 送你一份技术课程大礼包!

使用Laya引擎开发微信小游戏(下)的更多相关文章

  1. 使用Laya引擎开发微信小游戏(上)

    本文由云+社区发表 使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏. 作者:马晓东,腾讯前端高级工程师. 微信小游戏的推出也快一年时间了,在IEG的游戏运营活动中,也出现 ...

  2. 使用Laya引擎开发微信小游戏

    在支持微信小游戏的游戏引擎中,Cocos,Egret,Laya都对小游戏的开发提供了很多强大的支持.前段时间正好抽空研究了一下这块的内容,现做一个总结,针对如何使用Laya引擎开发微信小游戏给大家做一 ...

  3. 【转】利用 three.js 开发微信小游戏的尝试

    前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...

  4. 微信小游戏下socket.io的使用

    参考: 微信小游戏:socket.io 一 在微信小游戏 中使用socket.io报错 因为项目需求,后端要使用nodejs简单搭建一个服务器,通讯用json格式. 使用Egret提供的socket. ...

  5. Egret白鹭开发微信小游戏排行榜功能

    推荐阅读: 我的CSDN 我的博客园 QQ群:704621321 我的个人博客 最近事情特别多,今天终于实现了排行榜功能,记录下来大家一起学习学习. 一.调用默认排行榜 首先我们需要了解: 1.白鹭开 ...

  6. Egret白鹭开发微信小游戏分享功能

    今天给大家分享一下微信分享转发功能,话不多说,直接干 方法一: 1.在egret中打开Platfrom.ts文件,添加代码如下(当然,你也可以直接复制粘贴) /** * 平台数据接口. * 由于每款游 ...

  7. Egret白鹭开发微信小游戏程序跳转功能(由一个小游戏跳转到另一个小游戏)

    假设我们要实现的功能是从小游戏A跳转到小游戏B 对于小游戏A: (1)在platform.ts中添加代码如下: /** * 平台数据接口. * 由于每款游戏通常需要发布到多个平台上,所以提取出一个统一 ...

  8. cocos creator开发微信小游戏记录

    先用cocoscreator实现游戏逻辑 在cocoscreator项目里可以调用微信小游戏api 在cocos里面判断小游戏的运行环境 if (cc.sys.platform === cc.sys. ...

  9. 微信小程序开发——微信小程序下拉刷新真机无法弹回

    开发工具中下拉之后页面回弹有一定的延迟,这个时间也有点久.真机测试,下拉后连回弹都没有,这个问题要解决,就得在下拉函数里加上停止下拉刷新的API,如下: /** * 下拉刷新 */ onPullDow ...

随机推荐

  1. 使用ServletContextListener关闭Redisson连接

     ServletContextListener 监听器 在 Servlet API 中有一个 ServletContextListener 接口,它能够监听 ServletContext 对象的生命周 ...

  2. 写给笨蛋徒弟的学习手册(3)—C#中15个预定义数据类型

    在C#中学习中,你会很早的遇到预定义数据类型这个概念,但你有没有仔细想过它存在的意义?正所谓“存在即合理”,预定义数据类型的存在目的主要有俩个方面,一是为了增加程序的安全性,同时减轻编译器负担,加快编 ...

  3. 创建JUtil

    这里拿Dynamic项目来演示,首先创建一个Dynamic项目,起名,点next, 继续点next, 将web.xml文件勾选,finish, 接下来在Java Resources->src下创 ...

  4. msfconlose基本命令

    命令 简介 back 从当前上下文 banner 显示显示一个令人敬畏的metasploit横幅 cd 更改当前工作目录 color 切换颜色 connect 与主机通信 edit 使用$ VISUA ...

  5. vshost32-clr2.exe 已停止工作

    软件中使用了DevComponents.DotNetBar2.dll MessageBoxEx.Show("ddd");运行到这句出现如上错误 解决:在项目属性里->调试: ...

  6. 机器学习常用sklearn库

    Sklearn.model_selection(模型选择) Cross_val_score:交叉验证 Train_test_split:数据切割 GridsearchCV:网格搜索 Sklearn.m ...

  7. 大数据之hiveSQL

    最近增加了学习java基础算法,包括几种排序算法,二叉树(前序,后序,中序),队列和栈,bmp搜索,广义搜索算法,迭代等等一些技巧(自己动手绝对比单纯的理论要强的多,多练练) HIVE是hadoop生 ...

  8. mysql中删除重复记录,只保留一条

    表结构如下: mysql> desc test1; +--------------+------------------+------+-----+---------+------------- ...

  9. 解决Mac系统升级导致cocoapods失效问题

    使用pod install出现如下错误 -bash: /usr/local/bin/pod: /System/Library/Frameworks/Ruby.framework/Versions/2. ...

  10. Asp.Net WebAPI核心对象解析(三)

    对于.NET的分布式应用开发,可以供我们选择的技术和框架比较多,例如webservice,.net remoting,MSMQ,WCF等等技术.对于这些技术很多人都不会陌生,即时没有深入的了解,但是肯 ...