UE4/5 添加3DUI界面 UMG设计

已于 2024-05-07 19:21:03 修改
阅读量4k 收藏 27
点赞数 12
分类专栏： UE 进阶必看教学系列 文章标签： ue4 ui
于 2024-05-07 09:53:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/shanlinhan/article/details/138500589
版权

目录

一、创建用户控件

二、创建Actor蓝图并添加控件组件

三、设置控件组件的参数，使其可交互

在虚幻引擎的场景设计中，我们可能想在某个物体平面或屏幕模型上添加可以点击交互的UI界面，但是一般的UI界面，我们都是通过"Add to view port"节点，将相应的UI控件添加到视口中。

那么如何添加3DUI界面呢？接下来我们就通过几步简单的操作，来将UI界面添加到我们的世界场景中，实现3DUI且可交互的效果：

一、创建用户控件

（关于快速入门UE UI界面设计的内容，可以看我的另一个专栏）

点击内容菜单的空白处，点击 用户界面-控件蓝图
 

随后为该控件蓝图类选择父类，一般情况下选择“用户控件”即可。

最低0.47元/天 解锁文章
Unreal5从入门到精通之如何在VR中使用3DUI
TxNet
10-30 1206
前面我们讲过《Unreal5从入门到精通之UMG的使用》一般制作游戏时，UI都是添加到屏幕视窗上面的，但是在制作VR时，我们往往需要制作一个3D的UI，放置在场景中，然后使用手柄的射线来和UI进行交互。今天我们就来讲解下，如何在VR中创作和交互3DUI首次操作会感觉好复杂，多多练习，当你熟悉了UE蓝图的操作后会发现，这只是一个常规的蓝图操作而已。祝大家在虚幻的学习过程中非常顺利。希望这篇博客对你有所帮助。
虚幻4学习笔记（13）用户UI 交互动画、制作2D UI、制作3D UI
行者
09-24 1609
B站UP谌嘉诚课程：https://www.bilibili.com/video/BV164411Y732。
UE4_UE5制作3DUI-跟随相机朝向（附工程）
蒙双眼看世界
06-20 5698
UE4_UE5制作3DUI流程（附工程）一、创建Widget控件类：命名为3DUI二、创建UI内容：三、创建Actor类来承接显示UI 命名为：BP_My3DUI四、编辑BP_My3DUI类，添加Widget组件 在右侧Details添加Widget五、将编辑好的类都Compile通过，然后将BP_My3DUI类拖放到场景中发现UI位置太高，修整一下：给它添加个Panel用于调整位置位置调好了，但是没有面向相机。六、设置UI跟随相机转动，为了简单，直接在关卡蓝图里写这些蓝图脚本：先设置显示鼠标指针：接着将
UE5 UI跟随物体 UI跟随鼠标
最新发布
吴梓穆的博客
04-03 363
在事件图表里添加如下，创建一个UI控件，并赋值到控件组件。创建一个控件A，添加一个Image和一个Text。通过调整绘制大小来调整UI的大小。
UE4使用UMG制作简单开始界面(超级详细)
qq_46570692的博客
10-20 1万+
UE4使用UMG制作简单开始界面 首先，使用UMG制作简单开始界面需要先创建一个控件蓝图和一个空白关卡 双击进入控件蓝图 在左侧控制板中搜索控制板image 将其拖动到右侧画布面板中 通过右侧的画布面板槽将图像调整为所需的大小(这里为了全屏笔者使用了1920*1080) 在图像细节中打开外观->笔刷->图像，即可将自己所需的图片导入 接着在左侧控制板中搜索按钮(button)，同样将其拖动到画布面板中 ，并调整至合适大小 同样，与导入图片相同，我们可以在外观->样式-&gt
UE5 在UI中显示3D网格体
qq_52825422的博客
08-08 751
，混合模式为“半透明”，然后在材质图表中添加如下节点。在需要显示的3D网格体中添加一个场景捕获组件2D组件。选中场景捕获组件，设置纹理（渲染目标）添加一个渲染目标（用于显示3D网格体。在UI中添加图片，并设置图片为材质。调整场景捕获组件2D组件摄像机位置。
UE4 3DUI显示与交互案例
ChaoChao66666的博客
07-29 4105
将变量是否能够全自动拖入事件图表中，再将是否能够全自动引脚拖入自定义事件，这样就可以把变量通过自定义事件传出去来设置。勾选以函数名设置定时器循环，表示每0.1s执行一次，然后全自动射击事件连上单发的逻辑，这样就达到连发的效果。首先添加一个在可聚焦控件上方的节点，来判断此时是否可以和UI进行互动。添加两个节点，来判断当前是否能够全自动，如果不能就继续执行刚才的逻辑。1.打开一个第一人称游戏模板，创建控件蓝图，命名为全自动_UMG。首先在第一人称的蓝图中添加一个自定义事件，命名为是否全自动。...
ue4之UMG
果果的博客
03-12 7912
UMG：虚幻运动图形 什么是umg？ 虚幻中的UMG就是虚幻运动图形的简称。 再上图中就是血量、能量、弹药量的这些显示信息等等一些关于UI的东西，叫做UMG。 umg可以干嘛？ 1.显示一些提示信息，比如上面的弹药量，当我们的子弹打光了，我们可能没想到是因为没有弹药了，不能发射子弹了，但是看到上面的提示就可以清楚的知道，哦，是没有弹药了。要赶紧补充弹药了，其次Widget这个组件是可以运行的。 2.使用这个UI处理一些自动化的东西，比如批量旋转物体，批量替换材质球，注意运行此Widget是不
ue4添加用户界面、UI
m0_51808323的博客
12-26 3533
添加的是一些静态的，不会动的，固定的写在人物角色里面的。下一篇就是绑定人物的，就是变量了。 要在视口上显示UI还需要添加视口蓝图（关卡蓝图） 但是切换到另一个地图之后就会消失了，连人物都消失了。第一个原因是因为这个是放在关卡蓝图之内，所以只在那个关卡中管用，换一个关卡就不管用了，解决方法就是放在人物的蓝图里面，这样就会跟随人移动。第二个的原因是因为没有使用游戏模式，需要创建一个游戏模式，然后把这个角色放进去，然后两个地图同时都使用这个游戏模式，这样载入的时候人物UI就都一样了。 .
[UE4笔记] 3DUI空间交互
weixin_44052668的博客
08-05 1176
在Actor中使用widget的时候制作3DUI，如果直接选择World模式 鼠标和UI是无法产生交互的，只要勾选了红框里的选项 就可以正常交互了(老是忘记，所以写个笔记记录一下)。输入控制台命令showflagcollision 1 查看你的Widget的碰撞 并确认你是否点击到了你的widget。***注意：***如果你还是点击不到。
UE4界面设置
nicolelili1的专栏
01-09 1万+
1、 2、 3、window-->选择所需要的窗口 4、界面被改变了 鼠标按住标题栏开始拖动， 鼠标进入左边的区域，就会靠到左边 5、重置界面, window-->Reset Layout 会导致整个界面重启 界面恢复后的样子
UE4_UE5制作3DUI并朝向相机
06-20
本项目是UE5的工程，使用UE5打开 制作3DUI的简单Demo 工程文章地址： https://blog.youkuaiyun.com/Highning0007/article/details/125284705
36_ue4[UI]05_3DUI显示与展示
zhang2362167998的博客
07-11 1922
UI切换枪模式
UE4 3DUI及曲面UI实现浅析和拓展
t1370620378的博客
02-09 4090
最近在工作中遇见了游戏场景内3Dui和曲面ui的需求，大致看了下ue4 4.27的实现方式，简单来说就是将widget渲染到一个RT上，然后将RT赋给一个动态材质，在场景代理中动态构建一个mesh并使用这个动态材质。 看看实现，首先在beginplay或者component onregister时初始化窗口，这里就用的创建2dui的方式。 void UWidgetComponent::InitWidget() { // Don't do any work if Slate is no...
ue4材质插槽_UE4入门之路（UI篇）：UMG系统介绍
weixin_31238185的博客
02-04 2810
一、关于UE42017年，多款基于虚幻引擎4（简称UE4）开发的游戏开始崭露头角，如果将2017年比作虚幻引擎爆发的元年，那么2018年则是虚幻引擎以及Epic Games再创新高，实现自我超越的一年。2018年7月UE4的开发者人数突破630万，中国的使用者仅次于美国，位居世界第二。2017年11月至2018年7月短短不到9个月间，UE4用户数自400万增至630万，足足成长了60%。在2018...
Unreal从入门到精通之如何绘制用于VR的3DUI交互的手柄射线
TxNet
11-22 1015
之前我写过一篇文章《Unreal5从入门到精通之如何在VR中使用3DUI》，其中讲到使用WidgetComponent和3DUI进行交互。然而，这种方法存在一个问题：为了让射线可视化，我们需要勾选“调试/显示调试”，这样才能在手柄上看到代表其指向的一条红色射线。但最关键的问题是，这个显示调试信息的功能只属于Debug调试模式，也就是说，一旦将项目正式打包发布，这条射线辅助线就没有了。如下图所示：我就觉得Unreal官方真的是有点过分了，这不应该是最基本的功能么？难道我们VR要在Debug模式下发布？
UE4 蓝图教程(四) UI
热门推荐
先锋小牛
03-18 1万+
简述在游戏中，开发人员使用图像和文字向玩家显示游戏信息，如血量或得分。这就是所说的用户界面(UI)。在虚幻引擎4中你可以用Unreal Motion Graphics(UMG)创建UI。UMG允许您通过拖拽UI元素，例如拖拽按钮和文本标签快捷的构建UI。在本教程中，您将学习如何:1，创建显示信息标签(HUD)，显示计数和时间。2，显示HUD3，更新数和时间并显示到界面注意，本教程中将会使用蓝图。如...
【虚幻引擎】UE4初学者系列教程实战篇——Ureal UMG基础与实例
qq_45206556的博客
06-15 5224
现在对画面来进行运行会发现，显示的屏幕大小并不是我们想要的，那么现在再对于屏幕来进行调试。，即用于构成界面的一系列预先制作的功能（比如按钮、复选框、滑块、进度条等）。是一款视觉UI创作工具。可用于创作想要呈现给用户的UI元素。如果想要夜晚的感觉可以在着色上面添加紫色的色调。添加到画面中，修改名字为Background。先将屏幕显示单独显示在新窗口中。写一个蓝图让ui显示在屏幕上。按住ctrl和这个锚点，则实现使用控件时提供的。将锚点范围进行调整，
02_ue4界面介绍
zhang2362167998的博客
06-20 1348
虚幻引擎4.24介绍
ue 3dui输入框
12-27
### 使用 Unreal Engine 实现 3D UI 输入框 在 Unreal Engine 中创建和管理 3D 用户界面 (UI) 是一项复杂但强大的功能。对于希望在游戏中集成交互式 3D UI 的开发者来说，理解如何实现这些组件至关重要。 #### 创建基础的 3D UI 结构 为了构建一个基本的 3D UI 输入框，在场景中放置 `Widget Interaction` 组件来处理玩家与 UI 元素之间的互动[^1]： ```cpp // C++ 示例：设置 WidgetInteractionComponent 并绑定事件 void AMyPlayerController::SetupInputComponent() { Super::SetupInputComponent(); UWidgetInteractionComponent* MyWidgetInteractionComp = NewObject<UWidgetInteractionComponent>(this); MyWidgetInteractionComp->RegisterComponent(); // Bind events here... } ``` #### 设计可交互的输入控件 通过蓝图或代码定义自定义的小部件类（继承于 `UserWidget`），该类包含用于显示文本并允许用户输入文字的功能。利用 `EditableTextBox` 或者更高级别的 `UMG` 控件作为起点[^4]: ```blueprint // Blueprint Node Graph Example: // Add Event On Text Changed -> Your Logic Here // Connect to Input Action via Widget Interaction Component ``` #### 处理键盘焦点及输入逻辑 确保当鼠标悬停或点击特定区域时能够获取到正确的输入焦点，并且可以通过调用相应的函数更新内部状态以及视觉反馈给用户知道当前处于编辑模式下: ```cpp // C++ 示例：切换 Editable TextBox 是否获得焦点 void ToggleFocusOnEditableText(UEditableTextBox* TargetBox) { if (!TargetBox || !IsValid(TargetBox)) return; bIsFocused = !bIsFocused; TargetBox->SetKeyboardFocus(bIsFocused ? EMouseCursor::TextEdit : EMouseCursor::Default); } ``` #### 集成触摸屏支持（针对移动平台） 考虑到不同设备间的差异性，特别是触控屏幕上的操作体验优化非常重要。借助引擎内置的手势识别机制或是第三方插件扩展能力，使得基于手势的操作更加流畅自然[^2].
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿木呀

创作不易，感谢鼓励，嘻嘻☺

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值