美文网首页
egret 写打飞机游戏

egret 写打飞机游戏

作者: 前端那些事情 | 来源:发表于2018-08-13 21:38 被阅读196次

网上有特别多的教程关于如何使用egret制作打飞机游戏。这里我主要想着重说说制作游戏的思路以及如何拆分游戏内容逐步开发。

使用扩展库

开始制作一个游戏开始之前,我们需要先确认需要使用哪些第三方扩展库。
白鹭提供了完整的工作流:游戏引擎,云平台,开发工具集,打包工具,加速器等等
可以参考一下白鹭产品列表,我们可以根据需求选择使用
这里我们使用

  • tween动画库
  • EUI UI扩展库

区分游戏对象

根据游戏我们需要细化区分一下场景,角色,静态类,动画。
完全细化好了之后我们需要根据细化的内容创建文件夹。
这个是我拆分之后的文件夹结构


文件夹目录
  • class文件夹

BgMap.ts(可滚动的底图)
LoadingUI.ts(loading页面)
ObjPool(子弹对象池)
API(接口请求)

  • enemy文件夹

放置和敌人相关的只有两个类,一个是敌机展示,一个是敌机子弹

  • model文件夹

提供可继承的公共对象,同步数据,避免污染

  • plane文件夹

放置和自己相关的只有两个类,一个是玩家飞机展示,一个是玩家子弹

  • sounds文件夹

音频播放控制

  • view文件夹

放置所有场景页面

tips:小游戏可以不需要通过文件夹区分对象,稍微大的游戏或者多人开发的话必须通过文件夹拆分

主要功能实现

  • 可滚动的底图

创建两张背景图,并设置y坐标,让它们连接起来。
添加通过监听egret.Event.ENTER_FRAME逐帧事件改变两张图y位置,判断两张图片如果大于屏幕高度则让其y位置等于-屏幕高度。

简易实现:

this.addEventListener(egret.Event.ENTER_FRAME,()=>{
    this.bgbitmap1.y += speend;
    this.bgbitmap2.y += speend;
    if (this.bgbitmap1.y > stageH) {
       this.bgbitmap1.y = (0 - stageH)
    }
    if (this.bgbitmap2.y > stageH) {
       this.bgbitmap2.y = (0 - stageH)
    }
},this)
  • 飞机拖动

监听TOUCH_MOVE事件即可

简易实现:

planeMobile(event: egret.TouchEvent) {
   this.myPlane.x = event.stageX - this.myPlane.width / 2;
   this.myPlane.y = event.stageY - this.myPlane.height / 2;
}
  • 碰撞检测
    碰撞检测同样需要帧处理,每一帧都需要检测四件事。
    1.循环检测每架敌机的每颗子弹是否和玩家碰撞
    2.循环检测玩家的每颗子弹是否和敌机碰撞
    3.敌机超出屏幕销毁
    4.子弹超出屏幕销毁

  • 对象池的使用
    对象池是频繁创建和删除类型游戏优化性能的一个解决方案。
    简单来讲对象池就是个数组,把不用的对象放进去,因为数组还保存了对象的引用,所以对象不会被回收,等需要用的时候再从数组中取出来。
    打飞机这一类的游戏,频繁创建子弹,和删除子弹,敌机等就需要使用对象池。

1.创建:定时器创建子弹,创建1个,produce一次,创建第二个,继续produce一次,创建多少,produce多少次。因为还没有回收的对象,所以调用的都是theFighter = new fighter.Airplane(RES.getRes(textureName))这句,来新建对象;

2:回收:等到子弹碰到敌机或者飞出界面的时候,就可以reclaim了,回收对象,此刻对象池就有回收的对象了。一个,两个,回收多少,对象池就多少对象,回收的对象,都是一种对象。

3:回收之后创建:当定时器再创建子弹的时候,就直接去取对象池的对象,因为回收了对象,而且所有的对象都是一种,就直接pop或者shift推出来,然后对象池删除推出来使用的对象。

好了。知道这么多知识点你就可以很快的写出一款打飞机的游戏啦。当然你也可以添加各种功能,比如说血量的控制,子弹的类型,敌机的飞行轨迹等等

相关文章

网友评论

      本文标题:egret 写打飞机游戏

      本文链接:https://www.haomeiwen.com/subject/hthqpftx.html