最近搞的一个小项目,由于大部分是ui界面,所以尝试着使用了fgui编辑界面再放入ccc中使用。坑差不多都踩完了,列了一下相关的问题和解决方法,想要在ccc3.X中使用fgui的c友可以参考一下。
fgui版本:2022.1.0p1,
ccc版本:用的3.6.2后来升到了3.7,估计3.X版本应该都差不多
1使用npm下载fgui库,直接按官网上的来即可
2引用fgui模块
在需要使用fgui接口的脚本中 import * as fgui from “fairygui-cc”;
3fgui发布设置:
3.1可以直接把导出的目录设置到你的ccc项目中,这样比较方便。
3.2建议勾选允许发布代码,fgui会在导出的时候为每个fgui组件(这个组件和游戏引擎的组件概念不一样,等于一个预制体)生成一个脚本
3.2 ext: fgui生成的脚本目前有一点问题,它需要引用fgui模块,但是手动写这行代码的话,不仅要每个脚本写一次,还每次修改ui导出后又得重写。
我尝试了两个方向,一个是ccc的importmap。由于本人比较菜,没搞明白。
另一个方向,为fgui当前项目添加一个插件,插件模板选择 发布代码(typescript) 然后在fgui项目的plugins里找到这个插件的GenCode_TS.js
在21行处( let writer = … 这一句后面)加一句 writer.writeln(‘import * as fgui from “fairygui-cc”;’);
这样所有导出生成的脚本里就自动有引用fgui模块了
4fgui库里有一些类不适合当前ccc版本了,全局搜索替换一下即可。
4.1renderComponent已弃用 改用UIRenderer 这个必须改,不然会报错
4.2gettotaltime已弃用,更换为game.totalTime
4.3getCanvasSize已弃用,改用screen.windowSize
(开头增加从cc导入screen)
fgui在ccc中大致的使用
onLoad() {
// 绑定生成的ui脚本类型 Main是fgui包,这里我的示例项目只有一个main包
MainBinder.bindAll();
// 初始化fgui根节点
fgui.GRoot.create();
// 加载fgui包
fgui.UIPackage.loadPackage(“fgui/Main”, this.onUILoaded.bind(this));
}
onUILoaded() {
this._view = <UI_Main>fgui.UIPackage.createObject(“Main”, “Main”);
this._view.makeFullScreen();
fgui.GRoot.inst.addChild(this._view)
this._view.XXBtn.onClick(this.onXXClicked, this)
}
使用时遇到的一些问题:
fgui的文本编辑框在ccc中有滚条。ccc手动创建的则没有。经过我的查看后发现,ccc默认使用了单行模式,fgui默认没有使用单行模式,在fgui里把编辑框的单行模式点上即可。