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界面搭建,绘制出更加美观,具有交互性的界面。
相关推荐
zhangxingchao几秒前
Flutter网络编程与数据存储技术
前端
啪叽2 分钟前
探索鲜为人知的浏览器API:document.currentScript的实用案例
前端·javascript·dom
DuxWeb9 分钟前
为什么 React 如此简单:5分钟理解核心概念,快速上手开发
前端·react.js
陈随易29 分钟前
VSCode v1.101发布,MCP极大增强关联万物,基于VSCode的操作系统雏形已初见端倪
前端·后端·程序员
工呈士32 分钟前
Vite 及生态环境:新时代的构建工具
前端·面试
然我35 分钟前
从 Callback 地狱到 Promise:手撕 JavaScript 异步编程核心
前端·javascript·html
LovelyAqaurius36 分钟前
Flex布局详细攻略
前端
雪中何以赠君别38 分钟前
【JS】箭头函数与普通函数的核心区别及设计意义
前端·ecmascript 6
sg_knight40 分钟前
Rollup vs Webpack 深度对比:前端构建工具终极指南
前端·javascript·webpack·node.js·vue·rollup·vite
NoneCoder44 分钟前
Webpack 剖析与策略
前端·面试·webpack