cocoscreator3.7使用fgui踩坑

最近搞的一个小项目,由于大部分是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里把编辑框的单行模式点上即可。

9赞

好!,感谢老哥贡献自己的经验

我在 3.6.3 中使用 fairygui,还有一个问题你可能没发现,在 GComponent 中开启自定义遮罩后,运行时会出现问题

在 GComponent.ts 中这样改一下就好啦
3F3869B9-073E-4382-A7DD-1C4FD36A402B
E88BE872-61A7-4099-BCF5-DF55A74E3EFD

6赞

你们没有遇到fgui.UIPackage.removePackage(pkg.id);的坑吗?为啥我调用这个就直接报错了。

有遇到 createobject 超级慢的坑吗?在原生平台完全没法忍受
创建40个item,每个item包含一张图片和一个label,fairygui 需要200ms以上。直接用cocos的ui拼,只需要40毫秒

有遇到 createobject 超级慢的坑吗?在原生平台完全没法忍受
创建40个item,每个item包含一张图片和一个label,fairygui 需要200ms以上。直接用cocos的ui拼,只需要40毫秒

你这个用分帧创建试试,有时候1+1可能大于2

这个可以直接使用svg,是我选择的一个理由

另外,两年半能出师吗, j…j…jjj…

@1220792244大佬,“4fgui库里有一些类不适合当前ccc版本了,全局搜索替换一下即可。”这段话 是换了那几个文件啊,fairygui.js吗?

好吧,强行替换js文件果然可行, 想重新打包fgui实在太难了

使用自定义遮罩功能后,必须要改原来的源码,否则报错过不了的。

如果改原来源码,就要重新打包了,这个花点时配置改错就可以了。

重新打包时,龙骨的接口有些报错,要强制转为any后才可以。

我这边有重新打包的js文件和源码包,有需要我可以上传上来。

1赞

期待大佬的分享

链接:https://pan.baidu.com/s/1itmA2AZ8M1u2h_Rjm9BGkQ
提取码:l96f

2赞

我按你的方式添加了插件增加语句,但是发布的时候还是没有变化,不知道是什么设置不对吗?

其实已经支持到3.8了,还有个分支支持延迟加载:
https://github.com/wingcd/FairyGUI-cocoscreator/tree/ccc3.8

3赞

支持的3.8有没有把之前的坑填上还是需要自己微调,如果是这样就暂时不升级库了,现在都改完了

在当前项目的plugins里的那个脚本中改,你是不是改到fgui的plugins目录了

没,直接替换的node_modules下面的,然后提交到项目中

求助,有没有大佬使用fgui过程中出现文本无法对齐,使用标签组件会显示Label文本在中间这种情况啊,感觉和文本相关的组件都有向上偏移的问题,大佬们有没有好的解决方案啊