月初完成一个类似淘宝人生跳格子的小游戏，平时做此类的项目不多，算是第一次真正使用egret做项目，就记录下来和大家分享，有此方面兴趣的伙伴做个学习参考吧！
效果：source.nullno.com/egret-check…
1.初始白鹭
上图绿色的部分是目前所用的东西，其他的暂时没用过；这些东西在下载安EgretLauncher 后可在工具里安装
-Egret Wing: 编辑器 ，微软 vscode 二次开发的的吧；
-Egret Engine: 做白鹭小游戏的核心部分；
-Egret 扩展库: 包括主引擎(egret)，游戏库（game）、动画库(tween)、eui库(eui)、资源管理(assetsmanager)、龙骨(dragonBones)等，也可理解成运行依赖吧，可自己添加第三方模块在项目目录的libs文件下；把普通js变成ts 参考下文方法；
-DragonBones（动画交互师用）: 做可交互柔美的动画效果，此项目中的色子和人物动画用的就是这个；
-Texture Merger：纹理管理工具，就叫做雪碧图吧，会生成一个合并图片和包含图片坐标，大小等信息json数据；
-Egret Feather（动画交互师用）：龙骨说是做动画，这个可以说是做特效，比如消消乐中的消除合并后的各种碎片特效，获取经验能量后飞入树枝头那样的特效 如下图：控制这个坨坨从坐标a->坐标b，它的效果就像流星划过一样。通过在可视化编辑，可以做出各种炫酷的效果；
2.创建项目
具体在egret launcher 的操作步骤就忽略了。在可以视创建的所有配置添加模块，在代码里也可修改配置，可见 egretProperties.json ；不同平台的参考官方文档。
3.主要目录文件
-libs：依赖模块、自己添加的第三方模块都在这里 ，联合 egretProperties.json ；比如我想增加一个自定义的碰撞检测模块 编辑这个文件追加；
{
"name": "collision",
"path": "./libs/collision"
}-resource：图片资源、图片坐标大小等信息json( 例：resource\assets\btn)、龙骨动画图片和json数据(例：resource\assets\role\role_1)、 eui皮肤（例：resource\skins）
-scripts：微信/百度/打包成app等平台小游戏文件；
-src：主要开发目录，建立可交互eui的生成的ts文件可分类放再这里； 做一些请求封装工具函数等（例：src\utils）；场景管理类（例：src\game\SceneManager.ts）等
-template：发布时候用的模板，比如平时调试过程中用的是根目录下的index.html，发布时候就会用到这目录下的web/index.html；
-manifest.json ：js加载文件，lib中的模块都会出现在 initial；每在src里创建一个ts 文件都会在game下编译成对应的js（文件在bin-debug目录查看）；
-egretProperties.json：项目配置文件；
-tsconfig.json：项目的编译参数配置，编译输出，语法转化等，查看详情；
4.处理素材
图片处理： 对于一些背景等大图片，直接放在图片文件加就好了；一些小图标，小按钮背景的素材，为减少请求，我们可以使用Texture Merger ->选择 Sprite Sheet；有公用美化文字\数字可以选择第三项 Bitmap Font;
建立资源加载组：打开resource/default.res.json，默认项目会有一个preload，我们所有的图片资源/json都会在这个组里，这样我们打开游戏在src/Main.ts->loadResource-> RES.loadGroup 默认是preload，这个组中所有的资源都会加载，请求多开始打开游戏就会很慢；所以要建立不同场景下的资源加载组，当需要的时候我们再加载这些资源；
5.创建主场景、弹窗、按钮、动态列表条目等eui皮肤
跟据交互/设计的功能划分建立皮肤，示例这个项目中：
主场景：resource\skins\game_scene
弹窗：resource\skins\pop_ups
其他：resource\skins\skin_item
皮肤目录->右键->新建模板->新建eui组件->修改皮肤默认路径(此时的皮肤文件/ts会生成一起，手动把ts 移到 src 相应的目录里就行了)
例：resource\skins\game_scene 下的皮肤对应的ts为 src\game\scene；通过ts就可以控制这个场景了，包括pop_ups弹窗皮肤都一样 ,你所创建的eui 都换在这个文件里（resource\default.thm.json）
点开exml就可以进入可视化编辑，就贴图一样左拖拖右移移，把处理好的素材跟据设计稿，通过布局/控件还原设计稿，鼠标拖动下左图的东西到舞台上就可以了，再通过右边的属性面板（下右图）调整细节；（什么样的的东西放一组去，我在ts里好控制，和写网页一样，合理的布局会省下很多js操作，乱起八糟的布局js逻辑都无从下手，不给自己挖坑）
5.动态列表皮肤制作
创建一个渲染模板 把字段绑定到显示的位置（颜色，文字，图片，是否显示等），颜色/显示状态等不能直接在可视化界面填{data.xxxx}的 ,切换到源码里就可以编辑了；接下里就通过eui.dataGroup 或者 eui.List 控件就能把列表显示出来了，当然你可以排列属性里设置列表的排列方向和排列数量；
一般dataGroup 的列表我不做点击交互也不方便操作， 比如项目中的地图填充使用这个，eui.List 条目的点击参考src\utils\Tool.ts，分整体点击和条目内子元素点击操作；
7.代码控制部分
基于上面的操作，我们把静态的游戏界面搭建好了。接些来开始写逻辑了，可通过场景管理类（就当作界面路由吧）SceneManager.ts来操作界面的显示切换；通过PopUps.ts可调用不同类型弹窗的显示关闭；通过Tool.ts对游戏中的点击，拖动，数据处理，添加龙骨动画等公用方法的封装；通过RequestUtil.ts 做请求方法的封装；API.ts 就做数据接口的管理； 用Loading.ts做游戏启动加载进度页显示；其他就是游戏的场景的控制代码就不做介绍了，有需要的地方可下载下来看哈；
8.如何全屏铺满显示
场景的宽高设置成舞台的宽高；用eui做场景的时候，用好约束； data-scale-mode尝试使用fixedNarrow模式
场景：
this.height = this.stage.stageHeight;
this.width = this.stage.stageWidth;
index.html:
data-scale-mode="fixedNarrow"
9.js转ts
安装：
npm i dtsmake -g
进到xxx.js目录执行：
npm i tern --save-dev
dtsmake -s xxx.js