Niagara UI
Renderer

Overview

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. Minimum version of Unreal Engine 4.26 is required! Everything higher, including UE5 should work just fine. This plugin was tested on Windows and Android, but it should work fine on other platforms too.

Demo video showing of features of the plugin

Performance

"stat NiagaraUI" console command

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.

Installation Guide

You have 4 options how to install the plugin:

1. 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.
   
   Installation Steps:
   
   • 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!


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


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


4. 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. They range from beginner to a bit more advanced effects.

Before you watch them, I would like to apologize for my English. I know that I have a lot to work on :)

Beginner Tutorial - Button dissolve effect

Intermediate Tutorial - Mouse trail

Advanced Tutorial - Coin collect effect

Setting up Simple UI Particle System

In this tutorial, I'll use Unreal Engine 5 for all of the screenshots. Keep in mind that the setup is the same in Unreal Engine 4, so you can still follow along.

1. Create your Niagara particle system. In this case, I will use Directional Burst template. You can create whatever Niagara System you like, or use already existing one, but keep in mind, that this plugin only supports CPU Sim Target.

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” (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:

3. Add Niagara System Widget into your widget (you can find it in the widget palette under the “Niagara” category). With your widget selected, you can pick your Niagara System in the details panel.

4. 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. Since I wouldn't recommend doing it this way, we'll take a look how to do it the second way: We can use Material Remap List on the widget itself. Just add a new element into it (1), select the original particle material on the left (2), and select the newly created UI material on the right (3, 4). You can repeat 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! In this case I'll remap both DefaultSpriteMaterial and DefaultRibbonMaterial to my newly created material from step 2.

5. If you followed this tutorial you may not see any particles on your screen. It may be because We've used burst particles which spawn only once, so they may be all dead. We can just recompile the widget, which will respawn the particle system. We should see our niagara particles now. You can play around with more settings in the detail panel, for example if the particle system should auto activate or not. At this point is your UI particle set up and ready to go! You can animate it, activate it on button press, or do whatever else you want! This is the result:

Using Dynamic Material Instances

Since version 1.1.7 it's possible to use dynamic material instances as target materials in the material remap list. This simplifies creation of variations, and allows for a greater runtime customizability. In order to simplify this two new functions were added: SetRemapMaterial() and GetRemapMaterial(). You can use them to easily modify the material remap list at runtime.

Example of using a Dynamic Material Instance with a texture parameter

Niagara System Widget Variables

Advanced:

Niagara System Widget Functions