共计 1656 个字符，预计需要花费 5 分钟才能阅读完成。
标签: egret，入门
什么是 Egret？
Egret 是一套 HTML5 游戏开发解决方案，产品包含 Egret Engine，Egret Wing，EgretVS，Res Depot，Texture Merger，TS Conversion，Egret Feather，Egret Inspector，DragonBones，Lakeshore 等。而核心产品是 Egret Engine，是一个基于 TypeScript 语言开发的一个 HTML5 游戏引擎，其余的大多是开发和辅助工具。
关于这个引擎和工具方面的介绍，我就不多说了，以下是白鹭的下载地址。
Egret 官网：http://egret.com/
准备阶段：
我们要下载
并且在里面下载
使用阶段：
在以上工具都准备后，在 engine 界面或者桌面图标点击打开 Egret Wing，会看到以下画面：
Wing 可以理解为专门使用 TypeScript 开发白鹭项目的 IDE 了，以后我们使用 egret 过程中，会一直跟这个界面打交道。
好，现在我们先创建一个项目，我先建一个游戏项目，置于其他界面有什么区别呢，可以自行新建试试。EUI 是主要做交互界面的，空项目是没有配置好相关需要的代码以及功能模块的，例如做缓动效果的 Tween 和加载的 RES 等等，所以为了方便，我们一般直接新建游戏项目。
在这里，你需要配置游戏界面的大小，视频模式以及旋转设置。尺寸直接是设计图宽高，而视口我们一般会选择 showALL（显示全部内容，不变形但会在留白），
网上也有一部分人开发的时候用 fixedWidth（适配宽度，高度不足时会隐藏底下部分，适用于只有一些动画在上方，且下方是无关重要的背景时）。
还有一些会用到百分百满屏的 exacFit，设计师弄一个适中的尺寸，然后按照这种模式铺满全屏，有少数很宽或很长的屏幕会有一点变形，但是不影响游戏体验界面。但是不好的地方是 PC 或 pad 打开会变形。但是这三个地方还是以实际项目需求为准，以上是常规的设置。
选择完之后，我们点击完成。打开新建的项目目录：
src 是 TypeScript 源码目录，bin-debug 是调试环境编译出来的 js，libs 是文件包的引用目录，template 主要是 app 用到的 runtime；
resource 是我们项目中的资源路径，一般我们把图片音频等素材放置 asset 目录下，json 等配置文件放置 config 目录下，default.res.json 是我们用于加载资源的 json 配置文件，一般不修改名字，后面会讲到怎么使用。
egretProperties 是我们这个项目的一些配置记录信息，一般我们不需要动它。而 index.html 就是我们游戏的主界面文件。
打开 index.html
将 data-show-fps 和 data-show-log 设成 true，我们就可以看到游戏运行的实时帧率了。
帧率可以检测游戏运行的流畅度（性能），渲染数量越多，同时计算量越大，性能就越差，掉帧就越多。所以帧率越高，则表示性能越好，流畅度高。另外，在底部，我们还能看到一个 egret.runEgret({}) 的运行方法，在这里，你可以修改 egret 的渲染模式，默认是 ”webgl”。但是如果你需要用到跨域图片资源或者有大量的图片和文字，你最好还是使用 ”canvas” 模式，避免跨域报错和性能问题。
点完编译，点调试，之后就出出现游戏界面，这是 egret demo 项目界面
Hello World
在 main 找到 createGameScene 方法，然后添加
编译运行
作者简介：何永峰，芦苇科技 web 前端开发工程师，喜欢到处寻找好吃的，平时爱好是跳舞，打篮球，听音乐，有时会出席一些大型的舞蹈商演活动，目前是 Acum.Revolution 現狀革命成员之一。并且代表作品：萌鸡驾到、美旅出行小程序、电竞桌子小程序。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专注于前端领域框架、交互设计、图像绘制、数据分析等研究，访问 www.talkmoney.cn 了解更多。
