UE5 CommonUI初学笔记

跟着油管的一个直播视频学习入门的（https://www.youtube.com/watch?v=TTB5y-03SnE&t=7903shttps://www.youtube.com/watch?v=TTB5y-03SnE&t=7903s），但是由于是直播所以有些混乱并且有些许错误。在这里修正一下错误并记下笔记以供以后查阅。

在看完教学后，觉得CommonUI的优势主要是跨平台开发，以及统一样式，自动激活，堆栈等功能。

Demo展示：

录制_2023_02_20_20_49_37_600

主要功能为：

1.鼠标放到以及点击按钮改变样式；

2.Quit Game按钮的Click触发事件；

实现步骤

要使用CommonUI，首先在Edit->Plugins中启用CommonUI插件，然后重启编辑器。

接着在Projectsetting->Engine->General setting中，修改如图蓝色框中内容

下面进行输入数据表的创建以及输入操作的绑定和默认brush的设置

在创建DataTable的时候选择CommonInputActionDataBase模板

点击Add即可添加新的输入数据，数据表的基础知识就不在这里讲了。主要要操作的是设置自己的RowName，DisplayName，以及KeyboardInputTypeInfo（如果要用手柄，Gamepad的也得写）。

然后，创建蓝图类，继承自CommonUIInputData类，覆写原有的确认和回退功能。选择自己创建的数据表和确认回退操作。

创建蓝图类，继承自CommonInputBaseControllerData类，主要用于如果要在界面上显示输入操作，默认的brush和大小。

 在InputBrushDataMap中新添你之前添加在数据表里的操作，然后选择相应映射以及brush（图片），和颜色大小等。

之后，在Projectsetting找到CommonUIInputSettings，把InputData换成之前继承自CommonUIInputData类的蓝图。在Windows下（其他系统没试过），添加ControllerData，然后把继承自CommonInputBaseControllerData累的蓝图填入，如果有Gamepad也把相应的填入。输入数据部分大概就这些了。

下面进行统一默认样式的设计

CommonUI能够自定义四种统一默认样式，所谓统一默认样式就是当你创建这个Widget的时候，默认的样式，在需要大量一样样式UI的时候很好用，这里只使用了三种类，分别创建Border，Button，Text的Common（名字）Syle的蓝图类。

以Button为例，可以修改Button的各种样式参数，与普通UI的Button参数基本一致，按照自己的喜好修改就行了。

然后，打开ProjectSetting，找到CommonUIEditor，将创建的三个蓝图类对应填入即可应用。之后再创建CommonBorder，CommonText的时候，默认样式就是你设定的了。要注意，Button并不适用，还需要自己创建新的一个Button类。

创建CommonButtonBase类，然后再右边的Style选择你创建的Buttonstyle，之后要在Widget中添加按钮就添加这个创建的类就行了。

至此，准备工作做完了，开始Demo UI的创建。

时间原因就不一一复现了详细的可以看油管的视频，主要是想体现一下CommonUI的activate和stack的作用。

首先，第一步，也就是油管视频里做错的一步，创建继承CommonUserWidget类的蓝图。然后放入Overlay以及两个CommonActivatableWidgetStack，分别命名为MenuStack和PromptStack。

然后创建两个自定义事件用于将Widget入栈，其中PushPrompt的输入可以不急着加，这是后面才用到的，本文章不涉及。之后，可以在玩家控制器或者什么其他地方创建UI_Base这个Widget，然后再调用Push事件，填入想要Push的Class，就可以了。使用Stack的好处是，当你有多个窗口，比如一个主菜单，然后点击Options会跳到另一个窗口，如果他们都在同一个Stack，比如MenuStack，这样主菜单就会自动消失，显示Option窗口，很方便。这是CommonUI Stack的好处。

之后是CommonActivatableWidget的优点，就是可以自动判断Widget是否激活，然后再激活的时候执行事件，这里激活后执行的是设置focus。

最后讲一下之前设置的按键映射如何使用。

以QuitGame为例，在加入你创建的CommonButton后，在Input栏中找到，TriggeringInputAction,然后选择自己的DataTable，以及你想绑定的操作。然后再Graph中创建按键的Click的回调事件。

这样就好啦！

还是CommonUI初学者，如有错误希望能指出，恳请批评指正。