前言

前文提要：
FariyGUI × Cocos Creator 入门
FairyGUI × Cocos Creator 3.x 使用方式

个人demo：https://gitcode.net/qq_36286039/fgui_cocos_demo_dust

个人demo可能会更新其他代码，还请读者阅读本文内容，自行理解并实现。

官方demo：https://github.com/fairygui/FairyGUI-cocoscreator/tree/ccc3.0

场景切换

阅读一下FairyGUI官方给的Cocos Creator 3.x 的 demo，可以看见它是怎么场景切换的。

1. 场景里挂一个常驻节点
   
2. 挂上一个脚本Entry.ts

import * as cc from 'cc';
const { ccclass, property } = cc._decorator;
import * as fgui from "fairygui-cc";
import Main from './Main';


@ccclass
export default class Entry extends cc.Component {

    private _currentDemo: cc.Component = null!;

    onLoad() {
        fgui.GRoot.create();
        this.node.on("scene_replace", this._onDemoStart, this);
        this.addComponent(Main);
    }

    private _onDemoStart(demoStr: string) {
        let demo: cc.Component = this.addComponent(demoStr)!;
        this._currentDemo = demo;
    }

    start() {

    }
}

这一行代码帮助我们先切换到第一个场景：

this.addComponent(Main);

3. 在Main.ts的onload里加载fgui界面：

	public onLoad() {
        cc.assetManager.loadBundle("UI", (err, res) => {
            fgui.UIPackage.loadPackage(res, "MainPkg", this._onUILoaded.bind(this));
        });
	}

    private _onUILoaded() {
        this._view = fgui.UIPackage.createObject("MainPkg", "Main").asCom;
        this._view.makeFullScreen();
        fgui.GRoot.inst.addChild(this._view);
        this.StartBtn = this._view.getChild("StartBtn");
        this._initBtnEvents();
    }

其中MainPkg对应fgui中的包名，Main对应包内的组件名，这些代码观察demo即可。

4. 在Main中切换场景

private _onStartGame() {
    this.node.emit("scene_replace", "Game");
    this.destroy();
}

这段代码帮我们从Main脚本切换到Game脚本

5. Game.ts脚本的onLoad

    public onLoad() {
        let UIBundle = null;
        cc.assetManager.loadBundle("UI", (err, res) => {
            UIBundle = res;
            fgui.UIPackage.loadPackage(UIBundle, "GamePkg", this._onUILoaded.bind(this));
        });
    }

    private _onUILoaded(err, pkg) {
        this._view = fgui.UIPackage.createObject("GamePkg", "Game").asCom;
        this._view.makeFullScreen();
        fgui.GRoot.inst.addChild(this._view);
        this.BackBtn = this._view.getChild("BackBtn");
        this.BackBtn.on(cc.Node.EventType.TOUCH_END, this._onClickBack, this);
    }

6. 从Game返回到Main

    private _onClickBack(evt: Event): void {
        fgui.GRoot.inst.removeChildren(0, -1, true);
        this.node.emit("scene_replace", "Main");
        this.destroy();
    }