FariyGUI × Cocos Creator 入门

news2024/10/5 14:08:16

前言

程序员向的初探Cocos Creator结和FairyGUI的使用，会比较偏向FairyGUI一点，默认各位读者都熟练掌握Cocos Creator以及js/ts脚本编写。
初探门径，欢迎大佬指教，欢迎在评论区或私信与本人交流，谢谢！

下载和安装

都不需要科学上网，非常友好。

下载fgui：https://www.fairygui.com/
下载Cocos Creator并安装编辑器：https://www.cocos.com/creator-download

下下来后是一个 Cocos Dashboard，在Dashboard里面可以安装各个版本的Cocos Creator编辑器。

fgui自带文档：https://www.fairygui.com/docs/editor
fgui自带demo（虽然没有在文档里直接给出链接，但是在github上搜索fariygui即可搜到）https://github.com/fairygui/FairyGUI-cocoscreator
Cocos Creator自带文档：https://docs.cocos.com/creator/manual/zh/

第一个fgui项目

1. 新建项目

在这里插入图片描述
在指定位置创建一个新的UI项目。

项目名称：项目名称。可以使用中文，创建后也可以随便修改。
项目位置：项目位置。注意：请不要使用带中文的路径。
在此位置创建新目录：如果勾选，将在指定的路径创建名称为项目名称的子目录。如果不勾选，则在指定的路径直接创建项目。
项目类型： UI项目类型，即UI实际运行的平台。不同的平台在显示效果、发布结果上有一定的差别。不过不需要担心这里选择错了项目类型，在项目创建后可以随时调整UI项目类型，操作位置在菜单“文件->项目设置”里。

FairyGUI的项目在文件系统的结构为：

assets：包内容放置目录。
package1：每个包一个目录。目录名就是包名。
assets_xx：分支内容放置目录，xx是分支名称。多个分支则存在多个类似名称的目录。
settings：配置文件放置目录。
.objs：内部数据目录。注意：不要加入版本管理，因为这里的内容是不需要共享的。
test.fairy：项目标识文件。文件名就是项目名称，可以随便修改。

2. 编辑器基础

在这里插入图片描述
编辑器主界面由以下几个部分组成：

主菜单。在Mac系统里，主菜单和Mac应用程序菜单集成；在Windows系统里，主菜单显示在主界面最上方。
主工具栏。常用的功能按钮。
文档视图。包括已打开的文档的列表，侧工具栏和舞台区域。
状态栏。显示控制台输出的最后一条信息。点击可以打开控制台。
各个功能视图。用户可以按使用习惯将它们拖动到不同位置，也可以关闭。右键点击面板的标题栏，在右键菜单中选择“关闭”即可。如果要重新打开，在“主菜单->视图”里操作。

多余的描述我就不在这里赘述了，看fgui的官方文档吧，相信各位都很快能够明白每个按钮的意义，不会的查下官方文档，这篇文章只挑和Cocos比较不一样的或需要注意的地方讲。

3. 包

官方文档：https://www.fairygui.com/docs/editor/package

fgui的包的定义和Cocos Creator里的subpackage的定义类似，因此做好包内资源的管理是很重要的。

看一下fgui的demo里分的包：
在这里插入图片描述
在Cocos Creator里显示的样式：

在这里插入图片描述
在BasicsDemo.ts里调用的有关包的加载和卸载：

onLoad() {
    //......
    fgui.UIPackage.loadPackage("UI/Basics", this.onUILoaded.bind(this));
}
onUILoaded() {
    this._view = fgui.UIPackage.createObject("Basics", "Main").asCom;
    //......
}
onDestroy() {
	//......
    fgui.UIPackage.removePackage("Basics");
}

4. 制作第一个组件

新建fgui项目之后，改一下包名和组件的名字，引入一张图片。
在这里插入图片描述
将画布大小改为720*1600（也可以不改，按个人习惯来就好）

和Cocos Creator不同的是，fgui里锚点默认在左上角，而不是正中心，如果想要锚点在中心，需要设置一下。
同样，这里也是按照自己的习惯来就好，我还是比较习惯锚点在中心一点。
在这里插入图片描述

将图片放入舞台

在这里插入图片描述

使用九宫图片

官方文档：https://www.fairygui.com/docs/editor/image
双击图片，进入图片编辑，选择九宫格。
在这里插入图片描述
缩放图片即可看见效果。

添加文本

在这里插入图片描述

在按钮上添加文本

当我们需要添加一个文本在按钮上时，不能直接这么往上摆，需要让他们有父子关系。观察一下demo里的按钮都是怎么做的：
在这里插入图片描述
button被单独拎出来了，而且上面有一个title文本，我们也照做一个。
点击上方新建一个按钮。
设置尺寸300*100

将原本的矩形换成我们自定义的图片

在这里控制显示样式

在这里切换按钮状态查看按钮样式
在这里插入图片描述
做好后应该这样

ctrl+s保存，回到Main
将按钮拖入，改一下位置，保存。
在这里插入图片描述

加一个简单的背景，这个场景就算做完了
在这里插入图片描述

发布

官方文档：https://www.fairygui.com/docs/editor/publish
打开demo的发布设置看一眼，照葫芦画瓢填一下
在这里插入图片描述

坐等发布

发布后可以在相应路径看到

在Cocos里使用

官方文档：https://www.fairygui.com/docs/sdk/creator
新建一个Cocos项目，按如下路径导入资源，并新建一个场景。
这里建议新建一个Cocos 2.4.0的项目，以保证和demo一样。
看demo知道，核心库是fairygui.js，因此我们把它复制粘贴进来。
在这里插入图片描述
新建一个常驻节点，编写一个脚本Main.ts

const { ccclass, property } = cc._decorator;

@ccclass
export default class Main extends cc.Component {
    private _view: fgui.GComponent;

    onLoad() {
        fgui.GRoot.create();
        fgui.UIPackage.loadPackage("UI/MainPkg", this.onUILoaded.bind(this));
    }

    onUILoaded() {
        fgui.UIPackage.addPackage("UI/MainPkg");
        this._view = fgui.UIPackage.createObject("MainPkg", "Main").asCom;
        this._view.makeFullScreen();
        fgui.GRoot.inst.addChild(this._view);
    }

    onDestroy() {
        this._view.dispose();
    }

}