跟着油管的一个直播视频学习入门的（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初学者，如有错误希望能指出，恳请批评指正。

UE5 CommonUI初学笔记相关推荐

python窗体设计插件_Python 界面生成器 wxFormBuilder 的入门使用（wxPython的界面设计工具的初学笔记）...
环境,Win10,python3.7.3,wxPython 4.0.4,wxFormBuilder 3.9 1.准备一个窗体. 点击wxformbuilder上方的标签"forms" ...
Lucene.Net 初学笔记 - 索引
上次随笔写的Lucene.Net 初学笔记 - 介绍,有许多前辈让我知道了Lucene.Net已经不再更新,最后的版本写到2.9.2,不过只更新在svn上.我上次下载是官方正式发布的版本,只有2.0. ...
0起步的摄影初学笔记
摄影初学笔记双镜头反光相机单镜头反光相机(单反) 光圈类似瞳孔大小景深成像范围小光圈大景深大光圈小景深 Av模式:光圈有限模式自己决定光圈大小左手动镜头调光圈右手相机调光圈光圈 ...
GAMMA初学笔记三
GAMMA初学笔记三简单记录下学习过程,以防后面自己忘记,如果有问题,欢迎大家交流留言. 一.语法记录 1.查看影像经纬度范围 SLC_corners 20190424.mli.par 2.拼接哨兵 ...
cocoscreator初学笔记001
cocoscrestor初学笔记由于工作原因需要学习cocoscreator基础进行简单的游戏制作,也因为时间原因,之前自学的unity3d也放置了许久,等有空了才能填之前unity3d学习的坑了. ...
Python初学笔记（第一学期学完c后和栗子一起学python)
Python初学笔记一.基本数据类型 1.整数 2.浮点数 3.字符串 4.布尔值(即"对"与"错"): 5.空值二.变量的定义 1.变量名 2.变量的定义 ...
ASP.NET MVC 初学笔记.3 MVC5、EF、RDLC实现报表操作
在ASP.NET的研究学习中又要用到报表,比如在OA系统里实现凭证.文件等,报表是一个必不可少的东西,但百度了一圈,发现讲得最多的还是水晶报表等第三方报表,好像微软原装的RDLC报表随着MVC的升级渐 ...
CMake初学笔记（一）
CMake初学笔记(一) CMake是什么 CMake怎么实现跨平台 CMake具体实践过程 CMakeLists.txt编写快速入门常见函数例子 CMake是什么跨平台编译工具,为了实现&qu ...
Altium Designer 初学笔记
Altium Designer 初学笔记–从零开始发厂打印新手初学AD,此博客作为初学笔记,供日后复习及分享学习经验使用.如有不足,恳请指正. 软件:Altium Designer20 一.新建工程 ...

UE5 CommonUI初学笔记