前言

前文提要：
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();}