egret之HelloWorld

---

标签: 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 了解更多。