程序媛小姐姐带你入坑 FairyGUI 之—资源加载

作者：郭霞

编辑：张晓衡

传说中的程序媛「郭女侠」

从事游戏开发10+年

熟悉 Unity、Laya、CocosCreator 游戏开发引擎

与美术伙伴成立有独立游戏开发团队

上篇文章《程序媛小姐姐带你入坑 FairyGUI 之—新手指北》中，我们讲了创建项目及打包项目的流程。本文，我们将介绍Cocos Creator 中如何使用FairyGUI导出的资源。

一、下载 FariyGUI 库文件

首先，最重要的一点，我们需要先引入FairyGUI-Cocos Crerator 的库，下载连接：https://github.com/fairygui/FairyGUI-cocoscreator 该链接包含了FairyGUI-CocosCreator 源码和 Demo，看下图:

我们这里只需要库文件，直接下载 https://github.com/fairygui/FairyGUI-cocoscreator/tree/master/source/bin 中的 fairygui.d.ts 和 fairygui.js 即可。

下载文件后直接将两个文件放入 assets 下的目录中，在《僵尸碰碰车》项目中，我是放在 assets/Script/Lib/ 中，还记得需将 fairygui.js 设置为插件哦！

二、资源加载

其次，要使用 FairyGUI 资源，首先我们需要将打包出来的资源放在 assets/resources 目录或者其子目录下。

当然，更好的方式是我们在 FairyGUI 中打包时直接将发布路径设置成为 assets/resources 目录或者其子目录下。注意：图片建议设置为 RAW 格式，因为 FairyGUI 会自己分析 Sprite。

做好前期的准备之后，我们就可以加载资源啦，加载资源有两种方式：

方式1

第一种方式是我们自己将资源载入进内存，并调用 fgui.UIPackage.addPackage 该方式的主要优点在于做加载进度条，代码如下：

let res = [
  "UI/MasherZ",        //描述文件
  "UI/MasherZ_atlas0", //纹理图集
];

//加载资源
cc.loader.loadResArray(res, function(err, assets) {
  //调用fgui接口addPackage
  fgui.UIPackage.addPackage("UI/MasherZ");
});

方式2

第二种方式是使用 fgui 的loadPackage 直接加载，此方法最简洁，代码如下：

fgui.UIPackage.loadPackage("UI/MasherZ", function(err) {
  //这里不需要再调用addPackage
  //直接可以开始创建界面
  this.onUILoaded();
});

三、创建UI界面

资源加载好后使用fgui.UIPackage.createObject来创建 UI

//创建出来的是一个fgui.GComponent组件
let view:fgui.GComponent = fgui.UIPackage.createObject(“包名”, “组件名”).asCom;
...
//将组件节点添加到界面就可以显示出来了
this.node.addChild(view.node);

如果界面内容过多，创建时可能引起卡顿，FairyGUI 提供了异步创建 UI 的方式，异步创建方式下，每帧消耗的CPU资源将受到控制，但创建时间也会比同步创建稍久一点，代码如下：

let handler = new AsyncOperation();

fgui.UIPackage.createObjectAsync("包名","组件名", myCreateObjectCallback);

void myCreateObjectCallback(obj:fgui.Gobject)
{
}
张哥，我的教程任务终于完成了！

写作文真的太难了... 还是让我写代码吧！！！
目前已经有9位好心人支持，我已经很满意了！
求一个赞，转发更帅

人好心善良，有问必答