一看就会的 egret 入门教程

30,217 阅读7分钟

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();

小贴士

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

结语

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