UE5.4——使用UltraDynamicSky实现天气切换和时间变化

写在前面

1.通过使用UltraDynamicSky在UE的运行界面实现场景中天气切换和时间变化的功能

2.需要自己设计一份运行界面的UI,其中界面中必须用到的控件有按钮和滑条,其他的控件和界面内容(如系统名称,模块名称,提示图标等)依照设计的UI自行选择(自己完成)

  • 切换天气使用按钮控件,一个按钮对应一种天气模式(天气模式不少于4种)

  • 调整时间使用滑条控件,通过移动滑条来修改场景的时间

  • 可以根据控件类型,自行设计界面UI,通过添加恰当的图标,文字,美化控件样式等实现更友好,更具有交互体验的界面

  • 通过提前在绘图软件(如PS,Procreate等)绘画好,导出图片,最终导入到UE的控件样式中,更方便实现对控件样式的个性化修改

3.在UE中实现场景中天气切换和时间变化的功能(根据此文档完成)

4.根据设计的UI,在UE中实现界面搭建。(学习视频教程)

关于UE的界面搭建推荐学习:【虚幻5UI系统(UMG)基础(已完结)】https://www.bilibili.com/video/BV1gT41137Vp?vd_source=9b5e54154f63da795926d9ad5289a205

  • 常用控件:p4图像,p5锚点,p6文本,p9按钮,p10滑条
  • 拓展:p25覆层,p33水平框,p34垂直框,p35尺寸框

ps:在UE中开发时,建议先根据此文档完成天气切换和时间变化的基础功能,再学习界面搭建,对界面进行优化

新建UE工程,配置UltraDynamicSky插件

1.新建UE工程

2.新建关卡

  • ctrl+空格调出内容浏览器

  • 将刚刚新建的关卡设为默认关卡

  • 将这两个都设置为刚刚新建的关卡

  • 将大纲视图中Lighting文件中内容全部删掉,避免场景中的灯光影响插件效果

  • 不要直接选中Lighting文件,然后Delete,这样只会删掉文件夹,但不会删掉文件夹中的内容

  • 将灯光删掉后,场景变成漆黑一片

记得随手保存对工程文件文件的修改,一定是通过右下角的保存才可靠

配置UltraDynamicSky插件

  • 将UltraDynamicSky文件夹放到工程文件的Content文件中
  • 回到UE,ctrl+空格调出内容浏览器
  • 在内容浏览器中可以看到刚刚添加进来的UltraDynamicSky文件夹
  • 这是用于调节时间和天气的蓝图类
  • 鼠标左键按住这两个蓝图类,依次拖入漆黑的场景中
  • 在大纲视图中可以看到刚刚拖到场景中的蓝图类
在细节面板中切换天气
  • 打开细节窗口
  • 在大纲中选中Ultra_Dynamic_Weather
  • 在细节面板中可以切换天气
  • 切换成晴天
在细节面板中调整场景时间
  • 在大纲中选中Ultra_Dynamic_Sky
  • 在细节面板中选择Time Of Day,修改此参数的数值可以修改场景的时间
  • 960对应上午9点

通过界面UI实现在运行时实时调节时间和切换天气

1.切换天气使用按钮控件,一个按钮对应一种天气模式

2.调整时间使用滑条控件,通过移动滑条来修改场景的时间

3.可以根据控件类型,自行设计界面UI,通过添加恰当的图标,文字,美化控件样式等实现更友好,更具有交互体验的界面

4.通过提前在绘图软件(如PS,Procreate等)绘画好,导出图片,最终导入到UE的控件样式中,更方便实现对控件样式的个性化修改

在界面中实现时间调节功能

  • 新建一个文件用来存放界面的内容
新建一个用户界面
  • 在内容浏览器文件夹中,右键
  • 双击打开
  • 添加画布面板
  • 面板-画布面板-拖入下方
  • 添加滑条
  • 通用-滑条
  • 在细节面板中设置滑条范围
  1. 默认值:960(默认上午9:00)
  2. 最小值:0
  3. 最大值:2500
  • 选中滑条,在细节面板中可以对滑条的样式进行调整

对滑条样式的参数设置可参考:

  • B站视频:【虚幻5UI系统(UMG)基础(已完结)】https://www.bilibili.com/video/BV1gT41137Vp?p=10&vd_source=9b5e54154f63da795926d9ad5289a205
控件蓝图
  • 选中滑条-勾选是变量-编译
  • 将细节面板滑到最底-添加值变更时事件
  • 在空白区域右键-搜索set time of day
  • 连接对应节点
将界面加载到运行关卡中
  • 打开关卡蓝图
  • 创建控件
  • 选择类-刚刚创建的用户界面名称
  • 左键点击-向空白区域拖出-调出搜索框
  • add to viewport
运行测试
  • 移动滑条可调整场景中的时间

在界面中实现切换天气功能

  • 场景中默认天气为:晴朗
  • 打开Main编辑界面
  • 添加按钮控件 通用-按钮
  • 此时,按钮和滑条重叠在一起
  1. 在编辑界面中手动拖拽,移动位置
  2. 添加垂直框(控件在里面自动垂直分布)或水平框(同理)
  • 这里添加一个垂直框
  • 把两个控件放到垂直框中
  • 选中按钮,在细节面板中可以对按钮的样式进行调整

对按钮的样式调整可参考:

  • B站视频:【虚幻5UI系统(UMG)基础(已完结)】https://www.bilibili.com/video/BV1gT41137Vp?p=9&vd_source=9b5e54154f63da795926d9ad5289a205
给按钮添加点击事件
  • 将按钮设置为变量-编译
  • 添加点击事件
  • change weather ·UDS
  • 在此处选择点击此按钮要切换的天气类型(这里选择下雨)
  • 这里表示切换到新的天气类型在多久之后发生(多久之后执行)
  • 设为0,立马执行
运行测试
  • 点击按钮,场景切换成下雨
  1. 请以此类推,在界面中实现不少于4种天气类型切换。
  2. 运行界面十分简陋,请通过学习UMG界面搭建,绘制出更加美观,具有交互性的界面。
相关推荐
wearegogog1234 小时前
基于 MATLAB 的卡尔曼滤波器实现,用于消除噪声并估算信号
前端·算法·matlab
Drawing stars4 小时前
JAVA后端 前端 大模型应用 学习路线
java·前端·学习
品克缤5 小时前
Element UI MessageBox 增加第三个按钮(DOM Hack 方案)
前端·javascript·vue.js
小二·5 小时前
Python Web 开发进阶实战:性能压测与调优 —— Locust + Prometheus + Grafana 构建高并发可观测系统
前端·python·prometheus
小沐°5 小时前
vue-设置不同环境的打包和运行
前端·javascript·vue.js
qq_419854056 小时前
CSS动效
前端·javascript·css
烛阴6 小时前
3D字体TextGeometry
前端·webgl·three.js
桜吹雪6 小时前
markstream-vue实战踩坑笔记
前端
C_心欲无痕6 小时前
nginx - 实现域名跳转的几种方式
运维·前端·nginx
花哥码天下6 小时前
恢复网站console.log的脚本
前端·javascript·vue.js