东莞市盛裕绒艺玩具有限公司

东莞市盛裕绒艺玩具有限公司

sungame988官网平台

15509420394
联系方式
全国服务热线: 15509420394

咨询热线:15254761871
联系人:郭艳
地址:青海省西宁市城中区南京路74号

Egret——Egret+fairyGui 实战项目入门

来源:sungame988官网平台   发布时间:2019-06-24   点击量:370

前言

  一行白鹭上青天

需求

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

需求分析

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

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

一、fairygui 是什么?

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

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

  airyGUI提供了多个游戏引擎SDK:UnityCocos2d-xCry EgineMonoGameHavok Vision/Project AnarchyEgretLayaAirCocosCreatorHaxePixiFlashStarling,未来还将支持UE4LibGDX等。借助FairyGUI-SDK,

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

  提供的SDK:EgretLayaAir

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

二、Egret是什么?

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

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

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

  为什么选择Egret?

  就提供两个SDK,我有选择吗?

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

三、二者结合

  fairygui 是提供官方案例的

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

      将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. 在代码里完成规定的初始化,例如设定默认字体,滚动条等等。

   

  

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

  

 

, 1, 0, 9);

相关产品

COPYRIGHTS©2017 sungame988官网平台 ALL RIGHTS RESERVED 备案号:370