Download

Niagara UI Renderer | Free Plugin for UE4/UE5

Hi!

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 it should work fine on other platforms too.

Download 5.0EA:

Download 4.26:


Demo Video:

In Editor screenshot:

Performance:

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 3 options how to install the plugin:

  1. 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!
  2. 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!
  3. 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!

How to use:

  1. Create your Niagara particle system

  2. Because Unreal cannot render “normal” particle materials as UI elements we’ll need to create a version of each particle material with “User Interface” material domain. We’ll also need to swap out some nodes. Use Vertex Color 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. This is how a transformation of a basic UI material looks like:

  3. Add Niagara System Widget into your widget (you can find it in the widget palette under the “Niagara” category)

  4. Select your Niagara System in the Details tab

  5. 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!

    ScreenShot_MaterialRemap.jpg

  6. You can choose if you want the particle system to auto activate, or you can activate it with blueprints.

  7. 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:

    ScreenShot_BlueprintNodes.jpg

3 Likes

Amazing! I can see this being very useful for 2D and menu-heavy games! Thank you for contributing to the community!

2 Likes

UPDATE:

Hi!

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.

Download 5.0EA:

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!

2 Likes

You are awesome!

This is just amazing! <3

1 Like

This is awesome but it would be perfect if you didn’t have to do the whole material domain jank. Oh well, gotta take what we can get.

1 Like

I know :slightly_frowning_face:. 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).

Oh no I understand why it has to be done, I’m just thinking about whether there’s a way to automate the process.

1 Like

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.

This one is wicked!

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 :confused:

1 Like

Hi!

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:

Tick when Paused

Hi @SouryGame,

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.

1 Like

Hi!

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 :smiley:

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.

2 Likes