IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 游戏开发 -> UE4 UI记录 -> 正文阅读

[游戏开发]UE4 UI记录

参考文章:https://www.bilibili.com/video/BV1Wr4y117fh
参考文章:https://www.bilibili.com/video/BV1XJ411q7JP
参考文章:https://www.aigei.com/item/01_06_dong_tai.html
参考文章:https://www.233tw.com/unreal/5574
参考文章:https://docs.unrealengine.com/4.27/zh-CN/InteractiveExperiences/UMG/HowTo/
渐变文档地址:https://docs.unrealengine.com/4.27/zh-CN/RenderingAndGraphics/Materials/Functions/Reference/Gradient/
引擎:4.26

环形耐力条

目标是创建一个环形耐力条,所以先创建一个圆形的变化材质。
在这里插入图片描述
添加【SphereMask】,【texturecoordinate】
在这里插入图片描述
在这里插入图片描述
然后添加【Constant2Vector】
在这里插入图片描述
参数设置。
在这里插入图片描述
在这里插入图片描述
这样就得到一个圆形了。复制,得到另外一个圆形,修改第2个圆形参数。然后相减【subtract】。

在这里插入图片描述
添加颜色【Constant3Vector】,然后【Multiply】。
在这里插入图片描述
在这里插入图片描述
设置圆环的变化。【vector to radialvalu】,【ScalarParameter】
在这里插入图片描述
现在圆环减少是逆时针方向的,需要修改成常习惯的顺时针方向。
在这里插入图片描述
在这里插入图片描述
设计一个UI界面。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

修改锚点,尽可能保证不同分辨率下ui不会太过变形。
在这里插入图片描述
在人物蓝图中添加一个事件作为UI事件。
在这里插入图片描述
【Event Beginplay】,【Create Widget】,【Add To Viewport】
在这里插入图片描述
在这里插入图片描述
这样子人物界面就会有UI显示了。
现在而言这个耐力值只是个图片而已,需要先个人物添加当前耐力值,最大耐力的变量。然后将其关联。
在这里插入图片描述
创建新的事件【人物状态条】,添加【event construct 事件构造】,【Create Dynamic Material Instance 创建动态材质实例】,选择创建的环形材质。

在这里插入图片描述
然后获取角色的数据。【get player Character】,【cast to 人物蓝图_bp】
在这里插入图片描述
接着从动态材质中获取参数入库,输入数据。获取人物数据。【set scalar Parameter Value 设置标量参数值】
在这里插入图片描述
然后从图片中设置【set brush from material 使用材质设置笔刷】来更新图片
在这里插入图片描述

球形蓝条

首先,添加一个透明玻璃球图片作为该球形的外观。图片如下请添加图片描述
然后在UE4中导入。新建材质。修改设置为UI界面。
添加【RadialGradientExponential】,【constant】
在这里插入图片描述
插入玻璃球图片,使之看起来想一个玻璃球里面的东西。
在这里插入图片描述
添加【LinearGradient】来做蒙版,实现减蓝效果。
在这里插入图片描述
在这里插入图片描述

这次不直接将数据交互部分写在主UI文件里面,采用直接创建一个新的UI文件作为子文件使用。
然后先删除相机部分,这样其他的UI蓝图才可以引用。
在这里插入图片描述
插入图片。选择包裹-覆层,顺便改下名字。
在这里插入图片描述
在这里插入图片描述
然后蓝图设置,基本跟圆环一样。
在这里插入图片描述
然后在主UI中添加刚做好的蓝球UI。
在这里插入图片描述
展示效果
在这里插入图片描述

方块形血条

这里是直接使用UE4自带的进度条来实现血条功能。
在这里插入图片描述
然后将进度条的数值变化绑定函数。
在这里插入图片描述
然后在绑定函数里面。基本与之前一样。
在这里插入图片描述
然后添加颜色变化。跟上面一样添加颜色的绑定。
在这里插入图片描述
添加【lerp】来做颜色变化。
在这里插入图片描述
然后,添加一个扣血残影的效果。直接复制一条一样的进度条到原有的血条进度条下面。颜色固定为黄色。调整优先级。
在这里插入图片描述
然后设置一个HP背景的变量。在人物蓝图中设置变化计算。
在这里插入图片描述
一样给HP背景数值变化绑定一个函数计算。
在这里插入图片描述
发现测试的时候被hp条的原本的背景颜色给挡住了,所以要先把hp条的背景设置为透明。
在这里插入图片描述
动态效果
在这里插入图片描述

  游戏开发 最新文章
6、英飞凌-AURIX-TC3XX: PWM实验之使用 GT
泛型自动装箱
CubeMax添加Rtthread操作系统 组件STM32F10
python多线程编程:如何优雅地关闭线程
数据类型隐式转换导致的阻塞
WebAPi实现多文件上传,并附带参数
from origin ‘null‘ has been blocked by
UE4 蓝图调用C++函数(附带项目工程)
Unity学习笔记(一)结构体的简单理解与应用
【Memory As a Programming Concept in C a
上一篇文章      下一篇文章      查看所有文章
加:2022-03-22 20:55:47  更:2022-03-22 20:57:39 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年1日历 -2025/1/16 17:49:39-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码