UI Particle System: advanced plugin for particles in GUI [RELEASED]

​

I'm glad that I can announce new kind of GUI plugin: UI Particle System
UI Particle System is advanced solution for 3D particles used in Unity GUI. With this plugin you will not need to worry about changing sorting orders, adding multiple canvases, etc. With it you can just add particles to GUI in few quick steps. UI Particle System is also mobile friendly, its very efficient depth buffer generating method makes is very cheap for performance.

Features:
-rendering particles on GUI, based on custom depth buffer
-full support for Shuriken Particle System (only what you need to change is shader)
-culling mask feature (so you can use particles in scroll views, etc.)
-easy to setup component-attach UI Particle system
-advanced, highly customizable particle shader

Requirements:
-Unity GUI
-Canvas with Screen Space - Camera mode. System does not work without GUI camera set.

Perfect for:
-creating cards special effects (like those from Hearthstone or even better because you are not limited to 2D and based on shader animation effect)
-special effects of GUI elements like buttons or other interactable elements
-rewarding effects with complicated and advanced particles

Supported depth/culling sources:
-Image (GUI component)
-RawImage (GUI component)
-just RectTransform with selected texture

Supported rendering pipelines:
-Standard
-URP, since 2019.3

Please note that HDRP pipeline is not supported (because they are still in large changes stage).

Where you can find it? Here: https://assetstore.unity.com/packages/tools/gui/ui-particle-system-108285

 

Your link is broken. It just forces me to log in than takes me to my downloads. Your likely using the new broken store which does not work. I would like to look at this but unfortunately asset store is broken.

Do you have a link to your asset on the old store?

 

Sure here it is: https://www.assetstore.unity3d.com/en/#!/content/108285
Thank you for information. I've checked link to new asset store but it worked fine for me (on private mode of browser). I'll also change link in main post

 

Something must be wrong with unity. Still doesn't work. Forces me either to log in. When I do that it just takes me to my downloads. This is normal based on the new store. Its a mess.

Oh well. I will just have to keep an eye on this thread and hope they fix it. Thank you for trying at least.

I will have my hands full working with the UI Shader options added to Amplify Shader but I was intrigued by this. The shaders make my UI fantastic but adding particle fx also opens the door for more stunning vfx. I know first hand the hassles of multiple canvas and cameras trying to have 3d particle fx show on a 2D UI. It was a huge time sink and frustrating. I am super happy that the people behind Amplify Shader made it a reality. So much easier using tools like that and I am sure this one as well for those things.

Sounds like a handy tool, I wish you best of success an hope the store doesn't effect your exposure.

Update: here is a link for the old asset store that is working: https://www.assetstore.unity3d.com/en/?stay#!/content/108285

 

Thank you for note and wishes!
And yes with my plugin you will not need to create additional canvases, fight against different rendering queues, etc. Also if you use parameters from shader from UI Particle System you can also make your own shader for particles/effects (but I'm sure that in most cases it will be enough for you because it's quite advanced and multi-option) - probably you can easily make shader in Amplify Shader which will work with my system.

 

Looks great!

I'd love to see some interactivity between the depth mask and the particles if possible.
Or, some UI-particles interaction (size dependent orbit, marching ant movement, depth slice filling and so on)

Definitely looking forward to see what's next in the roadmap!

 

Hi, you could see how depth mask works on preview movie (

) on Play, Shop and Ranking buttons.
For example, without using depth mask Shop button effect would look like this:
as you can see particles are in front of button but in 3D in editor I've set them to be around button,
but with depth mask (the same positions of particles):

and how it looks on depth mask/buffer:


About other features: size dependent orbit can be easily achieved by simple movement script by getting UI objects size by this method: https://docs.unity3d.com/ScriptReference/RectTransform.GetWorldCorners.html (if I understood you well), same with ant movement. Or you can just make auto-rotating transform with child with position offset (like in Shop button example - it's attached into plugin examples)
Can you explain please what do you mean as "depth slice filling" ?

About roadmap: I have in plans adding soft particle effect so when particles move through UI element they will fade out nicely. Probably they will be even possible for use on mobile games because taking UI depth buffer here is cheaper than in "true" 3D. If you have idea for more features I'll be glad to hear them

 

Yes, thanks, I subscribed to your YT channel and watched all 3 videos before posting


About UI-Particles interaction I meant specific scripts to let each and every particle to programmatically interact either with the bounds of an UI element (perimeter, area), or to keep some constant distance from it (contour), or to orbit around the approximate area (not around the point).

By particle "depth slice filling" I meant taking a slice of the depth mask, and making particles spawn only within 2 certain threshold values of depth mask.
Using your pic as a reference, allowing the user to make a PS just spawn the particles if the corresponding spawn points fall inside some threshold values in the depth mask.

Even colliding with the depth mask would be nice (not at the levels of the UEngine, maybe something less complex)

I'm just brainstorming as "it'd be cool if", these are not actual requests

 

Thank you for explanation. Thats great that author of that amazing VFX packs is interested in my plugin!

About programmable interactions: UI Particle System allows to use Unity Shuriken Particle System in 100% so you can use same scripts as you use in your packages but instead of getting bounds of Renderer component you need to use GetWorldCorners of RectTransform or get Graphic bounds from Image/Raw Image. Please note that you can also use typical 3D colliders in UI Particle System. Also if you are interested in making more advanced effects, I've submitted to Asset Store UI 3D-System which will be extended version of UI Particle System, because it allows to use also 3D Renderers, lights, etc. It will support Rect Transform dependent mesh scaling and... just more features Oh and one more thing: UI 3D-System will be treated as Upgrade to UI Particle System so someone who bought current plugin will need to pay only difference between prices.

About depth slice filling: UI Particle System is Z position dependent (as I said it works like depth buffer) so if you spawn programmatically particles on certain Z positions you can achieve this effect.

About colliding with depth mask: here are same rules as in basic 3D: you can use colliders or you can change shader/script to react on depth mask pixels change. Depth mask is easily accessible so it wouldn't be hard.

If you are interested in looking into documentation (which better explains what are additional possibilities) please PM me with your mail, so I'll share pdf with you

 

Version 1.03 has been released!
Whats there:
-Fixed errors on some edit inspector parameters in runtime
-Added scene view improvements which allow to see how particles are cut in game mode (previously this was only possible in scene view 2D mode because of screen space casting)

 

Because of multiple questions about "when will be supported soft particle system with GUI collisions" I've decided to submit support for this at this weekend so in incoming week it should be available as an update (usually it takes for Unity to review update in 3-4 work days).
Here's screen whats difference it makes:


What is performance cost of this feature? Nearly the same as without soft particle(in shader it's case of using higher precision for computations and 3 more cheap-operations, like multiply). Of course it's recommended to not use this feature unlit it's not needed, because still it is some performance cost for GPU (especially in case of mobiles).

 

Version 1.04 has been released!
What's new:
- Added support for soft particle blending on collision with GUI (like Soft Particles in 3D, but less performance expensive)
- Updated documentation


Additionally, extended version of UI Particle System - UI 3D-System has been also released! You can find it here: https://goo.gl/Wz8vjD

 

I have good news: asset will participate to end of March in Unity Sale program for Unity Plus/Pro licenses, which means that those users will get 20% discount for UI Particle System.

 

Hi, we are considering using your asset and have a question.
Will the hierarchy affect the particle system?
For instance, I want to make a card prefab that has a particle system as a background. If I clone it and make those two overlapped, will the background particle stay between those two card prefabs following the hierarchy?
Or do we have to change layer order or rendering queue?

 

Hi @moonaanii, hierarchy does not affect particle system. It works exactly like in 3D, so if one particles are closer to camera than others, they will be visible in front.
In case that you have 2 cards in the same X,Y,Z position particles will overlap like in typical 3D.
There are 2 solutions to separate backgrounds in this case (much faster than using Unity layers or changing rendering queue):
-you can change UI Particle System culling layer mask number (when you put particles into frame you can select 0-255 culling layer so they will be visible only in this layer)
-or simply, because UI Particle System also works in Z position, you can just put cards in different Z pos. For example if particles is flying inside card because of culling but flying out of it in Z position for 5 z-range you should make those 2 cards separated in Z position by 5, so particles from one will not fly into another card.

 

Hi,
Your plugin seems very similar to Lectus Games' one and it's hard to decide which one to get. Are you somehow related?
Secondly, does your plugin support both the Rendered module and Texture Sheet Animation module in the shuriken particle system?

 

Hi @Starbox,
at first look - yes it looks similar, but UPS supports 3D effect (so you can make Particle System flying around GUI elements), additionally you can just use Shuriken Particle System (all features) so you don't need to worry that something what worked in 3D won't work in GUI.
The plus of Lectus Games' plugin is that it allows use Screen Space Overlay Canvas GUI (UPS supports Screen Space Camera GUI and World Space Camera GU modes, usually people use Screen Space Camera canvases so that's enough, especially if you are targeting top quality).

About your second question: yes, UPS supports Renderer module and Texture Sheet Animation. It also supports collisions, noise, trails, external forces and other Shuriken Particle features.

 

Yes, there's always the option to use a screen space camera without a camera. Although not an intuitive approach, it does work and functions as an overlay on the screen.
Renderer and Texture Sheet Animation are important to my project, so as long as I can have a real all-2D appearance I'm happy.
Looks like UPS is the way to go for me.

 

I'm happy to hear that I hope my plugin will help you in development.

About null camera in canvas: well UPS needs this camera so canvas has to have camera attached. I didn't even know that canvas would work with empty camera field

 

Because Xmas time is coming I've prepared video tutorial, how to add snow into gui with use Ui particle system or ui 3d-system plugins here:

 

Hi,
Would you have any idea how I could exactly scale a particle system object (or how to guess the right size in Start Size) so that the sprites I use in it (through the Texture Sheet Animation module) are of the exact same size as the sprites I use in a UI Image?
The sprite is from an Atlas (but not using Unity's sprite packer) and in the UI Image I pressed Set Native Size, which set the sprite at its proper size, in relation to the screen size.
Is there anything similar I could use in your plugin?

 

Hmm that's not easy thing to fit particles exactly to the sprite, but maybe script which I've added in plugin, "UIParticleRectTransSizeFollower" may help you. It scales object so it follows Rect Transform changes.
So the flow that could work in your case:
-put on scene sprite in UI Image
-add game object with UIParticleRectTransSizeFollower script as a child of this image
-add your particles as a child of this child D) and make that in editor view they fit to UI Image and set scaling mode to hierarchy
-set in UIParticleRectTransSizeFollower as a target the transform of UI Image
-click "Make rect snapshot" (in current Asset Store version this button is missing so I'll submit missing editor script asap, for now I've send you in pm editor script)
-now it should work (remember to set Scale Update Refresh from OnAwake to another one if image needs to be scaled frequently)

 

Thinking of a purchase. Does this bring particles into UI when the Canvas is in Screen Space - Overlay?

 

Hi,
Screen Space Overlay is (the only mode) not supported. Plugin requires camera attached into canvas.

 

Hi! Probably not, but this plugin works on unity 5.6?

 

Hi @aigam,
UI Particle System also works for Unity 5.6. It's just uploaded with Unity 2017 but it's compatible with 5.6 GUI too.

 

Hello @MODev, when I try to compile for iOS I get this error:

Destroying object multiple times. Don't use DestroyImmediate on the same object in OnDisable or OnDestroy.

UnityEngine.Object:DestroyImmediate(Object)

UIParticleCanvas:OnDestroy() (at Assets/Plugins/UIParticleSystem/Scripts/UIParticleCanvas.cs:71)

I went into UIParticleCanvas.cs and commented out the the offending OnDestroy code, and it compiles fine now. Do you think this fix is going to cause any issues?

 

Well it may cause issues. To be honest I see this error first time. I've checked the forum and found solution:

Code (CSharp):

1.  
2.     protected void OnDestroy()
3.     {
4. #if UNITY_EDITOR
5.         UnityEditor.EditorApplication.delayCall += () =>
6.         {
7.             if(mask)
8.                 DestroyImmediate(mask);
9.  
10.             if(maskCamera)
11.                 DestroyImmediate(maskCamera.gameObject);
12.         };
13. #else
14.         if(mask)
15.             DestroyImmediate(mask);
16.  
17.         if (maskCamera)
18.             DestroyImmediate(maskCamera.gameObject);
19. #endif
20.  
21.     }

I'll update package too if someone else meet this issue

 

Here it is!
Support for semi-transparent culling masks and semi-transparent (non-overlapping) depth objects has been added to UI Particle System.
Now available at version 1.23!

 

Many people asked if certain version is supported so here's the list of currently supported versions:

Of course if 2019.4, 2020 etc. will come we plan to support them too.

 

Universal Rendering Pipeline is coming to UI Particle System soon! At start it will be beta-test like but the goal is to support URP as previously Standard Rendering Pipeline (with some small changes).

 

As promised, version 1.30 is here! So URP beta support to!
We are waiting for your feedback (ofc about URP update, if it's working fine, maybe some screen what you have made in it), which will be of course rewarded by voucher for one of our packages!

 

Asset store sale is here! Still thinking about adding particles into your GUI? UI Particle System is 50% off!
Don't forget that if you buy it in discounted price, upgrade to UI 3D system still costs only 15$!

 

Hi dev, we're using unity 2019.4.1f1
ui particle system version 1.30

we find that Sliced image produce incorrect depth mask.
This is the shape of our intended image


Here is the depth mask. we can see that instead of lemon shape, they become D shape


Here is the comparison of depth mask when we change one of the image to Simple type

 

Hi @gshape, thank you for information. It's known case (even in documentation there is info). In many cases sliced Image will work but Unity slicing when you use fill center and different pixel per unit is hard to predict behavior to generate depth mask (code is hidden so theres no access to get it).
What I can offer: you can send us by mail your sprite (with meta file to get import config) and we will look how can be this fixed.

 

Hi. Just been playing with it, but I can't seem to get the Canvas Group alpha to work with the particles.

I set the canvas group alpha to 0 but particles are still in 100%

Any idea?

 

Hi, UI Canvas Group is working only for UI elements but Particle Renderer is not UI graphic component so to control particles alpha you need to change their material values.

 

Ugh... I thought it would work out of the box. Can you consider offering refund please?

 

We have to deny your request as there's nothing in description that suggests that canvas group fading feature will work with particles (it's clearly shown that Unity's particle renderer is used and in Unity documentation there is no connection between canvas group and particles).

Btw, why wouldn't you create simple script which is attached to canvas group and when alpha is changed, the material's color of particles is changed too?

 

Hey @MODev, I have a question. What exactly is the purpose of the "Mask Layer" field in the UIParticleCanvas component?

In the example scene, everything seems to work regardless of what I set that layer to. If I change it to a different layer and hit Refresh, the Depth Mask looks exactly the same, and the masking works as expected.

 

Hi @_eternal, Mask Layer is used for rendering mask objects into texture. They are not visible but they are there.
As publisher we cannot provide in package the layer which we use but "value" of layer id is still hold so even if there seems nothing it works properly. The main thing here is to have this layer set to different than what your 3D/2D/UI camera see otherwise mask objects will be rendered to this camera and you may see strange things (like duplicated images with different color)

 

Hmm... well, here's an example of what I mean:

I understand that you can't add a layer to the project via an asset, because it will use the name of whatever layer currently exists for me with that ID.

But what I mean is, in the video, the masking seems to work correctly no matter what the object's layer is set to, right? I guess this isn't a problem, but I want to be clear on how things work.

 

Yes it will work with any layer, as I said I will only render in your ui camera if you set mask layer to the same layer as ui canvas camera sees which will look like issue, so that's why you need to set any layer other than just rendered by your cameras. (BTW did you know that you can hide layers visible in editor in top right window dropdown?)

 

Actually, wait. I'm still confused.

Yes, I understand that the UIParticleDepthObject should be on any layer that is not rendered by the Canvas camera. So, if the Canvas renders a layer called UI, then I could set the depth object to another layer called UI Mask or something like that.

But my issue is, what's the purpose of the Mask Layer property in UIParticleCanvas? As you can see in my video, it didn't matter whether that layer matched with my UIParticleDepthObject or not.

In the video, I set the UIParticleCanvas's Mask Layer to Water just to test it. Then I set the UIParticleDepthObject to Water, and then to Player. And nothing changed. The configuration of the UIParticleCanvas didn't seem to matter.

Of course, it makes sense to put UIParticleDepthObject objects on a layer that is not rendered by the camera, but I haven't figured out how this relates to the UIParticleCanvas's Mask Layer property.

 

Ah I see now what confuses you. UPS layer is used only for rendering mask and depth object should not even has this layer set. Layer is set only in canvas and nowhere else. Even more: if depth object has the same layer set as ui particle canvas mask it may cause problems.
Best way is to have:
-ui particle canvas mask layer set to something different than UI mask
-ui depth object (which in many cases contains also ui image) are on UI rendered layer

 

Ohh, okay. Thanks, I think I get it now

So in conclusion...

Option #1: Depth Mask
- Set UIParticleCanvas's Mask Layer to any unused layer, doesn't really matter (as long as it's not rendered by the UI camera)
- Set UIParticleDepthObject's layer to anything that is rendered by the UI camera
- Set UIParticleDepthObject's Render Mode to Just Depth

Option #2: Culling Mask
- Set UIParticleCanvas's Mask Layer to a layer that is not rendered by the UI camera (preferably a new layer to avoid conflicts)
- Set UIParticleDepthObject to the same layer as defined in UIParticleCanvas
- Set UIParticleDepthObject's Render Mode to Culling Mask

Correct?

 

Hi, in second option also should be "Set UIParticleDepthObject's layer to anything that is rendered by the UI camera"

 

With this asset, is it possible to have a particle travel around the edge of a UI Button? There's the Rect Trans Size Follower component but I can't see it being used in any examples. Would that do what I need?

 

Rect trans size follower is for auto scaling 3d objects (like particles) to follow size od selected Rect.
For moving particles around button outline you need to find another solution (probably in code you can take vertices of button rect and move your particles between those 4 points or if you need something smoother take collider points or create own one)

 

How well does this perform on mobile / Android?