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?
Hi, extending support for mixed mode rendering is on our roadmap, but we donât support this in a trivial way currently. You can use 2 canvasâ with render layers to achieve this at the moment.
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. 
So the real solution is to break canvas batching and insert the particle system at that stage of the render pipeline. We donât support this yet, but itâs on the roadmap. We will be doing similar for all rendereres at some stage
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:
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:
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.
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.
(Accessing data like SerializedObject/SerializedProperty in runtime - Unity Engine - Unity Discussions)
Here is a hacky workaround which may work for some cases:
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
