【UE Niagara】在UI上生成粒子

2024-05-11 14:36
文章标签 ui 生成 ue 粒子 niagara

本文主要是介绍【UE Niagara】在UI上生成粒子,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

效果

步骤

1. 在虚幻商城中将“Niagara UI Render”插件安装到引擎

2. 打开虚幻编辑器,勾选插件“Niagara UI Renderer”,然后重启编辑器

3. 先创建一个控件蓝图,该控件蓝图只包含一个按钮

这里设置尺寸框尺寸为200*50

4. 显示该控件 

5. 新建一个Niagara系统

选择来自所选发射器的新系统

选择模板“Simple Sprite Burst”

这里命名为“NS_ButtonPressed”

打开“NS_ButtonPressed”。因为按钮是一个矩形,因此我们想让粒子在一个盒体范围内随机生成,这里可以添加一个“Shape Location”模块,设置“Shape Primitive”为“Box/Plane”

由于按钮大小为200*50,因此这里设置“Box Size”如下

设置粒子单次可生成1000个

在“Initialize Partic”模块中设置粒子的初始大小在4~6cm

此时效果如下:

6. 回到控件蓝图,将“Niagara System Widget”拖入画布面板

让其铺满整个画布(“Niagara System Widget”控件的大小其实无所谓,主要是它的中心点,我们要基于这个中心点的位置来产生粒子效果)

设置Niagara System为我们上面创建的“NS_ButtonPressed”,此时可以看到有一个报错警告,这是因为粒子使用的材质的材质域不正确

7. 回到“NS_ButtonPressed”中,可以看到粒子使用的材质是系统自带的材质

打开该材质可以看到该材质使用的材质域是表面

因此,这里我们可以自己创建一种粒子所使用的材质。

8. 这里命名材质为“M_P_Basic”,设置材质域为表面,混合模式为半透明,着色模型为无光照

在材质图表中添加如下节点

9. 在“NS_ButtonPressed”中,设置Sprite渲染器中的粒子材质为“M_P_Basic”

10. 回到控件蓝图中,点击“Populate Remap List”

这是会自动帮我们进行如下设置

11. 在内容浏览器中点击鼠标右键,然后选择“Create Niagara UI Material”

此时会自动创建一个新材质

12. 在控件蓝图中,设置新生成的材质

此时编译后可以看到粒子已经可以显示在控件上:

13. 接下来我们需要修改一下粒子的样式。打开“NS_ButtonPressed”,我们希望粒子能够由一点向外散开,因此可以添加一个“Add Velocity”模块,设置“Velocity Mode”为“From Point”,“Velocity Speed”为100

此时粒子效果如下

 

再添加一个卷曲噪声力

此时效果如下:

添加一个“Drag”模块

在“Initialize Particle”中设置生命周期时长范围和粒子初始颜色(注意这里的RGB三个值最好不要超过1,否则在控件上可能无法正确显示粒子的颜色)

此时粒子效果如下:

如果我们不希望粒子是一个球形,我们可以使用“Scale Sprite Size by Speed”模块对粒子进行拉伸

再设置速度对齐

此时效果如下

在控件蓝图中,我们点击编译后就可以正常显示粒子效果了

14. 如果我们希望在控件上粒子也有自发光效果,我们可以先复制一份材质,这里命名为“M_P_Glow_UI”

打开“M_P_Glow_UI”,添加如下节点

15. 在控件蓝图中替换映射后的材质为“M_P_Glow_UI”

接下来我们希望当编译时不激活粒子效果,只有按钮按下再激活粒子效果。可以先取消勾选“Auto Activate”

为了防止点不到按钮,我们需要设置NiagaraSystemWidget的可视性为非可命中测试

在按钮的点击事件中添加如下节点

最终效果如文章开头所示。

参考视频:

https://www.youtube.com/watch?v=1shJqOcEb0E

这篇关于【UE Niagara】在UI上生成粒子的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/979814

相关文章

element-ui下拉输入框+resetFields无法回显的问题解决

《element-ui下拉输入框+resetFields无法回显的问题解决》本文主要介绍了在使用ElementUI的下拉输入框时,点击重置按钮后输入框无法回显数据的问题,具有一定的参考价值,感兴趣的... 目录描述原因问题重现解决方案方法一方法二总结描述第一次进入页面,不做任何操作,点击重置按钮,再进行下

详解Java中如何使用JFreeChart生成甘特图

《详解Java中如何使用JFreeChart生成甘特图》甘特图是一种流行的项目管理工具,用于显示项目的进度和任务分配,在Java开发中,JFreeChart是一个强大的开源图表库,能够生成各种类型的图... 目录引言一、JFreeChart简介二、准备工作三、创建甘特图1. 定义数据集2. 创建甘特图3.

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

AI一键生成 PPT

AI一键生成 PPT 操作步骤 作为一名打工人,是不是经常需要制作各种PPT来分享我的生活和想法。但是,你们知道,有时候灵感来了,时间却不够用了!😩直到我发现了Kimi AI——一个能够自动生成PPT的神奇助手!🌟 什么是Kimi? 一款月之暗面科技有限公司开发的AI办公工具,帮助用户快速生成高质量的演示文稿。 无论你是职场人士、学生还是教师,Kimi都能够为你的办公文

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据,将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma

poj 1258 Agri-Net(最小生成树模板代码)

感觉用这题来当模板更适合。 题意就是给你邻接矩阵求最小生成树啦。~ prim代码:效率很高。172k...0ms。 #include<stdio.h>#include<algorithm>using namespace std;const int MaxN = 101;const int INF = 0x3f3f3f3f;int g[MaxN][MaxN];int n

poj 1287 Networking(prim or kruscal最小生成树)

题意给你点与点间距离,求最小生成树。 注意点是,两点之间可能有不同的路,输入的时候选择最小的,和之前有道最短路WA的题目类似。 prim代码: #include<stdio.h>const int MaxN = 51;const int INF = 0x3f3f3f3f;int g[MaxN][MaxN];int P;int prim(){bool vis[MaxN];

poj 2349 Arctic Network uva 10369(prim or kruscal最小生成树)

题目很麻烦,因为不熟悉最小生成树的算法调试了好久。 感觉网上的题目解释都没说得很清楚,不适合新手。自己写一个。 题意:给你点的坐标,然后两点间可以有两种方式来通信:第一种是卫星通信,第二种是无线电通信。 卫星通信:任何两个有卫星频道的点间都可以直接建立连接,与点间的距离无关; 无线电通信:两个点之间的距离不能超过D,无线电收发器的功率越大,D越大,越昂贵。 计算无线电收发器D

hdu 1102 uva 10397(最小生成树prim)

hdu 1102: 题意: 给一个邻接矩阵,给一些村庄间已经修的路,问最小生成树。 解析: 把已经修的路的权值改为0,套个prim()。 注意prim 最外层循坏为n-1。 代码: #include <iostream>#include <cstdio>#include <cstdlib>#include <algorithm>#include <cstri

【生成模型系列(初级)】嵌入(Embedding)方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入(Embedding)方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节:嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”,它将文本中的单词或短语转换成计算机能够理解的数学形式,即向量。 正如翻译机将一种语言