cocos Creator + fairyGUI 快速入门

版本 Creator 3.8.x，FairyGUI 2022

大部分内容来自 https://en.fairygui.com/docs/sdk/creator

1.新建cocos项目，根目录运行 npm install --save fairygui-cc 引入 fairyGUI库

2.assets目录之外新建fairyGUI项目

3.fairyGUI中编辑UI 完成后发布到Creator的assets/resources目录或者其子目录下。注意，图片设置为RAW格式即可，不需要设置为Sprite。因为FairyGUI会自己分析Sprite。

4.加载。一种是你负责把文件加载，第二种是让FairyGUI自己去加载。第一种方式是方便你做一个混杂了其它资源的总体的加载，或者显示进度的需求等：

typescript 复制代码

//这里填写的是相对于resources里的路径
    let res = [ 
        "UI/Bag",  //描述文件
        "UI/Bag_atlas0" //纹理集
    ];
    cc.loader.loadResArray(res, function(err, assets) {
        //都加载完毕后再调用addPackage
        fgui.UIPackage.addPackage("UI/Bag"); 

        //下面就可以开始创建包里的界面了。
    });
    
//这里填写的是相对于resources里的路径
    fgui.UIPackage.loadPackage("UI/Bag", function(err) {
        //这里不需要再调用addPackage了，直接可以开始创建界面了
    });

5.卸载。当一个包不再使用时，可以将其卸载。

typescript 复制代码

//这里可以使用包的id，包的名称，包的路径，均可以
fgui.UIPackage.removePackage("Bag");

包卸载后，所有包里包含的贴图等资源均会被卸载，由包里创建出来的组件也无法显示正常（虽然不会报错），所以这些组件应该（或已经）被销毁。

一般不建议包进行频繁装载卸载，因为每次装载卸载必然是要消耗CPU时间（意味着耗电）和产生大量GC的。UI系统占用的内存是可以精确估算的，你可以按照包的使用频率设定哪些包是常驻内存的（建议尽量多）。

5.创建ui

每个场景都需要有一个GRoot，这是UI的根节点。场景载入后，需要手动创建GRoot。

typescript 复制代码

调用 fgui.GRoot.create();

public static create(): GRoot {
    GRoot._inst = new GRoot();
    director.getScene().getChildByName('Canvas').addChild(GRoot._inst.node);
    GRoot._inst.onWinResize();

    return GRoot._inst;
}

创建FGUI对象。

typescript 复制代码

 let view:fgui.GComponent = fgui.UIPackage.createObject("包名", "组件名").asCom;
    
    //以下几种方式都可以将view显示出来：
    
    //1，直接加到GRoot显示出来
    fgui.GRoot.inst.addChild(view);
    
    //2，使用窗口方式显示
    aWindow.contentPane = view;
    aWindow.show();
    
    //3，加到其他组件里
    aComponnent.addChild(view);

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

typescript 复制代码

let handler = new AsyncOperation();
handler.createObject("包名","组件名", myCreateObjectCallback);

void myCreateObjectCallback(obj:fgui.Gobject)
{
}

关闭界面一般用隐藏即可，即：

typescript 复制代码

//如果是加在GRoot或者其他父节点的
view.removeFromParent();

//如果是窗口
view.hide();

如果界面不再使用了，可以销毁它：

typescript 复制代码

view.Dispose();

场景切换时，所有界面都会被销毁。如果不想被销毁，需要创建出界面后，把根节点设置为常驻，并且切换场景前，确保关闭界面。

typescript 复制代码

cc.game.addPersistNode(view.node);

6.事件系统

FairyGUI直接使用了Creator的事件系统，所以GObject.on/off其实是通过GObject.node.on/off实现的，也就是可以通过GObject.node进行任何事件的操作，包括自定义的事件。在事件回调中，cc.Event中的currentTarget反映的是这个事件是由哪个node派发的，如果要获得这个node对应哪个GObject，可以用这样的方法：

typescript 复制代码

aObject.on(someEventName, this.onHandle, this);

onHandle(evt:cc.Event) {
    cc.log(evt.currentTarget); //node对象
    cc.log(fgui.GObject.cast(evt.currentTarget)); //gobject对象
}

7.鼠标/触摸类事件

对于鼠标事件和触摸事件，FairyGUI里都使用自定义的事件，常量定义在fgui.Event里，这和Creator自身的cc.Node.EventType.TOUCH_BEGIN是不一样的，要注意区别。因为Creator自己的触摸逻辑很难处理穿透/不穿透，以及自定义区域点击这些情况。

鼠标/触摸事件回调函数有一个参数：evt:fgui.Event，fgui.Event继承于cc.Event。

TOUCH_BEGIN

鼠标按键按下（左、中、右键），或者手指按下。鼠标按钮可以从evt.button获得，0-左键,1-中键,2-右键。如果是触摸事件，可以从evt.touchId获得手指ID；如果是鼠标事件，evt.touchId恒定为0。

TOUCH_MOVE

鼠标指针移动或者手指在屏幕上移动。这个事件只有两种情况会触发，1、在TOUCH_BEGIN里调用了evt.captureTouch()，那么后续的移动事件都会在这个对象上触发（无论手指或指针位置是不是在该对象上方）。2、GRoot上的TOUCH_MOVE始终会触发，不需要使用captureTouch捕获。

TOUCH_END

鼠标按键释放或者手指从屏幕上离开。如果鼠标或者触摸位置已经不在GObject范围内了，那么组件的TouchEnd事件是不会触发的，如果确实需要，可以在TOUCH_BEGIN里调用evt.captureTouch()请求捕获。

CLICK

点击事件。可以从evt.isDoubleClick判断是单击还是双击。侦听点击事件有个快捷方式：GObject.onClick(callback,...)，比GObject.on(fgui.Event.CLICK,...)简洁点。

ROLL_OVER 鼠标指针或者手指移入显示对象区域时触发。

ROLL_OUT 鼠标指针或者手指移出显示对象区域时触发。

MOUSE_WHEEL 鼠标滚动事件。

如果不在事件回调流程中，需要获得当前鼠标或者手指的位置，可以用：

typescript 复制代码

//touchId是手指id，如果你不关心这个，不传入即可
let pos1:cc.Vec2 = fgui.GRoot.inst.getTouchPosition(touchId);

在任何时候，如果需要获得当前点击的对象，或者鼠标下的对象，都可以通过以下的方式获得：

typescript 复制代码

let obj:fgui.GObject = fgui.GRoot.inst.touchTarget;

//判断是不是在某个Fgui组件内 
cc.Log(testComponent.isAncestorOf(obj));

8.字体

如果要使用ttf字体，需要这些步骤：

1、首先需要得到cc.Font对象，这个对象你是从loadRes获得，还是直接在场景中通过脚本的变量获得，可按照项目需求。

2、使用fgui.UIConfig.registerFont给这个cc.Font注册一个FairyGUI里使用的字体名称，假定aFont就是cc.Font对象：

typescript 复制代码

fgui.UIConfig.registerFont('myfont', aFont);

3、如果这个是全局字体：

typescript 复制代码

fgui.UIConfig.defaultFont = 'myFont';

4、如果这个是某个文字单独指定的字体，例如：

这里用到了"黑体"这个名字的字体，这是与UIConfig.defaultFont不同的字体，那么我们需要注册这种字体。即：

typescript 复制代码

fgui.UIConfig.registerFont('黑体', aFont);

cocos 组件的声明周期接口：

注意事项：

1.fgui坐标系是以左上角为原点的。cocos则是左下角