Egret(白鹭引擎)——Egret+fairyGui 实战项目入门

前言

　　一行白鹭上青天

需求

　　最近，我们老板刷刷的为了省事，给美术减压（背景有点长，不说了）。
　　美术出 fairygui，我需要在网页上看到实时操作，并且看到效果！

需求分析

　　这怕是要了我的狗命啊，但是要年底了，包住饭碗要紧。
　　提炼关键字，fairygui，网页展示，操作，Egret

　　再浓缩一下：fairygui 为交互素材，白鹭为引擎，vue为展示页面

一、fairygui 是什么？

　　官方地址：http://www.fairygui.com/guide/

　　 FairyGUI提供了一个强大的UI编辑器，使用习惯与Adobe系列软件保持一致，美术设计师和策划都可以轻松上手。

　　airyGUI提供了多个游戏引擎SDK：Unity、Cocos2d-x、Cry Egine, MonoGame, Havok Vision/Project Anarchy、Egret、LayaAir、CocosCreator、Haxe、Pixi、Flash、Starling，未来还将支持UE4、LibGDX等。借助FairyGUI-SDK，

　　你可以轻松在UI中使用3D对象、粒子等元素，而且FairyGUI还解决了环形进度条、像素点击测试、图文混排、循环列表、虚拟列表、曲面UI、VR输入等UI开发中常见的痛点

　　提供的SDK：Egret、LayaAir

　　言外之意，我要是想要用到fairyGui，我还要一个H5引擎

二、Egret是什么？

　　官方地址：https://www.egret.com/

　　白鹭为开发者提供移动端游戏开发一站式解决方案，并建立包含核心渲染引擎2D/3D、游戏开发工具、创意动画工具、资源工具、原生打包方案等全球首个HTML5完整工作流，帮助全球25万+活跃开发者高效开展工作。

　　汗颜，牛逼的是用来做游戏开发的，我能够怎么办 我也很绝望啊~

　　为什么选择Egret？

　　就提供两个SDK，我有选择吗？

　　emmm，第一感觉白鹭相对成熟一些，坑没有这么多吧（良好的自我安慰心理）

三、二者结合

　　fairygui 是提供官方案例的

　　我简单的总结一下，顺便说一说这里面的坑

1. 　　将FairyGUI库以及依赖的rawinflate库拷贝到libs目录。（如果你在编辑器发布时没有勾选压缩描述文件，那么这个库是不需要的）

　　

　　敲重点：这句话我反复了好了几遍，刚开始根本摸不着头脑，哪里来的FairyGUI库？？？？

　　找来找去，思来想去，把官网都要翻遍了 

　　眼睛尖的我发现，原来要去下载他的官方案例，才有这个FairyGUI库

　　一如既往的贴心（白鹭SDK下载地址）：http://www.fairygui.com/product/#Egret-SDK

　　

　　2. 复制一份rawinflate.min.js，并改名为rawinflate.js。（如果你在编辑器发布时没有勾选压缩描述文件，那么这个库是不需要的）。

　　　这句话是什么意思呢：编辑器是指fairygui ，贴心的我再次截图

　　

　　

　　3. 在egretProperties.json文件中添加:

　　

{
    "name": "rawinflate",
    "path": "./libs/rawinflate"
},
{
    "name": "fairygui",
    "path": "./libs/fairygui"
}

　　贴心的我，再次截图，其实呢，就是在白鹭里面引用fairygui库 我用的是最新的白鹭 5.XX

　　

　　4.使用FairyGUI编辑器完成UI编辑。发布目录请选择Egret工程的resource/assets目录。发布后得到两个（或以上）文件。

　　

　　这个我还是再次截图吧！fairygui发布，一定要选择Egret哦！不然就是打出了很多多余的文件

　　设置好了以后，发布项目，把这些文件复制到白鹭项目里面（这个 直接用你下载的demo 实例就好 如果你不想再她的基础之上，你可以直接在自己的项目中引用）

　　

　　5. 在default.res.json里，将上述的文件添加到定义中。扩展名为fui文件，类型请选择为bin。注意：Egret自动检测添加的资源，名称通常会自动加上下划线和后缀，例如basic.fui，名称自动设置为“basic_fui”，这里我们要手动将_fui去掉，名称只需要为“basic”

　　　这个就是静态资源的导入

　　

　　一定要记得 .fui 文件的引用

　　6. 在代码里完成规定的初始化，例如设定默认字体，滚动条等等。

　　　

　　

　　你这样子以为就可以了，一定会报错的，相信我

　　2020年2月补充

　　为什么会报错呢？

　　第一 要替换自己的资源 一定要注意包名对应

　　第二 也要看一下官方是怎么样资源加载的 特别是静态资源加载 （注意资源名 包名 一一对应就好了）

　　~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

　　华丽丽的分割线，昨晚还没有写完，继续写

　　算了，不接着写了（我这该死的 任性啊）

　　成功跑通自己案例的