蓝图扩展ToolBar

前言

以前写过一篇文章 编辑器扩展:自定义菜单栏

现在发现蓝图也可以在某些功能上代替cpp来扩展工具栏, 这样当然是非常方便的, 谁用Slate谁都一个头两个大

这里来简单尝试一下

录制_2022_07_22_11_16_44_915

使用方式

开始之前先打开编辑器偏好设置里的一个选项, 方便我们观察UI的分类

image-20220722102851012

接着我们需要先给项目加一个配置

在项目Config目录的DefaultEditorPerProjectUserSettings.ini(如果没有就创建一个)中添加如下命令

[/Script/UnrealEd.EditorExperimentalSettings] bEnableEditToolMenusUI=True

这样在windows下拉菜单里会多一个按钮

image-20220722102735392

确认以后我们的编辑器就变成了这个鸟样

image-20220722103033752

点开这些图标可以看到我们的toolbar分类名称

比如我们这个用户自定义的分类叫这个,这里要记一下后面要用

image-20220722103128123

然后创建蓝图对象继承自 EditorUtilityToolMenuEntry

所有的配置都在这里

image-20220722102537845

重点说一下

  • Menu: 这个就是上面看到的分类名称, 这里填写LevelEditor.LevelEditorToolBar.User
  • Section: 每个Menu需要有一个Section, 这个Section就是看到的那种绿色的,这里填写Next
  • Name: 当前按钮的名称, 不会在编辑器下显示, 会在编辑菜单时显示, 如下图image-20220722103504205
  • Label: 同Name
  • ToolTip: 鼠标放到按钮上时的注释
  • Icon
    • StyleSetName: 没啥好说的就是Icon的对应的Style
    • StyleName/SmallStyleName: 样式名称

建议用自己的Style, 可以看之前的文章使用自定义Slate笔刷, 我们这里图省事用了引擎的

随手一找找了个CoreStyle,名字怎么来? 看这里

image-20220722103822219

然后下面随便找一个看着顺眼的

image-20220722103848252

  • InsertPosition: 插入位置, 目前发现代码并没有完全用到这个数据的完整部分, 我们这里用First, 名字无所谓
  • Advanced: 高级功能, 有几个是比较重要的
    • EntryType: 类型, 不能瞎选, 实测我们如果要用一个简单的按钮那么就选ToolBarButton, 有一些规则, 可以去看UToolMenus::PopulateToolBarBuilder()细看
    • UserInterfaceActionType: 一般选Button, 有些类型不适合ToolBar会报错

然后就是运行, 可以右键资源点击RunEditroUtilityWidget运行, 但是这样很麻烦

我们还是在DefaultEditorPerProjectUserSettings.ini中添加编辑器启动自动运行的命令

1
2
[/Script/Blutility.EditorUtilitySubsystem]
StartupObjects=/Game/Next/GamePlay/BluePrint/EditorUtility/EU_ToolBar_1.EU_ToolBar_1

注意是我们资源的名称

然后网上有资料说要创建自定义事件Run来运行, 我心想为啥? 没有对应的重载函数吗?

看了代码, 瞬间石化

image-20220722113215437

可能是为了照顾有些编辑器扩展蓝图自带的Run函数, 那你为什么不给EditorUtilityToolMenuEntry加一个呢?

接下来就比较简单了, 如下图

image-20220722113241615

这个Get是获取ToolMenus的单例,然后调用里面的添加Menu的方法

试过也可以用下图这种展开来的方法

image-20220722111421705

本质上AddMenuEntryObject是把当前这个资源的Data数据构造成Args来调用AddEntry

image-20220722111357777

但是蓝图侧面略有区别, 用后者方法没法自定义Icon….伤脑筋. 这样就不优雅了


好了, 重启编辑器以后按钮就在了, 点击以后会执行Execute方法, 我们执行下图逻辑

image-20220722111542964

打开的是另一个编辑器UMG, 非常方便

录制_2022_07_22_11_16_44_915