Particles within the new GUI

How can i properly implement particle systems within the new gui?
I want to anchor them at the right places and so on.

What i did was adding a rect transform and a canvas renderer, but they do not show. Do i need to add an extra camera? Or an additional canvas just for particles?

 

yes, i realized the same thing. Actually what i do have right now is working a little differently. I have one canvas, render mode set to screen space - camera, and my camera is an orthographic camera which renders my UI and particle layer.
My particle-system-parents have a rect transform and this works just fine except the sorting, which is messed up.
(Btw, when i had the render mode at overlay, it didn't render particles at all.)

To the sorting: somehow the 'Sorting Fudge' in the particle system properties influences the overall render sorting. It seems particle systems are not affected by the hierarchy sorting, like all the other ui elements.
In my opinion it should be something like that:
Sorting Fudge is ONLY responsible for the sorting between different particle systems. Not at all should this affect the overall render sorting in any way.
The particles should then work like all the other ui elements within the hierarchy sorting, and particles should be rendered, even though the render mode is set to overlay.

I know you have tons of things to do, so i will find workarounds, but it would be quite nice to have working particles within the gui system for all of us vfx/ui artists asap.

 

Hi Tim - Can you give any indication where on the road map being able to incorporate particles with the new UI is? (even a very rough indication if this is going to be in 4.6 vs 5 would be very useful to us)

 

Its really a "once we have time to implement it and there is nothing else more important" type time frame. If we feel its something we should get into 4.6 then we will. if not then it will be 5. Best guess would be that its more for 5.x

 

For those that have Unity Pro here is a simple solution using an Orthographic Camera, a RenderTexture, and a RawImage. Basically you render the particles to a Render Texture and then in LateUpdate apply it to the RawImage. There is no fussing with copying of pixels to create a Texture2D or a Sprite so the performance is pretty good.

Attached are the two small classes for the solution and screenshots of my setup. I animate my particles in line with the rest of my UI so when setting up the Camera and RenderTexture I take this into account. Should you not want this, just set up a camera with a RenderTexture the way you normally would and attach it to the ParticleLayer and it should work fine. Also, remember to make sure that your RawImage object is the full size of your Canvas and anchored properly or your particle effects will look weird!


Its not optimal but hopefully this helps someone out in the mean time.

There is additional info and updated scripts in my reply below, cheers!

 

Atticus, does your game have to deal with multiple resolutions? If so, how is it that you deal with particle scaling and placement?

If the screen resolution changes, how can your particles be both correctly scaled and positioned? Getting the position correct and then scaling the render texture to the screen would result in incorrect positioning. You can't scale first because you have to render to the texture in the correct position. You can't scale a particle at runtime so that's not an option either.

The only solution I can see working for multiple resolutions is to NOT place the particles in the same heirarchy as the UI itself, to place your particles in a 0 to 1 space and render it to an orthographic camera with a 1 height, 1 width and 1 ortho size always, then take that camera's texture and scale it up to the screen as you do or use a view matrix transformation to scale.

 

My game indeed does work in multiple resolutions; from iPhone4 to the various retina iPads. In order to get this to work you need to manage the size of both the camera and the particle layer component to ensure that they are the same size as the canvas itself. I will explain my setup and link updated classes that fix an issue with rendering on i-devices (haven't yet tested on Android.)

For the camera (orthographic) I do this by placing it within the hierarchy at (0, 0) both to make it easy to organize and to allow me to place my particles with the rest of the scene.


The size of the camera shouldn't matter as the ParticleCamera class will properly re-size it to match the size of the canvas by making use of the Screen width and height properties. You will however need to ensure that your camera is set with Solid Color as the clear flag and that it only renders a layer that is dedicated to your particles. See my setup below:

Note: When the game is running the camera will be disabled and rendering to it's generated texture will be handled by a co-routine within the ParticleCamera class.

For the actual rendering of the particles to the UI I use a RawImage component along with my ParticleLayer class. Again we have to make sure that this component is the same size as the canvas itself, however because it is a uGUI component I just make sure of the built in anchoring system. The Image itself is left with nothing set as this all gets applied at runtime, here is a screenshot of my settings:

Note: To prevent the RawImage from preventing interactions with everything I have added a canvas Group and disabled "interactable" and "blocks raycasts".

With this setup you can organize your particles within the same hierarchy as the rest of the UI elements so that you can easily align your effects. Hopefully this gives you some better insight into how to get particles rendering in your UI. If you still have questions, let me know and I'll try and answer them in a timely fashion.

Attached is a zip with the scripts I created for rendering particles within the Canvas. Currently these scripts are integrated with our project. I have modified them to theoretically work on their own but I have not yet tested this version of them.

 

I still don't understand how the sizing of the particles work if there aren't two constant sizes. Does your canvas always stay the same size? I didn't think that was possible when changing resolutions. Particles can only be made at a set size, so the objects that they are rendered with must match that size or the sizes are going to be inconsistent across resolutions. If the canvas doesn't stay the same size, where do you get your second constant value from to make particle sizes match UI? Or if I'm missing something, please elucidate.

I have found a different solution to the problem. It also uses cameras to create the effect but it doesn't use any render textures so its performance should be a bit better. It also won't stretch your particles because of that, so if stretching the particles after render is desired then this isn't the solution you want. For us, stretching the particles seems undesirable.

I put my UGUI Canvas in a camera with height, width and orthographic size 1 and have a separate camera for the particles with the same values and a higher depth value. I set all my particles to be on their own layer, all the UI to its own layer and then tell the cameras to render just the relevant layer. This means that I can make my particles at a constant size because they are always rendered with the same camera settings, it's always in the range of an orthographic size 1 camera. The Max Particle Size in the particle renderer settings can be useful in that situation too. You can add RectTransforms to your particles and do proper alignment this way too.




This does have some drawbacks. When previewing your particles in the editor is a bit more difficult because the sizes won't match in the scene view but they should match just fine when the game is running because the UI and particles are both being rendered in the same space because the cameras are aligned and have the same scale. You should also be able to see them in the editor using the camera previews. It also only allows the approach of particles on top of all UI or below all UI. This is acceptable to us but I understand it won't be for some.

 

1. Add Canvas Component to GameObject which you want to put on top of the particle.
2. Selected the Overrirde sorting opt，Set “Sort Layer” and “Order”
3. set particle renderer's “sorting Layer” and “Order”

 

bingheliefeng, you are absolutely right about the sorting.
This is working quite nicely. At least in Unity 5, not quite sure whether in Unity 4.6 as well.
The Sorting Layers within Particle Systems and the UI seem to work fine now, good to know Unity is actually improving some particle stuff.

Also, just adding a RectTransform component to a ParticleSystem and using it like a normal UI-element works just fine, and rearranges with different resolutions etc.

About scaling particles within the new UI system: as i see it, scaling is not possible at the moment.
It was possible to perfectly scale particle systems via code, by using e.g.:
SerializedObject.FindProperty("Porpertyname").floatValue *= ScalingValue;
Unfortunately SerializedObject is not accessible in runtime anymore.
(http://forum.unity3d.com/threads/ac...dobject-serializedproperty-in-runtime.205738/)

Here is a hacky workaround which may work for some cases:
http://forum.unity3d.com/threads/shocked-particle-emitter-not-scalable-solved.104817/
But it does not scale a complete particleSystems with curves and everything, so still no soultion.

 

None of the workarounds here work for me or are acceptable enough to use. I this going to be fixed? I want to be able to use particles in my UI.

 

Any news on this topic ?

 

I'm also interested in a solution.

@tawsm , how did you manage to make particles appear on a Screen Space - Overlay Canvas?
Adding particles to an UI seems kinda vital to me, it's weird it's so tricky.
I'm using Unity 4.6.3f1 Pro.

 

Is this not possible yet?

 

Still not implemented no.

 

work arround is render to texture...and then paint as image.....

 

@NeatWolf It's rather simple, here's my camera and canvas setup

 

The important bit is "Screen Space - Overlay Canvas" - Screen Space Camera works fine

 

Can anyone tell is it working in Unity 5.3?????

 

Still no. It will be mentioned in the release notes when its been done.

 

Particle System Scaling - Not working for velocities
Update:

the 5.3 patch release claims full particle scaling, but as i see it velocities over lifetime are not being scaled at all. Here is an example, size scales, velocities don't:

Am i mistaken? This is crucial when scaling particle systems, so will it come in the future?

I also have one other question: the patchnotes say "Particles: All UI settings exposed to scripting API", are they read only or can i access the velocities this way and scale them by hand?

If the particle scaling would work properly particles could be used within the UI without any issues! (Except some minor workarounds with the cameras/canvases/sorting)

Cheers

 

Neglecting this issue for so long and one can imagine the Unity office is full of Ostrich programmers... On the surface Unity appear brilliant, but diving deeper and oddities like this becomes a conundrum.

 

Your comment doesn't bring any value to this matter. At best its a minor annoyance, at worst its a demoralizing distraction.
This has been a point of contention for quite a while but as they have said that it is on their radar all we can do is wait. It sucks to not have the feature but I expect that they are not avoiding it because they are lazy, it is likely that they have higher priority issues to deal with. In the meantime there are a couple of solutions above in this thread that provide a work-around. None of them are great but in a pinch they will give you a result close to what you need.

 

Any one has a better solution on this topic?

 

When you create a Canvas-Object, there should be a Canvas Scaler Component attached to the object. Setting the UI Scale Mode to Scale With Screen Size worked for me.

 

The amount of "bugs" which goes under the carpet / neglected or ignored is Ridiculous

 

I'm not sure if this will help anyone but this is how we've set up our main UI screen particles. This is using Unity 5.4.0f3.

What is being done here is that we have a canvas set to 'Camera Space' with the sort order set to 'Background Image'. The rest of the UI is set up as per normal. The Particle system is placed outside of the canvas parent but its Z position in the scene is between the background RawImage and the remainder UI components. The camera projection type doesn't seem to make a difference.

Setting the canvas sort order seems to be the key to making this all work.

Our particle system is fairly simple, just falling particles to add a bit of flair to the screens, but I would think it would work for more elaborate setups as well.

 

Hello, you can use this plugin to add particles in the UI: http://u3d.as/AUf
It's supports anchors, sorting inside UI elements, Mask, and RectMask2D, etc.
Works with all kind of canvases, and no need to use second camera or canvas.
Quick tutorial here:

 

Would it work on scaled, or stretched billboards in orthographic view, or nested particle VFX as well?

 

Reply
It's supports nested particles, but you should set UIParticle script to all nested particle system manually.

Unfortunately it's currently not supported stretched billboards,
I think it will be in the next update.

 

Since the Unity 5.4 update particle scaling works just fine now. Sorting issues can be solved with various methods posted above. Here is the script i am using for scaling and the latest version on GitHub: https://gist.github.com/TobiTobascoNollero/927eb9dc812f86c88421dc5747d86688

Code (CSharp):

1.  
2. using UnityEngine;
3. using System.Collections;
4. using System.Collections.Generic;
5. using UnityEngine.UI;
6.  
7. [RequireComponent(typeof(Canvas))]
8. public class AutomaticParticleScaling : MonoBehaviour {
9.  
10.     //The default orthographic size of the gui camera
11.     public float refCameraOrthSize = 384f;
12.     public bool useCameraOrthSize = false;
13.  
14.     private Canvas refCanvas;
15.     private Camera refCam;
16.     private float scale;
17.     private ParticleSystem[] particleSystems;
18.     private game.gui.menus.OptionsMenu optionsMenu;
19.     private float scaleOld = 1f;
20.  
21.     //Initialization
22.     void Start() {
23.         // init canvas and camera
24.         refCanvas = GetComponent<Canvas>();
25.         refCam = refCanvas.GetComponent<Camera>();
26.  
27.         // get particle systems
28.         particleSystems = this.gameObject.GetComponentsInChildren<ParticleSystem>();
29.  
30.         // add resolution change listener here
31.         //optionsMenu = game.gui.menus.OptionsMenu.Instance;
32.         //if (optionsMenu != null)
33.         //    optionsMenu.resChangeListener += StartScaling;
34.  
35.         // apply scale
36.         ApplyScale();
37.     }
38.  
39.     // ** Delay hack because our resolution change needs some time to change the resolution
40.     void StartScaling() {
41.         StartCoroutine(StartDelayedScaling());
42.     }
43.  
44.     IEnumerator StartDelayedScaling() {
45.         yield return new WaitForSeconds(0.5f);
46.         ApplyScale();
47.     }
48.     // **
49.  
50.     //Scale all child particle systems
51.     public void ApplyScale() {
52.         // get new scale
53.         float scaleNew = 1f;
54.         if (useCameraOrthSize) {
55.             if (refCam != null)
56.                 scaleNew = (refCameraOrthSize / refCam.orthographicSize);
57.         } else {
58.             scaleNew = refCanvas.transform.localScale.x;
59.         }
60.  
61.         // check to only scale if necessary
62.         if (scaleNew == scaleOld) {
63.             return;
64.         }
65.  
66.         // scale to 1
67.         scale = (1 / scaleOld);
68.         foreach (ParticleSystem p in particleSystems) {
69.             if (p != null)
70.                 ScaleParticleValues(p);
71.         }
72.  
73.         // scale to new scale
74.         scale = scaleNew;
75.         scaleOld = scaleNew;
76.         foreach (ParticleSystem p in particleSystems) {
77.             if (p != null)
78.                 ScaleParticleValues(p);
79.         }
80.     }
81.  
82.     //Scale individiual particle system values
83.     private void ScaleParticleValues(ParticleSystem ps) {
84.         //BASE MODULE
85.         var main = ps.main;
86.         //StartSize
87.         ParticleSystem.MinMaxCurve sSize = main.startSize;
88.         main.startSize = MultiplyMinMaxCurve(sSize, scale);
89.         //Gravity
90.         ParticleSystem.MinMaxCurve sGrav = main.gravityModifier;
91.         main.gravityModifier = MultiplyMinMaxCurve(sGrav, scale);
92.         //StartSpeed
93.         ParticleSystem.MinMaxCurve sSpeed = main.startSpeed;
94.         main.startSpeed = MultiplyMinMaxCurve(sSpeed, scale);
95.  
96.         //MODULES
97.         //Shape (divided instead of multiplied)
98.         var shape = ps.shape;
99.         if (shape.enabled) {
100.             shape.radius /= scale;
101.             shape.box = shape.box / scale;
102.         }
103.         //Emisison Rate Time (divided instead of multiplied)
104.         ParticleSystem.EmissionModule em = ps.emission;
105.         if (em.enabled) {
106.             //Time
107.             ParticleSystem.MinMaxCurve emRateT = em.rateOverTime;
108.             em.rateOverTime = MultiplyMinMaxCurve(emRateT, scale, false);
109.             //Distance
110.             ParticleSystem.MinMaxCurve emRateD = em.rateOverDistance;
111.             em.rateOverDistance = MultiplyMinMaxCurve(emRateD, scale, false);
112.         }
113.  
114.         //Velocities
115.         ParticleSystem.VelocityOverLifetimeModule vel = ps.velocityOverLifetime;
116.         if(vel.enabled) {
117.             vel.x = MultiplyMinMaxCurve(vel.x, scale);
118.             vel.y = MultiplyMinMaxCurve(vel.y, scale);
119.             vel.z = MultiplyMinMaxCurve(vel.z, scale);      
120.         }
121.  
122.         //ClampVelocities
123.         ParticleSystem.LimitVelocityOverLifetimeModule clampVel = ps.limitVelocityOverLifetime;
124.         if(clampVel.enabled) {
125.             clampVel.limitX = MultiplyMinMaxCurve(clampVel.limitX, scale);
126.             clampVel.limitY = MultiplyMinMaxCurve(clampVel.limitY, scale);
127.             clampVel.limitZ = MultiplyMinMaxCurve(clampVel.limitZ, scale);
128.         }
129.  
130.         //Forces
131.         ParticleSystem.ForceOverLifetimeModule force = ps.forceOverLifetime;
132.         if (force.enabled) {
133.             force.x = MultiplyMinMaxCurve(force.x, scale);
134.             force.y = MultiplyMinMaxCurve(force.y, scale);
135.             force.z = MultiplyMinMaxCurve(force.z, scale);
136.         }
137.     }
138.  
139.     //Multiply or divide ParticleSystem.MinMaxCurve with given value
140.     private ParticleSystem.MinMaxCurve MultiplyMinMaxCurve(ParticleSystem.MinMaxCurve curve, float value, bool multiply = true) {
141.         if (multiply) {
142.             curve.curveMultiplier *= value;
143.             curve.constantMin *= value;
144.             curve.constantMax *= value;
145.         } else {
146.             curve.curveMultiplier /= value;
147.             curve.constantMin /= value;
148.             curve.constantMax /= value;
149.         }
150.         MultiplyCurveKeys(curve.curveMin, value, multiply);
151.         MultiplyCurveKeys(curve.curveMax, value, multiply);
152.         return curve;
153.     }
154.  
155.     //Multiply or divide all keys of an AnimationCurve with given value
156.     private void MultiplyCurveKeys(AnimationCurve curve, float value, bool multiply = true) {
157.         if (curve == null) { return; }
158.         if (multiply)
159.             for (int i = 0; i < curve.keys.Length; i++) { curve.keys[i].value *= value; }
160.         else
161.             for (int i = 0; i < curve.keys.Length; i++) { curve.keys[i].value /= value; }
162.     }
163. }

 

Does this also work with nested particle systems containing other systems using every type of scaling method?

 

Yeah sure does. If you just use it like it is though, you should keep in mind to set your particle systems to a scale of 1. Otherwise you will scale values like startSize, startSpeed etc. twice (through script and through unitys build-in, but incomplete, particle scaling method).

 

Updated the script to work with Unity 5.5. GitHub version here:
https://gist.github.com/TobiTobascoNollero/927eb9dc812f86c88421dc5747d86688

 

Just a quick question, if the scale of the particleSystem works now, why is your script modifying all the attributes seperately?

 

Are you referring to this comment of me? "Since the Unity 5.4 update particle scaling works just fine now."
If so, i should have said, scaling of particle curves via script works just fine now.

Scaling of ParticleSystems with the Unity build-in method still doesn't work as intended (because it only scales the size of the particles) and is basically useless as soon as you have velocities and forces inside your ParticleSystem.
That's why you need to scale all attributes seperately.

 

Yeah, I was adressing you. I was a bit confused since when I just scaled my particle system everything seemed to work but your script was causing some issues for me. But I might have just been generally confused and not looked closely.

 

What kind of issues did you get? The script had some bugs, should be fixed now though.

 

Hi, any update in the later version for ugui with particle system

 

I guess not. Just wait ANOTHER 2.5 years and maybe they will....or not.

 

I need this too.

 

Really need this too, any news about 2017.1?

 

Hi, I've noticed that many people are looking for solution for using particles in GUI in efficient way. So I've released new plugin: UI Particle System. With it you don't need to deal with sorting layers or multiple canvases. It works like depth buffer but for GUI. Additionally it can clip particles in scroll views, etc. so you can make a lot of cool game effects or even card animations like in Hearthstone.

More you can find at forum thread: https://forum.unity.com/threads/ui-...-plugin-for-particles-in-gui-released.514447/
And of course on Asset Store: https://www.assetstore.unity3d.com/en/#!/content/108285