FairyGUI编辑器自定义菜单扩展插件

已于 2023-10-08 23:21:53 修改
阅读量2.5k 收藏 4
点赞数 3
分类专栏： FairyGUI 文章标签： FairyGUI FairyGUI插件
于 2023-08-18 18:51:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012433546/article/details/132367236
版权

本文涉及到的软件有：FairyGUI，VSCode

代码环境涉及到了：Lua

VSCode插件：EmmyLua

在编写FairyGUI编辑器菜单前，了解一下FairyGUIEditor的API会有效的帮助我们解决很多问题。FairyGUI的扩展是通过编辑器自带的插件功能实现的，插件中我使用的是lua环境模板。导入编辑器的LuaAPI，文件可以在FairyGUI-Editor源码的插件目录中找到。接下来将通过功能来说明对应的API作用。

插件的位置

 如果找不到插件面板，可以通过“视图→插件”或“工具→插件”添加插件面板。

1、打开插件目录，插件目录是在“项目目录/plugins"文件夹下，每个插件对应一个子文件夹。

2、创建新插件

3、刷新插件列表

一个新插件的诞生

点击创建新插件，可以在插件模板选择要写的插件类型和语言格式

点击创建后，插件列表中就会出现刚刚创建的新插件。

这时候，点击打开插件目录，会发现原本空空的插件目录中多了一个刚刚新建的插件文件夹，右键使用VSCode打开。

可以注意到，目录下有两个文件“main.lua”和“package.json”。其中main.lua是插件的入口脚本，package.json是插件的配置文件。

双击main.lua后可以看到“onDestroy”方法，可以将之后的清理代码添加到此处。保存编写后的代码，在编辑器中点击刷新插件列表，可以将最新插件代码同步到编辑器。如果这时候编辑器保存，如果不是代码书写错误，可以通过重启编辑器进行刷新插件。

 编辑器的个人常用API

App是工程入口类，类型：CS.FairyEditor.App。通过LuaAPI中的CS_FairyEditor_App可以看到编辑器中的功能字段。下面将列出将要用的字段和方法。

CS.FairyEditor.App
字段名类型作用
projectCS.FairyEditor.FProject记录当前工程的配置和资源
libViewCS.FairyEditor.View.LibraryView编辑器的资源库面板
inspectorViewCS.FairyEditor.View.InspectorView编辑器的检查器面板
consoleViewCS.FairyEditor.View.ConsoleView编辑器的控制台面板
menuCS.FairyEditor.Component.IMenu编辑器的菜单栏
pluginManagerCS.FairyEditor.PluginManager插件管理
CS.FairyEditor.FProject
字段名类型作用
namestring工程名“如：FGUIProject”
basePathstring工程的路径“如：D:\Documents\FGUIProject”
assetsPathstring工程的路径“如：D:\Documents\FGUIProject\assets”
allPackagesCS.FairyEditor.Fpackage[]工程中的所有包
allBranchesstring[]工程中的所有分支
CS.FairyEditor.Fpackage
字段名类型作用
namestring当前包的名字
itemsCS.FairyEditor.FPackageItem[]当前包下的资源
CS.FairyEditor.FPackageItem
字段名类型作用
pathstring资源路径
namestring资源名
CS.FairyEditor.View.LibraryView
字段名类型作用
contextMenuCS.FairyEditor.Component.NPopupMenu资源库的右键菜单
CS.FairyEditor.Component.NPopupMenu
方法名参数作用
AddItemcaption:string, name:string, selectCallback:(fun():void)添加一个菜单项并设置选中回调事件
AddSeperator添加菜单分割线
SetItemGrayedstring name, bool grayed设置目标不能点击
onPopupCS.FairyGUI.EventListener菜单弹出事件

 开始编写插件代码

需求1

需求1：在工具菜单中添加“导出所有UI名字”的菜单项，点击后复制结果。

前提：所有UI界面具有相同的命名规则，这里我用的是UIXXX，所以在获取所有UI的时候只需要检测当前文件的名字UI是否存在。在这个需求实现的功能中，需要准备一个lua代码格式的文本代码，之后会将classField替换为获取到的UI名。

local tmp_ui_type = [[
---@class UIType
return {
    classField
}
]]

代码已经加了详细的注解，可以直接查看完整代码：

---@type CS.FairyEditor.App
local _app = CS.FairyEditor.App
local project = _app.project
---输出绝对文件路径
local file_out_path =("%s/UIType.lua"):format(project.basePath)
---Lua模板
local tmp_ui_type = [[
---@class UIType
return {
    classField
}
]]
---获取工具菜单
---@type CS.FairyEditor.Component.MenuBar
local toolMenu = _app.menu:GetSubMenu("tool")
---添加分隔符
toolMenu:AddSeperator()
---添加菜单,显示名字，内部标签名，回调方法
toolMenu:AddItem("导出UIType","XiaoExportUIType",function()
    local _classField = ""
    ---获取工程中的所有包，返回值是列表
    local allPackages = _app.project.allPackages
    for i = 1, allPackages.Count do
        ---C#索引从0开始
        ---@type CS.FairyEditor.FPackage
        local package = allPackages[i - 1]
        ---获取当前包中的所有子项，返回值是列表
        local items = package.items
        for i = 1, items.Count do
            ---@type CS.FairyEditor.FPackageItem
            local item = items[i - 1]
            ---记录所有UI开头的子项
            if string.find(item.name,"UI") == 1 then
                local uiType = string.format("%s = %s_%s,\n\t",item.name,package.name,item.name)
                _classField = _classField .. uiType
            end
        end
    end
    ---输出日志打印
    fprint(_classField)
    ---替换模板
    tmp_ui_type = tmp_ui_type:gsub("classField",_classField)
    ---写出模板
    local f = io.open(file_out_path,"w")
    f:write(tmp_ui_type)
    f:close()
    ---输出路径打印
    fprint(string.format("导出UIType：[url]%s[/url]",file_out_path))
end)
function onDestroy()
-------do cleanup here-------
    toolMenu:RemoveItem("XiaoExportUIType")
end
 需求2：

需求2：在资源库的右键菜单中添加“复制组件脚本路径”，方便提取当前组件的require路径。并且实现组件筛选，在不满足条件的情况下，“复制组件脚本路径”菜单项置灰不可用。

前提：所有非UI的组件都在当前包的Comps的文件夹下存放。

重新新建一个插件或者在之前的插件中继续编写，这里我是接着之前的插件继续写。

---添加资源库右键菜单
---需求：复制Comps文件夹下的组件所转化的脚本路径
---获取右键菜单
local libcontextMenu = _app.libView.contextMenu
---添加分割线
libcontextMenu:AddSeperator()
libcontextMenu:AddItem("复制组件脚本路径","XiaoCopyAssetPath",function()
    ---获取当前选中的资源
    ---@type CS.FairyEditor.FPackageItem
    local item = _app.libView:GetSelectedResource()
    ---检测资源是否满足条件
    if item.path:find("/Comps/") == 1 then
        ---准备复制
        local cp_str = ("require(\"UI.%s.Comps.%s\")"):format(item.owner.name,item.name)
        ---Unity复制操作
        CS.UnityEngine.GUIUtility.systemCopyBuffer = cp_str
        ---弹窗提示
        _app.Alert("复制成功")
    else
        _app.Alert("复制失败")
    end
end)

---在弹出的菜单中检测当前选择的资源是否满足条件
local function XiaoCopyAssetPathFunc()
    ---@type CS.FairyEditor.FPackageItem
    local item = _app.libView:GetSelectedResource()
    local grayed = true
    if item.path:find("/Comps/") == 1 then
        -- body
        grayed = false
    end

    libcontextMenu:SetItemGrayed("XiaoCopyAssetPath",grayed)
end

libcontextMenu.onPopup:Add(XiaoCopyAssetPathFunc)

之后不要忘记在onDestroy方法中移除我们的菜单项“XiaoCopyAssetPath”

---移除菜单
libcontextMenu:RemoveItem("XiaoCopyAssetPath")
---移除事件
libcontextMenu.onPopup:Remove(XiaoCopyAssetPathFunc)

完整插件代码

---@type CS.FairyEditor.App
local _app = CS.FairyEditor.App
local project = _app.project

---输出绝对文件路径
local file_out_path =("%s/UIType.lua"):format(project.basePath)

---Lua模板
local tmp_ui_type = [[
---@class UIType
return {
    classField
}
]]

---获取工具菜单
---@type CS.FairyEditor.Component.MenuBar
local toolMenu = _app.menu:GetSubMenu("tool")
---添加分隔符
toolMenu:AddSeperator()
---添加菜单,显示名字，内部标签名，回调方法
toolMenu:AddItem("导出UIType","XiaoExportUIType",function()
    local _classField = ""
    ---获取工程中的所有包，返回值是列表
    local allPackages = _app.project.allPackages
    for i = 1, allPackages.Count do
        ---C#索引从0开始
        ---@type CS.FairyEditor.FPackage
        local package = allPackages[i - 1]
        ---获取当前包中的所有子项，返回值是列表
        local items = package.items
        for i = 1, items.Count do
            ---@type CS.FairyEditor.FPackageItem
            local item = items[i - 1]
            ---记录所有UI开头的子项
            if string.find(item.name,"UI") == 1 then
                local uiType = string.format("%s = %s_%s,\n\t",item.name,package.name,item.name)
                _classField = _classField .. uiType
            end
        end
    end
    ---输出日志打印
    fprint(_classField)
    ---替换模板
    tmp_ui_type = tmp_ui_type:gsub("classField",_classField)
    ---写出模板
    local f = io.open(file_out_path,"w")
    f:write(tmp_ui_type)
    f:close()
    ---输出路径打印
    fprint(string.format("导出UIType：[url]%s[/url]",file_out_path))
end)

---添加资源库右键菜单
---需求：复制Comps文件夹下的组件所转化的脚本路径
---获取右键菜单
local libcontextMenu = _app.libView.contextMenu
---添加分割线
libcontextMenu:AddSeperator()
libcontextMenu:AddItem("复制组件脚本路径","XiaoCopyAssetPath",function()
    ---获取当前选中的资源
    ---@type CS.FairyEditor.FPackageItem
    local item = _app.libView:GetSelectedResource()
    ---检测资源是否满足条件
    if item.path:find("/Comps/") == 1 then
        ---准备复制
        local cp_str = ("require(\"UI.%s.Comps.%s\")"):format(item.owner.name,item.name)
        ---Unity复制操作
        CS.UnityEngine.GUIUtility.systemCopyBuffer = cp_str
        ---弹窗提示
        _app.Alert("复制成功")
    else
        _app.Alert("复制失败")
    end
end)

---在弹出的菜单中检测当前选择的资源是否满足条件
local function XiaoCopyAssetPathFunc()
    ---@type CS.FairyEditor.FPackageItem
    local item = _app.libView:GetSelectedResource()
    local grayed = true
    if item.path:find("/Comps/") == 1 then
        -- body
        grayed = false
    end

    libcontextMenu:SetItemGrayed("XiaoCopyAssetPath",grayed)
end

libcontextMenu.onPopup:Add(XiaoCopyAssetPathFunc)


function onDestroy()
-------do cleanup here-------
    libcontextMenu:RemoveItem("XiaoExportUIType")
    ---移除菜单
    libcontextMenu:RemoveItem("XiaoCopyAssetPath")
    ---移除事件
    libcontextMenu.onPopup:Remove(XiaoCopyAssetPathFunc)
end

菜单的操作目前只用到了这两种，后面在实际操作中如果还有，则会继续更新！

Long Xiao
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
FairyGUI插件
01-24
一款非常好用的FairyGUI-Editor_3_4_3。内附视频教程，解压可用
探索FairyGUI编辑器插件：打造高效的游戏UI开发新体验
gitblog_00042的博客
04-23 402
探索FairyGUI编辑器插件：打造高效的游戏UI开发新体验 项目地址:https://gitcode.com/krapnikkk/FairyGUI-Editor-Plugins FairyGUI-Editor-Plugins 是一个开源项目，旨在为FairyGUI用户提供一系列强大的编辑器插件，以提升游戏UI的设计与开发效率。FairyGUI本身是一个跨平台的2D游戏UI解决方案，而这些插件则进...
【Unity之FairyGUI】你了解FGUI吗，跨平台多功能高效UI插件
最新发布
秩沅
05-15 1170
跨平台多功能高效UI插件FGUI
FairyGUI1：FairyGUI 编辑器
加载中...
09-03 1996
FairyGUI 官网：https://www.fairygui.com/ 官方手册已经很齐全了，但是内容太多刚看容易迷失方向，所以还是可以记录下重点，可以当作是非常简单的概括式教程 一、FairyGUI 编辑器入门 FairyGUI 编辑器教程：https://www.fairygui.com/docs/editor/component 1.1 组件与基本元件 组件就是根节点(Panel)，元件就是指具体的一个一个 UI 元素，像图片、文字、按钮这些就是最最基础的元件，为了方便编辑，可以..
FairyGUI学习使用
m0_52155091的博客
02-19 2193
#FairyGUI的创建 编辑好项目名称后，选定项目存储位置，最后选定项目类型点击创建即可 #FairyGUI主界面展示
Unity笔记——FairyGUI
qq_55042292的博客
07-29 1954
平时一直用的都是Unity内部的UGUI来着，本来以为FairyGUI跟UGUI差不多，用了之后才发现完全不是一个等级的，FairyGUI用起来舒服多了，很多Unity内部处理比较麻烦的FairyGUI都封装好了代码和UI制作可参考官方demo。...
Unity插件-FairyGUI
qq_50682713的博客
05-16 1075
1. 准备 安装FairyEditor作为该GUI的编辑工具 为对应平台安装对应的SDK 2. 基本使用 右键资源中的package以新建组件，其功能类似于添加面板。 图像文件可直接拖拽进编辑器中以导入。 在 文件设置->快捷菜单 中，编辑每行记录来定义多种预设。 3. 组件与元件 组件是基本容器，用来显示其他对象，类似于unity中的panel 点击面板以外的部分，来对组件进行设置 检查器->设计图：作为打底的半透明图，来作为设计时的参考 元件是图像，文本等，组合型元件是指如下拉列表
FairyGUI-Editor:专业的UI编辑器
05-03
Here is the UI project of the FairyGUI Editor itself. You can use it freely, the only request is to like this project. 这是FairyGUI编辑器的界面工程。 你可以自由使用它，唯一的请求是点个星星支持。
UI编辑器FairyGUI教程.rar
07-01
《UI编辑器FairyGUI深度解析教程》 在游戏开发领域，用户界面（UI）的设计与实现至关重要，它直接影响到玩家的游戏体验。FairyGUI是一款强大的UI编辑器，专为游戏开发者提供便捷、高效的UI解决方案。本教程将深入...
FairyGUI Editor UI编辑器 v2020.2.3官方版
12-21
为您提供FairyGUI Editor UI编辑器下载，FairyGUI Editor是一款开源的，功能强大的UI编辑器，具有可视化功能，可零代码实现设计效果，有强大的文件控件，列表控件，所见即所得，内置多种手势操作。软件特色　...
FairyGUI-Editor
07-25
FairyGUI诞生于2014年，由谷主创立。作者在多年从事游戏UI开发过程中，深知游戏开发人员在UI开发中的痛点，一是缺乏简单易用并可视化的编辑工具，导致程序员和美术耦合过深；二是市面上的框架不够成熟，导致二次开发工作量过大，对程序员能力要求高，且难以标准化；三是无力应对多变的需求。FairyGUI就是在这样的背景下诞生的，历经多年开发和调优，可以说是市面上最好用的专业游戏UI编辑器，而且开源免费！
Unity FairyGUI 自适应扩展-附件资源
03-02
Unity FairyGUI 自适应扩展-附件资源
FairyGUI生成lua代码插件.rar
05-22
FairyGUI生成lua代码插件 导入到FairyGUI编辑器，可以为UI生成lua代码。 Git路径： https://github.com/qufangliu/Plugin_FairyGUI_Lua
FairyGUI基础学习笔记
weixin_36464906的博客
04-09 1316
FairyGUI基础学习笔记前言加载资源到场景中按钮添加点击事件 前言 之前研究了一些Xlua想搞热更新，得需要一套UI框架，公司的那套局限性太强，不得已只能另辟蹊径，之前听朋友说公司是用FairyGUI做开发，于是乎准备搞一个自学笔记，记录一些自学的经验（只针对于代码的笔记，操作太繁杂具体自行找官方文档学习或跳转视频学习链接：http://www.sikiedu.com/my/course/13...
FairyGUI 代码生成插件
小鱼游戏开发的博客
02-21 2472
生成的代码 /** This is an automatically generated class by FairyGUI. Please do not modify it. **/ using FairyGUI; namespace ETModel { [ObjectSystem] public class UI_CanteraComponentAwakeSystem : AwakeSystem<UI_CanteraComponent, GObject> { ...
【Unity】UI界面的热更新技术 FairyGUI的使用流程
天生爱赞美的博客
07-19 1万+
需求环境       通常在项目中我们会使用MVC的方式去构建界面框架，而以往我们也会使用NGUI，UGUI，或者DaikonGUI等等方案去实现界面的搭建。       这些UI方案各有优点，也都适用于我们的工程，但在实际项目中，热更新的逻辑代码意味着游戏界面也需要热更新，如果能有一种界面架构可以实现界面与代码的分离，实现热更新，并且代码逻辑本身也能热更新，那么就再好不过了。       于是，
FairyGUI Unity评估
啊循的专栏
11-09 1万+
FairyGUI是一款UI制作的编辑器，它是一个跨平台的UI编辑器，支持多个开发平台，当然，对我们而言，它支持Unity，还有Egret，Egret和Unity有一点关系，它支持从Unity导入数据。 http://www.fairygui.com/是它的官网，虽然这是一个个人作品，去年才流行起来，但是也有几个商业案例了。 它的跨平台性主要体现在FairyGUI编辑器上，这一点和U
初学FairyGUI，对比NGUI
热门推荐
andyqingliu的博客
01-24 1万+
粗略介绍了FairyGUI的背景与优缺点，介绍了在做界面时NGUI存在的问题
FairyGUI 自定义遮罩
04-04
FairyGUI 是一款强大的 UI 编辑器和 UI 框架，其中的遮罩功能可以让我们在 UI 中实现一些非常有趣的效果。在 FairyGUI 中，我们可以使用自定义图形作为遮罩，这篇文章将会介绍如何实现自定义遮罩。 1. 创建自定义遮罩 首先，在 FairyGUI 编辑器中创建一个 UI 节点，并将其属性中的 Mask Type 设置为 Image，这将使该节点成为一个遮罩层。然后，为该节点添加一个 Image 组件，并将其作为遮罩的图像。 接下来，我们需要编写脚本来指定遮罩的形状。我们可以创建一个自定义脚本，继承自 FairyGUI 的 IMask 接口，并实现其中的一个方法：OnPopulateMesh。在这个方法中，我们需要创建一个 Mesh 对象，并设置其顶点和三角形，以定义遮罩的形状。 下面是一个简单的例子： ```csharp using UnityEngine; using FairyGUI; public class CustomMask : MonoBehaviour, IMask { public void OnPopulateMesh(VertexHelper vertexHelper) { Mesh mesh = new Mesh(); Vector3[] vertices = new Vector3[4]; int[] triangles = new int[6]; float width = 200f; float height = 100f; vertices[0] = new Vector3(0f, 0f); vertices[1] = new Vector3(0f, height); vertices[2] = new Vector3(width, height); vertices[3] = new Vector3(width, 0f); triangles[0] = 0; triangles[1] = 1; triangles[2] = 2; triangles[3] = 0; triangles[4] = 2; triangles[5] = 3; mesh.vertices = vertices; mesh.triangles = triangles; vertexHelper.AddUIVertexStream(new List<UIVertex>(), mesh); } } ``` 在这个例子中，我们创建了一个矩形的遮罩，并将其顶点和三角形添加到了 Mesh 对象中。然后，我们使用 VertexHelper 对象将这个 Mesh 对象传递给遮罩层，以便在 UI 中显示出来。 2. 将自定义脚本添加到遮罩层 在脚本编写完成后，我们需要将其添加到遮罩层中。在 FairyGUI 编辑器中，我们可以选择遮罩层节点，并在属性中的 Mask 中选择 Custom Mask。然后，在 Custom Mask 中选择我们刚才编写的自定义脚本。 3. 测试效果 现在，我们可以在场景中测试我们的自定义遮罩了。我们可以在遮罩层的子节点中添加一些 UI 元素，并在运行时观察遮罩的效果。如果一切正常，我们应该能够看到 UI 元素被遮罩的效果。 总结 FairyGUI 的自定义遮罩功能非常强大，可以让我们在 UI 中实现各种有趣的效果。通过编写自定义脚本，我们可以创建各种形状的遮罩，并将其应用到 UI 中。希望这篇文章能够帮助你理解 FairyGUI 的自定义遮罩功能，以及如何使用它来实现自己的 UI 效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值