CommonUI+Enhanced Input入门经验(真手把手入门)（UE5.6）

Development Programming & Scripting UI
,
1

本人是一名刚刚入门的UE开发，最近在研究学习UMG发现传统的UMG控件在做一些小东西小项目用着还可以，但是一旦涉及到比较大要求比较高需要表现得完美的时候就很容易乱成一片，这种乱不同于蓝图排线导致的“意大利面”，更像是初学PS时排列图层一样让我手忙脚乱，常常会因为子级关系让一个UMG界面内容直接崩盘，在大佬的建议下我试着接触了CommonUI的内容，一开始我是通过官方文档和小破站上的视频结合学习的，结果是官方的文档过于专业，某站上又没有十分完整的入门视频，我看的那个视频三个视频加起来有7小时左右，大都是自己直播的录屏，录得还是自己完全没有提前预习直接生啃YTB上的一个（据小破站博主所说他认为YTB这个博主是第一次录教学视频）视频，两者虽然语言上没有什么障碍（这个博主英语还不错），但我明显的感觉两人沟通上有很大的障碍，一个小时研究出来的内容没有后来我在YTB上找的另一个博主的视频几十分钟讲的清楚明了，这对我的学习造成了绝对的痛苦，是的你没听错是痛苦，我想抓起我厨房的🔪直接把我的耳朵割下来一个邮给他俩，幸亏当时我没回去，这就是国内的学习UE编程的现状，一边要筛选出正常的UE教学视频，一边要提防教育机构广告的入侵，一边还要忍受网络延迟带来的不便，一边还要在学习的过程中保持精神正常。
好了停止口嗨，首先我要先说明介绍一下我学习资源的出处，是来自YTB的Mr.Butier发布的视频

具体网址是http://youtu.be/y0pbeMd8DxQ?si=leFfxY277qJz5L26

他还有自己的Discord服务器可以直接在里面找到他，我就是通过这个联系上他的，评论他也会常看（凌晨一点还在回复我所以真的是个很棒的博主）具体的你们去他的YTB介绍页看吧，毕竟他的视频对我学习入门CommonUI起到十分关键的帮助，下面我会根据他的视频来实现一个基础的Enhanced Input+CommonUI套餐
使用5.6的原因是博主使用的应该是5.3版本，当时对于CommonUI还存在一下bug，视频中也是有解决方案但是我在使用5.6版本的时候这些bug已经修改了，有些已知的bug我在下面会提出来你们可以借鉴避免一下

2

  1. 插件界面打开CommonUI Plugin，打开后立刻重启因为后续有些设置需要开启插件后才会出现

  2. 项目设置(Project Setting)→游戏(Game)→通用输入设置(Common Input Setting)→输入(Input)：
    输入数据(Input Data)点击+或者直接在内容浏览器中新建蓝图，类选择CommonUIInputData，命名为InputData
    允许视角设备输入[√](Allow out of Focus Device Input)

    启用增强输入支持[√](Enable Enhanced Input Support)

  3. 项目设置(Project Setting)→引擎(Engine)→一般设置(GeneralSetting)→默认类(Default Classes)→游戏视口客户端类：
    GameViewportClient更改为CommonGameViewportClient(如果你在更改时发现没有说明你开启插件后没有重启，重启插件和编辑器试试）

  4. 回到2中的通用输入设置(Common Input Setting)→平台输入(Playfrom Input)→Windows→默认(Default)→控制器数据(Controller Data)同样点击+或在内容浏览器中新建蓝图，类选择CommonInputBaseControllerData，命名为BP_CommonInputBaseController_Keyboard

  5. 打开BP_CommonInputBaseController_Keyboard，在输入笔刷数据图(Input Brush Data Map)中设置你想用的按键，以及在笔刷处设置按键的UI图标，这对后面按键的显示很重要所以不要落下
    (如果你想同时测试手柄重复第4步和第5步，设置你想要的手柄按键并在项目设置中添加进控制器数据中)

  6. 新建数个输入操作(InputAction)将上面设置好的每个按键设置一个新的输入操作，默认前缀为IA_

  7. 重启编辑器，为了下一步创建数据资产(Data Asset)可以正常显示一定要重启，不然会出现bug

  8. 重启后在内容浏览器中新建数据资产(Data Asset)，选项位置在其它→数据资产，类选择通用映射上下文元数据(CommonMappingContextMetaData)，命名为DA_GenericCUI

3

前面的是一些很普通的基本设置我就没有配合图片，根据我的描述就算是英文编辑器的应该也很容易设置出来，后面的就会涉及到相对多的编辑，所以每一步我都会配合截图来进行编辑

4

9.在数据资产中，将增强输入元数据(Enhanced Input Metadata)设置为通用输入元数据(Common InputMetaData)，是否泛型输入操作[√]Is Generic Input Action
(附数据资产细节)

image
image2084×1457 185 KB

5

10.将数据资产添加至输入操作中的元数据中，并要注意将输入操作的操作描述，名称，显示名称都要设置好，后面的操作会有需要，将输入操作中的玩家可映射键设置设置为玩家可映射键设置，图为IA_UI_Accept细节设置

image
image1996×1050 95.9 KB

6

11.新建输入映射情境，将所有输入操作添加至输入映射情境中，如果想测试手柄也可同时将手柄输入添加进去，图为输入映射情境细节

image
image2090×1146 119 KB

7

12.项目设置→引擎→增强输入→默认映射上下文+→添加输入映射情境至输入映射上下文中

image
image2287×507 37.6 KB

8

13.在内容浏览器中创建Common Activable Widget(通用可激活控件)类蓝图，命名为UI_Main并打开，在细节面板中绑定输入映射情境

9

14.项目设置→编辑器(Editor)→控件设计器（队伍）(Widget Designer(Team))→设计器(Designer)→
使用空间模板选择器[√](Use Widget Templats Selector)
通用根控件类(Common Root Widget Classes)
索引0：CanvasPanel
索引1：Overlay
索引2：HorizontalBox
最常用控件父类(Favorite Widget Parent Classes)
索引0：CommonUserWidget
索引1：CommonActivatableWidget

image
image1810×1244 153 KB

10

15.项目设置(Project Setting)→插件(Plugins)→通用UI编辑器(CommonUI Editor)，分别在模板文本样式(Template Text Style)，模板按钮样式(Template Button Style)，模板边界样式(Template Border Style)后+创建三个蓝图：TS_Base，BS_Base，BorderStyle_Base。图为通用UI编辑器细节设置

image
image1758×435 19.4 KB

11

16.TS_Base，字体设置为系统默认字体，尺寸为40，BS_Base中，按钮填充为5，文本样式均为TS_Base，设置发现和已选择的各颜色值，BorderStyle_Base中设置颜色值。图为BS_Base细节设置

image
image2249×1341 120 KB

12

17.在人物蓝图/关卡蓝图中添加以下节点(本人使用的是官方的第三人称人物模板，直接将蓝图逻辑写在了人物蓝图中了，也可以直接写在关卡蓝图中，写在人物蓝图中还有一步新建gamemode将玩家pawn类更改为添加了逻辑的那个蓝图，方式根据实际情况选择)

image
image2088×828 108 KB

13

18.创建控件蓝图，类选择CommonBoundActionButton，根控件选择Overlay(覆层)，命名为UI_ActionBase,添加CommonText，CommonActionWidget，分别命名为InputActionWidget，Text_ActionName，并设置为变量。图为控件层级关系

image
image572×119 9.71 KB

14

19.将上一步中的控件蓝图中层级中的[UI_ActionBase]细节面板中的样式改为BS_Base，此时在层级中选中InputActionWidget后，可以在细节面板中设计时键(Design Time Key)更改为前面设置过的按钮，在面板窗口就会出现你设置好的按钮图片，如果没出现可能是因为前面没有绑定成功会这是因为BUG，这个BUG我也遇到了，修复方法是回到第4步中控制器数据全部删除，重启编辑器后再重新添加，回来在尝试就会出现了，图为设置好后利用回车键测试效果

image
image2285×1901 161 KB

15

20.在细节面板中设置UI_ActionBase的最小宽度为300，最小高度为100，勾选在操作栏中显示(Display in Action Bar)