FairyGUIエディタカスタムメニュー拡張プラグイン

この記事に関係するソフトウェアは次のとおりです: FairyGUI、VSCode

コード環境には次のものが含まれます。 Lua

VSCode プラグイン: EmmyLua

FairyGUI エディターのメニューを作成する前に、FairyGUIEditor の API を理解すると、多くの問題を効果的に解決できます。FairyGUIの拡張機能はエディタ付属のプラグイン機能で実装されており、プラグインではlua環境テンプレートを使用しています。エディターの LuaAPI をインポートします。このファイルは、FairyGUI-Editor ソース コードのプラグイン ディレクトリにあります。次に、対応するAPI関数を関数別に説明します。

プラグインの場所

 プラグインパネルが見つからない場合は、「表示 → プラグイン」または「ツール → プラグイン」から追加できます。

1. プラグインディレクトリを開きます プラグインディレクトリは「プロジェクトディレクトリ/plugins」フォルダの下にあり、各プラグインはサブフォルダに対応しています。

2. 新しいプラグインを作成する

3. プラグインリストを更新する

新しいプラグインの誕生

クリックすると、新しいプラグインを作成し、プラグイン テンプレートに記述するプラグインの種類と言語形式を選択できます。

「作成」をクリックすると、作成したばかりの新しいプラグインがプラグインのリストに表示されます。

このとき、プラグインディレクトリをクリックして開くと、もともと空だったプラグインディレクトリに新しくプラグインフォルダが作成されていることがわかりますので、右クリックしてVSCodeで開きます。

ディレクトリ内に「main.lua」と「package.json」という 2 つのファイルがあることがわかります。このうち、main.lua はプラグインのエントリスクリプト、package.json はプラグインの設定ファイルです。

main.lua をダブルクリックすると、「onDestroy」メソッドが表示され、ここに後続のクリーンアップ コードを追加できます。作成したコードを保存し、クリックしてエディターのプラグイン リストを更新すると、最新のプラグイン コードがエディターに同期されます。この時点でエディターが保存した場合、コード記述エラーでなければ、エディターを再起動することでプラグインを更新できます。

 編集者個人共通API

App はプロジェクト エントリ クラスで、「CS.FairyEditor.App」と入力します。エディターの関数フィールドは、LuaAPI の CS_FairyEditor_App を通じて表示できます。使用されるフィールドとメソッドを以下に示します。

CS.フェアリーエディター.アプリ
フィールド名	タイプ	効果
プロジェクト	CS.FairyEditor.FProject	現在のプロジェクトの構成とリソースを記録します。
libView	CS.FairyEditor.View.LibraryView	エディターのライブラリパネル
インスペクタビュー	CS.FairyEditor.View.InspectorView	エディターのインスペクターパネル
コンソールビュー	CS.FairyEditor.View.ConsoleView	エディターのコンソールパネル
メニュー	CS.FairyEditor.Component.IMenu	エディターのメニューバー
プラグインマネージャー	CS.FairyEditor.PluginManager	プラグイン管理

CS.FairyEditor.FProject
フィールド名	タイプ	効果
名前	弦	プロジェクト名「例：FGUIProject」
ベースパス	弦	プロジェクトのパス「D:\Documents\FGUIProject など」
アセットパス	弦	プロジェクトのパス「D:\Documents\FGUIProject\assets など」
すべてのパッケージ	CS.FairyEditor.Fpackage[]	プロジェクト内のすべてのパッケージ
すべての支店	弦[]	プロジェクト内のすべてのブランチ

CS.FairyEditor.Fpackage
フィールド名	タイプ	効果
名前	弦	現在のパッケージの名前
アイテム	CS.FairyEditor.FPackageItem[]	現在のパッケージ内のリソース

CS.FairyEditor.FPackageItem
フィールド名	タイプ	効果
パス	弦	リソースパス
名前	弦	リソース名

CS.FairyEditor.View.LibraryView
フィールド名	タイプ	効果
コンテキストメニュー	CS.FairyEditor.Component.NPopupMenu	リソース ライブラリの右クリック メニュー

CS.FairyEditor.Component.NPopupMenu
メソッド名	パラメータ	効果
アイテムの追加	キャプション:文字列、名前:文字列、selectCallback:(fun():void)	メニュー項目を追加し、選択したコールバック イベントを設定します
セパレータの追加		メニュー区切り線を追加する
SetItemGrayed	文字列名、ブール値グレー表示	設定したターゲットをクリックできません
onポップアップ	CS.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: 現在のコンポーネントの必須パスの抽出を容易にするために、リソース ライブラリの右クリック メニューに「コンポーネント スクリプト パスのコピー」を追加します。条件が満たされない場合、「コンポーネント スクリプト パスのコピー」メニュー項目はグレー表示され、使用できなくなります。

前提条件: すべての非 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)

---在弹出的菜单中检测当前选择的资源是否满足条件
libcontextMenu.onPopup:Add(function()
    ---@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)

その後、onDestroy メソッドのメニュー項目「XiaoCopyAssetPath」を忘れずに削除してください。

toolMenu:RemoveItem("XiaoCopyAssetPath")

 

完全なプラグイン コード

---@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)

---在弹出的菜单中检测当前选择的资源是否满足条件
libcontextMenu.onPopup:Add(function()
    ---@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)


function onDestroy()
-------do cleanup here-------
    toolMenu:RemoveItem("XiaoExportUIType")
    toolMenu:RemoveItem("XiaoCopyAssetPath")
end

現在はこの2種類のメニュー操作のみですが、実際の操作で他にもメニュー操作があれば随時更新していきます！