For a long time I have wanted to enhance my games with some UI particles, but I couldn’t find a good option. The only available options were render targets, a clunky and expensive choice, or some plugin from the Marketplace without Niagara support. While waiting for Epic to integrate UI particles to their engine, I thought that I could give it a shot myself. I ended up with something that works pretty well, so I want to share it with you guys. Feel free to use it however you want, and leave any comments or feedback.
Niagara UI Plugin adds Niagara Particle System Widget that allows you to render Niagara particle systems directly into the UI. The plugin supports sprite and ribbon CPU particles. It was tested on Windows and Android, but should work fine on other platforms too (it’s necessary to add the platforms to the “SupportedTargetPlatforms” and “PlatformAllowList” in the “NiagaraUIRenderer.uplugin” and compile the plugin yourself).
This screenshot shows performance metrics captured in a scene with 1,000 particles running on AMD Ryzen 9 5900X. It takes approximately 0.05ms to generate sprite data and 0.1ms to generate ribbon data. These numbers DO NOT include any actual Niagara simulation or rendering time. You can use “stat NiagaraUI” in console to check on the performance.
How to install:
You have 4 options how to install the plugin:
Install the plugin from the Unreal Marketplace into Unreal Engine:
The easiest way to get this plugin. Installs directly into the engine so you can use it across multiple projects.
Get the plugin from the Unreal Marketplace
Download the plugin and install it into your engine
Enable Niagara UI Renderer in your project’s Plugins settings
Enjoy!
Install a precompiled plugin into Unreal Engine:
Recommended if you want to use plugin across multiple projects.
Installation Steps:
Download the precompiled plugin for your version of Unreal Engine
Extract the whole plugin folder into …..\YourEngineInstallationPath\Engine\Plugins\
Enable Niagara UI Renderer in your project’s Plugins settings
Enjoy!
Install precompiled plugin into your project only:
Recommended if you want to use the plugin in one project.
Installation Steps:
Download the precompiled plugin for your version of Unreal Engine
Extract the whole plugin folder into …..\YourProjectPath\Plugins\
Enable Niagara UI Renderer in your project’s Plugins settings
Enjoy!
Compile your own version from GitHub:
Recommended if you’re an Unreal Engine God.
Installation Steps:
Download the plugin source from the GitHub repository
Copy the plugin into your plugins folder
Regenerate Visual Studio project files
Recompile
Enable Niagara UI Renderer in your project’s Plugins settings
Enjoy!
Tutorials:
I’ve also made some tutorials to help you guys get started or inspired. They range from simple beginner effects to a bit more advanced.
Before you watch them, I would like to apologize for my English. I know that I have a lot to work on
Because Unreal cannot render “normal” particle materials as UI elements we’ll need to create a version of each particle material with “User Interface” (1) material domain. We’ll also need to swap out some nodes. Use Vertex Color (2) node instead of Particle Color node. Usual particle parameters such as Particle Radius, Particle Random, etc. won’t be available for UI particle materials. For sprites, you can access Dynamic Parameter R and G data from Texture Coordinate with coordinate Index 1. In the new version of the plugin, you can also use automatic material conversion. Just right click on your material, and click on “Create Niagara UI Material” option. This will create a duplicate of the material, which will have correct material domain, and vertex color nodes in it. Please keep in mind, that this conversion isn’t always perfect, and it’s still recommended to manually check the newly created material, so treat this option just as a good starting point for your material conversion. This is how a transformation of a basic UI material looks like:
Add Niagara System Widget into your widget (you can find it in the widget palette under the “Niagara” category)
Select your Niagara System in the Details tab
You still won’t be able to see your particles because we need to apply the newly created UI material. There are two ways we can to that: You can either set the material directly into your Particle System renderer. This will result in particle rendering correctly in the UI, but it will make it render incorrectly in the Niagara preview and in the world. To avoid that, you can use Material Remap List on the widget itself. Just add a new element into it, select the original particle material on the left, and select the newly created UI material on the right. You can do this for as many materials as you want. Each material on the left will get automatically remapped to the one on the right when rendering UI. This way you can still see the correct preview of the particle system, use the particle in the world and use it as a UI particle system!
You can choose if you want the particle system to auto activate, or you can activate it with blueprints.
Your UI particle is set up and ready to go! You can animate it, activate it on button press or do whatever else you want! Here are some useful blueprint nodes you can use:
If you’re like me, you’re already playing around with the new UE5 early access, which is by the way amazing! I’m still sad though, that there are no official UI particles. In the meantime I’ve updated my plugin to support UE5 Early access.
While everything should work smoothly, there’s a possibility that I overlooked something when upgrading to UE5. Feel free to let me know if you’ll find any issues, or if you’ll need any help in general. I hope this plugin will help you in creating amazing experiences!
I know . Unfortunately, the way I’m rendering particles on screen is through Unreal’s SMeshWidget, which requires the material domain to be UI. I’m not even sure that there is a way to make them render with normal materials, because you’re missing a lot of world information (for example lighting). Also, you probably want separate material for UI particles anyway, since the UI particles won’t have any post processing applied to them. Which means effects like bloom just won’t work, and you have to fake them in material (you can find an example in the demo project).
I think that some automation should be possible. It probably won’t give a perfect results every single time, but I may look into it sometime in the future. I have a lot of things going on right now, but maybe in a few weeks I’ll have time to implement some kind of automated material conversion, and I also plan to add support for tessellated ribbons.
One question thou: the systems won’t run / update if the game is paused. Some parts of UI needs the game to be paused, any idea how to set the widget to update even when paused?
Edit:
added constructor to UNiagaraUIComponent and set PrimaryComponentTick.bTickEvenWhenPaused = true; didn’t do the job
Thanks for the suggestion. I’ve added option to Tick when Paused to the plugin. I don’t have time right now to make a release but I’ve pushed the update to the github so you can grab it from there. Let me know if you’ll have any troubles setting it up or if you need packaged plugin with compiled binaries.
Basically the trick was that other than setting the bTickEvenWhenPaused you also have to SetForceSolo to true, so it will get simulated separately even when the game is paused.
You can find the option on each Niagara System Widget:
Is the UE5 version also distributed under MIT license?
Any chance you could include the license in the zip? Better yet, would be if the UE5 version was also on GitHub! Or is the UE5 version identical source, but just re-compiled in UE5?
Really looking forward to trying to out!
Edit: I just took a quick look and it does in fact appear that the UE5 version source is identical and is simply a minor edit to the plug-in confirm along with binaries built against the new engine. So, yah, in a perfect world there would be a branch in git which makes the changes to NiagaraUIRenderer/NiagaraUIRenderer.uplugin at main · SourySK/NiagaraUIRenderer · GitHub for UE5, just so that licensing is crystal clear.
Yes, the UE5 version is also distributed under the MIT license.
You’re right, the UE5EA version in basically the same as the GitHub version just with some really minor tweaks, so it shouldn’t be problem for anybody to get the GitHub plugin compiled under UE5EA. I didn’t put the UE5EA version on the GitHub because the main development version is still for UE4, since UE5 is in early access. I just wanted to put out precompiled version for UE5 for anybody that wants to experiment and play around with it, but doesn’t necessarily know how to compile his own version of the plugin. But don’t worry, you can still use it however you like no matter if it’s on a personal project or a big production. It was made for the community
I plan to add UE5 version to the GitHub once the UE5 comes out of the early access. If it’ll help you I can include the license in the .zip files in the future releases.
Hi. When i package the sample project to Android i get below error:
> /Unreal Projects/NiagaraUIRenderer/Plugins/NiagaraUIRenderer/Source/NiagaraUIRenderer/Private/SNiagaraUISystemWidget.cpp(96,21): error: loop variable 'Brush' creates a copy from type 'const TTuple<UMaterialInterface *, TSharedPtr<FSlateMaterialBrush, ESPMode::Fast>>' [-Werror,-Wrange-loop-construct]
Anyone knows how to solve this?
Maybe this line might help:
/Unreal Projects/NiagaraUIRenderer/Plugins/NiagaraUIRenderer/Source/NiagaraUIRenderer/Private/SNiagaraUISystemWidget.cpp(96,10): note: use reference type 'const TTuple<UMaterialInterface *, TSharedPtr<FSlateMaterialBrush, ESPMode::Fast>> &' to prevent copying
Hi!
At least to me it looks like you have “Warnings as errors” enabled. If that’s the case, try disabling it. I’ve tried to package the GitHub version of the project for Android, and it works fine for me. If that doesn’t help, could you give me more information about what is your configuration? Did you clone the repository of the GitHub or are you trying the zipped Demo project with included binaries. Are you packaging the project from the editor? What version of the engine are you running? What version of the Android SDK are you running?
I think the problem was on my end. Anyways i packaged the app and put it in play store for internal testing and the Plugin works fine there.
By the way i was using:
Android SDK: 29
UE4 4.26.2
Zipped project demo with binaries
Packaged the game from editor works fine (launching the game via usb to phone caused errors but that may be an issue on my end)
Thanks for letting me know @jyashi. I’ve tracked down the issue. It was caused by Unreal treating warning as errors when launching the game directly to the phone, so it wasn’t caused by your setup. I’ve fixed the warning yesterday and pushed the fix to GitHub, so you can grab it from there and the Launch should work just fine.
When i try to use my own Niagara effect inside the provided widget WB_NiagaraDemo it works fine. But when i try to use the same Niagara effect inside my own new widget i cannot see the Niagara effects.
Just wanted to know, do i need to use the WB_NiagaraDemo everytime as a template widget for me to use this plugin or i should be able to use the plugin with any new widget i create and i am doing something wrong? (Ofcourse i make sure the system is activated in the new widget i create)
Thank you for the support.
PS: Is the Plugin with included binaries link updated with the new fix that you added or is it only available if i pull it from Github?
You should be able to create a new widget without relying on the sample project. When you’re creating the new widget, are you following the guide that’s in the original forum post? Most likely reason why your widget doesn’t work is that you’re not remapping materials to the UI ones. There’s “Material Remap List” on each widget, which you need to set up in order for it to work. Also always make sure your particle systems Sim Target is CPU.
I’m currently working on a documentation for the plugin. There’s a more detail step by step guide on how to set up the widget properly. The documentation isn’t fully finished yet, but it may help you. I would recommend to take a look especially at the steps 2. and 4. in " Setting up Simple UI Particle System" which show how to remap materials.
Unfortunately I cannot make a new release every time I modify something in the plugin, so the fix is currently only on the GitHub. It will be included in the .zip files once I make a new release for the plugin.
. Unfortunately, the way I’m rendering particles on screen is through Unreal’s SMeshWidget, which requires the material domain to be UI. I’m not even sure that there is a way to make them render with normal materials, because you’re missing a lot of world information (for example lighting). Also, you probably want separate material for UI particles anyway, since the UI particles won’t have any post processing applied to them. Which means effects like bloom just won’t work, and you have to fake them in material (you can find an example in the demo project).
