UE5 CommonUI初学笔记

这篇具有很好参考价值的文章主要介绍了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中,修改如图蓝色框中内容

UE5 CommonUI初学笔记,ue5,ui

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

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

UE5 CommonUI初学笔记,ue5,ui

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

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

UE5 CommonUI初学笔记,ue5,ui

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

UE5 CommonUI初学笔记,ue5,ui

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

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

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

UE5 CommonUI初学笔记,ue5,ui

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

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

UE5 CommonUI初学笔记,ue5,ui

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

UE5 CommonUI初学笔记,ue5,ui

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

UE5 CommonUI初学笔记,ue5,ui

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

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

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

UE5 CommonUI初学笔记,ue5,ui

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

UE5 CommonUI初学笔记,ue5,ui

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

UE5 CommonUI初学笔记,ue5,ui

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

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

UE5 CommonUI初学笔记,ue5,ui

UE5 CommonUI初学笔记,ue5,ui

这样就好啦!

还是CommonUI初学者,如有错误希望能指出,恳请批评指正。文章来源地址https://www.toymoban.com/news/detail-720777.html

到了这里,关于UE5 CommonUI初学笔记的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【UE】UE5 学习笔记

    快捷键 快捷键 描述 F 定位关一卡对象:双击游戏对象名字或选游戏对象名字 鼠标中键 移动视野 alt+鼠标左键移 旋转视野 滑动鼠标滚轮 缩放视野 alt+鼠标右键拖动鼠标 缩放视野 鼠标左键移动鼠标 前后漫游 WASD+鼠标右键 自由漫游 漫游时滑动鼠标滚轮 调节漫游速度 选中要克隆

    2023年04月14日
    浏览(51)
  • 【UE5 Mass AI】UE5技术演示视频中的MassAI笔记

    在虚幻引擎中,Mass Framework是面向数据的一种框架设计,而MassAI则是一个具体的用例。 Mass Framework可以分为三部分:MassEntity,MassGameplay,MassAI。 1. Mass Entity MassEntity是一种面向数据的框架,该框架有两部分,一为片段(Fragment),非常小的数据结构,会连续的储存在内存中;另为

    2023年04月17日
    浏览(47)
  • 8. UE5 RPG创建UI(上)

    UI是显示角色的一部分属性玩家可以直接查看的界面,通过直观的形式在屏幕上显示角色的各种信息。如何使用一种可扩展,可维护的形式来制作,这不得不说到耳熟能详的MVC架构。 MVC(Model-View-Controller)是一种常见的软件架构模式,用于组织和设计应用程序。它将应用程序

    2024年01月24日
    浏览(46)
  • 9. UE5 RPG创建UI(下)

    在上一篇文章里,制作了显示血量和蓝量的ui,并且还将ui和获取数据使用的控制器层创建出来并初始化成功。现在只有主用户控件上面被添加了控制器层,还未给每个用户控件赋予控制器层。接下来要实现对属性的广播功能,在属性值变化的时候,能够在蓝图中获取到数值的

    2024年01月24日
    浏览(46)
  • UE5基础2-UI简介(UMG)-a.创建和显示UI

            1.在内容浏览器中,点击  新增(Add New)  按钮,在  用户界面  下,选择  控件蓝图                  2.将控件蓝图命名为  SampleUI  ,然后双击打开,打开蓝图时,将显示UMG编辑器界面。 3.右上角切换页面按钮 4.先左键拖进来一个画布面板 鼠标移动到右下角

    2024年01月19日
    浏览(44)
  • UE4,UE5虚幻引擎,怎么在蓝图中获取FPS帧速率,显示在UMG(UI)上

    前言:在UE中可以使用命令行比如stat fps显示帧率,但只是显示在界面,假设我们要在蓝图中获取FPS帧率,并且显示在我们创建的UMG控件蓝图。这种stat fps命令行的形式就不行了,因为它只会固定显示在右上角的位置。 1、在Tick中获取DeltaSeconds,用1除InDeltaTime,得到帧速率。

    2024年02月11日
    浏览(56)
  • UE5 虚幻引擎中UI、HUD和UMG的区别与联系

    🙋‍♂️ 作者:海码007 📜 专栏:UE虚幻引擎专栏 💥 标题:UE5 虚幻引擎中UI、HUD和UMG的区别与联系 ❣️ 寄语:加油,一次专注一件事! 🎈 最后: 文章作者技术和水平有限,如果文中出现错误,希望大家能指正,同时有问题的话,欢迎大家留言讨论。 💥在学习虚幻引擎

    2024年01月20日
    浏览(42)
  • UE5.2 LyraDemo源码阅读笔记(五)输入系统

    Lyra里使用了增强输入系统,首先知道增强输入系统里的三个类型配置。 一、Input Actions (IA): 输入操作带来的变量,与玩家的输入组件绑定,回调里驱动玩家行为。 二、InputMappingContext(IMC): 表示一套按键输入配置,让按键与IA绑定,从而使用按键携带的变量驱动IA生效。

    2024年02月12日
    浏览(33)
  • UE5内置浏览器插件WebUI简易使用笔记

    之前的项目中为了提高效率,避免使用UE功能不完善的UMG系统,使用了WebUI插件,在UI中内嵌浏览器来展示网页。用Vue框架配合插件制作网页还是比UMG要快很多的,毕竟UE的UI制作插件比较少。 首先在UMG中创建一个新UI,拉一个新的面板,然后在里面加一个WebInterface组件。 之后

    2024年02月04日
    浏览(49)
  • UE5 C++学习笔记 常用宏的再次理解

    1.随意创建一个类,他都有UCLASS()。GENERATED_BODY()这样的默认的宏。 UCLASS() 告知虚幻引擎生成类的反射数据。类必须派生自UObject. (告诉引擎我是从远古大帝UObject中,继承而来,我们是一家人,只是我进化了其他功能) GENERATED_BODY()表示我们不直接使用父类的构造函数,如果我

    2024年01月20日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包