一看就会的 egret 入门教程

egret 是啥

egret 是一个用来帮你开发 H5 游戏的利器。也许你曾经用原生 js 写过一些小游戏，可是效率极低；也曾用 createjs 写过，但复杂起来也是力不从心，这时咱们就须要学会用高级点的工具💪（egret）。它的出现极大释放了你的双手，能帮助你更好更快的开发一款小游戏（谁用谁知道😋）。这里就不与其余游戏引擎做比较了，这东西就比如 react 和 vue，选哪个不要紧，你能熟练使用其中一个就行了。

如何学习呢？其实官网的文档已经写得很详细也很清晰了，还有例子和教程，只是你一时半会看不完，瞟了几眼就会😪😪😪。。。不过不要紧，只要你看了本篇教程，今后你就跨入了 egret 世界的大门（吹的不错，其实脚尖都没碰到门槛呢😂）。

因此本篇文章旨在以最快的速度带你了解 egret 并拥有本身的项目，告诉你一些入门必须掌握的东西，其他具体的你能够慢慢去翻文档。。。ok👌，发车了🚗🚗🚗。。

官方文档地址：developer.egret.com/cn/docs/pag…

环境准备（不要以为这步有多高大上，其实就是下载而已）

第一步：万事下载先，咱们直接点击下面的连接下载而后安装就好了。
引擎库管理工具 EgretLauncher ：www.egret.com/products/en…

第二步：打开 EgretLauncher，切换到引擎面板，并点击引擎的最新稳定版进行下载，以下图所示：

第三步：切换到工具面板，点击安装 Egret Wing 3（编辑器），这个可能须要帐号登入，没有的话就去注册一个吧，固然若是你也能够自行安装其余工具，也就点一下的事，但学起来就麻烦了😨。

快速建立一个项目

好了，以上就是所须要下载的东西。如今咱们将以最快的速度建立一个本身的项目。打开 EgretLauncher，切换到项目面板，点击建立项目，会弹出一个对话框，输入项目名称，选择项目地址，缩放模式选择 fixedWidth（小游戏不支持 showAll 适配模式，推荐使用 fixedWidth），其他保持不变，点击右下角建立便可。这样一个项目就诞生了（就像 vue init 初始化项目同样）。

而后用 Egret Wing 3（编辑器）打开这个项目，先无论内容写的啥，点击左上角的调试图标按钮（以下图所示，长的像瓢虫🐞的那个）便可运行项目。在弹出的游戏界面中能够看到背景图片被拉长了（由于缩放模式改为了 fixedWidth），不懂不要紧这不重要，由于初始的东西通常都是多余的，后面都是被删的命运。

至此，项目就建立完了，教程也结束了（这人欠揍😠😠😠）。
接下来我将对项目里面经常使用的两个目录进行讲解（其实不少东西都是咱们不须要关心的，和 vue 又挺像）。我的感受写游戏，场景和逻辑最为重要。场景里最重要的就是资源，体如今 resource 文件夹，逻辑则体如今 src 文件夹。下面咱们先来小讲一下 resource 目录。

resource 目录

如上图所示，这个文件夹主要用来存放项目中全部用到的资源（就是音视频和图片等），咱们只须要把用到的素材拖进来或拷贝到文件夹里便可，其余的无需关心，egret 都帮咱们处理好了。若是资源太多，你能够在 resource 目录下多建几个文件夹分个类，这样会比较明了。须要注意的是资源名称应该是惟一的，由于最终咱们都是以一样的方式读取资源（也就是同一个 api， RES.getRes('resourceName')，当中的参数就是资源名称）。

关于上图中的蓝色部分，就是一些经常使用组件（好比按钮），比如在 vue 中引入了 element 组件。但有个很大的不一样之处就是这是游戏，通常游戏会有本身独特的设计，这些自带的组件不是很必要，往夸张点说要是你的游戏都用它自带的组件来写，那每款游戏的风格就都同样了，又如何去吸引玩家的眼球呢。因此对于这些自带的组件你瞟一眼就行，而后能够删掉也能够无论他，反正它不是必要的。

再而后就是 default.res.json 这个文件，如今你只需知道它是对咱们导入的全部资源的一些描述便可，先不用管太多。

src 目录

这个目录就更简单了，咱们只须要关注 Main.ts 这个入口文件便可，其他几个文件先无论，至少我写了两三个游戏 demo 后还没动过这几个文件🤷‍♀️🤷‍♂️。

如上图所示，这个文件里咱们只须要看两个主要的操做步骤便可。一个就是资源加载（其实也能够不用管，由于写代码的时候能够不用动它，但要了解一下）。另外一个就是真正要看的地方了，也是咱们实际写代码的地方。在 createGameScene 这个方法中主要就是在画面中添加一些元素（诸如背景、矩形、图标和文本等）。具体以下图所示，用法我的感受和 createjs（一个 canvas 库，比如 jQuery 之于 js）挺像的，都是先 new 一个东西，而后设置各类属性，最后添加到容器或者舞台中。大概是这么一个思想。

固然了，若是游戏逻辑复杂的话，咱们能够在 src 目录下新建其余 ts 文件来写，逻辑较少的话直接写在该函数里也是 ok 的。有了 egret 你能够不用去操心资源是如何加载和处理的（这得鼓个掌👏👏👏），咱们只要专心写游戏逻辑就行（在 createGameScene 里面写），极大的减轻了开发者的负担，是个不错的体验。

最经常使用的几个 api（必须掌握，其它慢慢掌握）

关于文本

let label:egret.TextField = new egret.TextField(); 
label.text = "hello world!"; 
复制代码

关于图片

let img:egret.Bitmap = new egret.Bitmap();
img.texture = RES.getRes("imgName");
复制代码

关于形状

// 画个红色矩形框
let shp:egret.Shape = new egret.Shape();
shp.graphics.beginFill( 0xff0000, 1);
shp.graphics.drawRect( 0, 0, 100, 200 );
shp.graphics.endFill();
复制代码

关于声音

let sound:egret.Sound = RES.getRes("mp3Name");
sound.play();
sound.stop();
复制代码

关于事件

// 触摸事件（至关于点击）
this.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouchTap, this);
this.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouchTap, this);
复制代码

关于计时器

// 参数为时间间隔（ms）和执行次数
let timer:egret.Timer = new egret.Timer(500, 5); 
// 边计时边触发
timer.addEventListener(egret.TimerEvent.TIMER, this.timerFunc, this);
// 计时结束触发
timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE, this.timerComFunc, this);
// 开始计时
timer.start();
// 暂停计时
timer.stop();
// 从新计时
timer.reset();
复制代码

关于数据存储

// 存储数据
let key:string = "score";
let value:string = "100";
egret.localStorage.setItem(key, value);
// 读取数据
let score:string = egret.localStorage.getItem(key);
// 移除数据
egret.localStorage.removeItem(key);
// 清除全部数据
egret.localStorage.clear();
复制代码

小贴士

一、写代码须要用 ts（规范的 js） 进行开发。
二、egret 游戏默认是 30 帧的。
三、大部分 api 是以 egret 开头的，读取资源的是用 RES。
四、有时候你改了代码不生效或者忽然报错，别慌，试试重启大法。
五、长度单位是像素。
六、每一个 egret 应有且只有一个舞台（也就是 stage 对象）。舞台是 egret 显示架构中最根本的显示容器。舞台的坐标原点位于左上角。

结语

以上就是你学习该引擎必需要掌握的几个知识点，若是你有时间，仍是建议你把文档粗略过一遍，至少你知道有什么东西存在，后续用到的时候再去找文档看着写，也是能够的。 固然了，光说不练假把式，我唠叨了半天你应该仍是不会写，这很正常，我也不会，这篇文章的目的只是让你对 egret 有个初步的印象，后续我会再写几篇小游戏的教程（务必要练习几个小游戏，这是重点），这样一个流程下来，你就能写出属于本身的小游戏了（是否是想一想就嘴角上扬了呢😏）。