下载

下载 | FairyGUI

我的 FairyGUI 版本是2022.1.0p1

创建新项目

FairyGUI，点击创建新项目，点击项目位置，选择游戏项目的根目录，因为我用的是 cocos creator，所以项目类型选择 cocos creator。

接下来查看官方文档开始拼界面吧~

发布设置

点击全局设置 选择发布路径，选择项目根目录 -> asset -> resources -> ui，如果没有 resources 文件夹，自行创建，ui 文件夹可不要，但是建议加上，只为了清晰的目录结构。

允许发布代码 FairyGUI 自动生成 UI 界面代码，方便开发者获取界面里的按钮、文本等节点，变量名就是节点名称，如果填写了成员名称前缀，则加上前缀。 其它的设置默认就行，点击发布，然后在 cocos creator 界面就可以看到新增文件。

切换到 creator 使用 VSCode 打开项目，creator3.x版本支持使用 npm 方式导入 FairyGUI SDK。

npm i --save fairygui-cc

使用 npm 方式安装 SDK 需要手动导入:

import * as fgui from 'fairygui-cc'

还有一个问题是，从 FairyGUI 发布的代码会报错，官方生成的文件没有导入 fgui，需要自行写一个发布插件。

creator2.x版本需要从官方 demo 拷贝库文件和声明文件到项目目录下（不知道自行创建package.json文件，再使用npm安装可不可以呢）。

官方 demo 链接：fairygui/FairyGUI-cocoscreator: A flexible UI framework for Cocos Creator (github.com)

加载 UI 界面

import { _decorator, Component, Node } from "cc";
import * as fgui from "fairygui-cc";
const { ccclass, property } = _decorator;

@ccclass("Main")
export class Main extends Component {
  protected onLoad(): void {
    fgui.GRoot.create();
    fgui.UIPackage.loadPackage("ui/Package1", this.onUILoaded.bind(this));
  }
  onUILoaded() {
    // 注意包名和组件名要和 FairyGUI 上的一致
    let view = fgui.UIPackage.createObject("Package1", "Main").asCom;
    fgui.GRoot.inst.addChild(view);
    // 通过 getChild 获取节点
    let btn = view.getChild("btn");
  }
}

---END---