com.ellyality.ui.ui-particle
v4.6.2
Published
This package provides a component to render particle effects for uGUI. The particle rendering is maskable and sortable, without the need for an extra Camera, RenderTexture, or Canvas.
Downloads
1
Readme
Particle Effect For UGUI (UI Particle)
This package provides a component to render particle effects for uGUI in Unity 2018.2 or later.
The particle rendering is maskable and sortable, without the need for an extra Camera, RenderTexture, or Canvas.
<< 📝 Description | 🎮 Demo | ⚙ Installation | 🚀 Usage | 🛠 Development Note | 🤝 Contributing >>
📝 Description
This package utilizes the new APIs MeshBake/MashTrailBake
(introduced with Unity 2018.2) to render particles through
CanvasRenderer.
You can render, mask, and sort your ParticleSystems for UI without the necessity of an additional Camera, RenderTexture,
or Canvas.
Features
- Easy to use: The package is ready to use out of the box.
- Sort particle effects and other UI by sibling index.
- No extra Camera, RenderTexture, or Canvas required.
- Masking options for Mask or RectMask2D.
- Support for the Trail module.
- Support for CanvasGroup alpha.
- No allocations needed to render particles.
- Compatibility with overlay, camera space, and world space.
- Support for Universal Render Pipeline (URP) and High Definition Render Pipeline (HDRP).
- Support for disabling
Enter Play Mode Options > Reload Domain
. - Support for changing material property with AnimationClip (AnimatableProperty).
- [4.0.0+] Support for 8+ materials.
- [4.0.0+] Correct world space particle position adjustment when changing window size for standalone platforms (Windows, MacOSX, and Linux).
- [4.0.0+] Adaptive scaling for UI.
- [4.0.0+] Mesh sharing group to improve performance.
- [4.0.0+] Particle attractor component.
- [4.1.0+] Relative/Absolute particle position mode.
🎮 Demo
- WebGL Demo (Cartoon FX & War FX)
- Cartoon FX Free & War FX (by Jean Moreno (JMO)) with UIParticle
⚙ Installation
This package requires Unity 2018.3 or later.
Install via OpenUPM
This package is available on OpenUPM package registry. This is the preferred method of installation, as you can easily receive updates as they're released.
If you have openupm-cli installed, then run the following command in your project's directory:
openupm add com.coffee.ui-particle
Install via UPM (using Git URL)
Navigate to your project's Packages folder and open the manifest.json
file. Then add this package somewhere in
the dependencies
block:
{
"dependencies": {
"com.coffee.ui-particle": "https://github.com/mob-sakai/ParticleEffectForUGUI.git",
...
}
}
To update the package, change suffix #{version}
to the target version.
- e.g.
"com.coffee.ui-particle": "https://github.com/mob-sakai/ParticleEffectForUGUI.git#4.6.0",
Or, use UpmGitExtension to install and update the package.
🚀 Usage
UIParticle Component
UIParticle
controls the ParticleSystems that are attached to its own game objects and child game objects.
- Maskable: Does this graphic allow masking.
- Scale: Scale the rendering. When the
3D
toggle is enabled, 3D scale (x, y, z) is supported. - Animatable Properties: If you want to update material properties (e.g.,
_MainTex_ST
,_Color
) in AnimationClip, use this to mark the changes. - Mesh Sharing: Particle simulation results are shared within the same group. A large number of the same effects can
be displayed with a small load. When the
Random
toggle is enabled, it will be grouped randomly. - Position Mode: Emission position mode.
- Absolute: Emit from the world position of the
ParticleSystem
. - Relative: Emit from the scaled position of the
ParticleSystem
.
- Absolute: Emit from the world position of the
- Auto Scaling:
Transform.lossyScale
(=world scale) will be set to(1, 1, 1)
on update. It prevents the root-Canvas scale from affecting the hierarchy-scaledParticleSystem
. - Rendering Order: The ParticleSystem list to be rendered. You can change the order and the materials.
NOTE: Press the Refresh
button to reconstruct the rendering order based on children ParticleSystem's sorting order
and z-position.
Basic Usage
- Select
GameObject/UI/ParticleSystem
to create UIParticle with a ParticleSystem. - Adjust the ParticleSystem as you like.
With Your Existing ParticleSystem Prefab
- Select
GameObject/UI/ParticleSystem (Empty)
to create UIParticle. - Drag and drop your ParticleSystem prefab onto UIParticle.
With Mask
or RectMask2D
Component
If you want to mask particles, set a stencil-supported shader (such as UI/UIAdditive
) to the material for
ParticleSystem.
If you use some custom shaders, see
the How to Make a Custom Shader to Support Mask/RectMask2D Component
section.
Script usage
// Instant ParticleSystem prefab with UIParticle on runtime.
var go = GameObject.Instantiate(prefab);
var uiParticle = go.AddComponent<UIParticle>();
// Control by ParticleSystem.
particleSystem.Play();
particleSystem.Emit(10);
// Control by UIParticle.
uiParticle.Play();
uiParticle.Stop();
UIParticleAttractor component
UIParticleAttractor
attracts particles generated by the specified ParticleSystem.
- Particle System: Attracts particles generated by the specified particle system.
- Destination Radius: Once the particle is within the radius, the particle lifetime will become 0, and
OnAttracted
will be called. - Delay Rate: Delay to start attracting. It is a percentage of the particle's start lifetime.
- Max Speed: Maximum speed of attracting. If this value is too small, attracting may not be completed by the end of
the lifetime, and
OnAttracted
may not be called. - Movement: Attracting movement type. (
Linear
,Smooth
,Sphere
) - Update Mode: Update mode.
- Normal: Update with scaled delta time.
- Unscaled Time: Update with unscaled delta time.
- OnAttracted: An event called when attracting is complete (per particle).
🛠 Development Note
Compares the Baking mesh approach with the conventional approach
Baking mesh approach (=UIParticle)
- ✅ Rendered as is.
- ✅ Maskable.
- ✅ Sortable.
- ✅ Less objects.
Do nothing (=Plain ParticleSystem)
- ✅ Rendered as is.
- ❌ Looks like a glitch.
- ❌ Not maskable.
- ❌ Not sortable.
Convert particle to UIVertex (=UIParticleSystem)
- ✅ Maskable.
- ✅ Sortable.
- ❌ Adjustment is difficult.
- ❌ Requires UI shaders.
- ❌ Difficult to adjust scale.
- ❌ Force hierarchy scalling.
- ❌ Simulation results are incorrect.
- ❌ Trail, rotation of transform, time scaling are not supported.
- ❌ Generate heavy GC every frame.
Use Canvas to sort (Sorting By Canvas )
- ✅ Rendered as is.
- ✅ Sortable.
- ❌ You must to manage sorting orders.
- ❌ Not maskable.
- ❌ More batches.
- ❌ Requires Canvas.
Use RenderTexture
- ✅ Maskable.
- ✅ Sortable.
- ❌ Requires Camera and RenderTexture.
- ❌ Difficult to adjust position and size.
- ❌ Quality depends on the RenderTexture's setting.
Performance test results
| Approach | FPS on Editor | FPS on iPhone6 | FPS on Xperia XZ | |-----------------------------|---------------|----------------|------------------| | Particle System | 43 | 57 | 22 | | UIParticleSystem | 4 | 3 | 0 (unmeasurable) | | Sorting By Canvas | 43 | 44 | 18 | | UIParticle | 17 | 12 | 4 | | UIParticle with MeshSharing | 44 | 45 | 30 |
🔍 FAQ: Why Are My UIParticles Not Displayed Correctly?
If ParticleSystem
alone displays particles correctly but UIParticle
does not, please check the following points:
- Shader Limitation
UIParticle
does not support all built-in shaders except forUI/Default
.- Most cases can be solved by using
UI/Additive
orUI/Default
.
- Particles are not masked
UIParticle
is maskable.- Set
Mask
orRectMask2D
component properly. - Use maskable/clipable shader (such
as
UI/Additive
orUI/Default
)
- Particles are too small
- If particles are small enough, they will not appear on the screen.
- Increase the
Scale
value. - If you don't want to change the apparent size depending on the resolution, try the
Auto Scaling
option.
- Particles are too many
- No more than 65535 vertices can be displayed (for mesh combination limitations).
- Please set
Emission
module andMax Particles
of ParticleSystem properly.
- Particles are emitted off-screen.
- When
Position Mode = Relative
, particles are emitted from the scaled position of the ParticleSystem, not from the screen point of the ParticleSystem. - Place the ParticleSystem in the proper position or try
Position Mode = Absolute
.
- When
- Attaching
UIParticle
to the same object asParticleSystem
Transform.localScale
will be overridden by theAuto Scaling
option.- It is recommended to place
ParticleSystem
underUIParticle
.
- If
Transform.localScale
contains 0, rendering will be skipped. - Displayed particles are in the correct position but too large/too small
- Adjust
ParticleSystem.renderer.Min/MaxParticleSize
.
- Adjust
Shader Limitation
The use of UI shaders is recommended.
- If you need a simple Additive shader, use the
UI/Additive
shader instead. - If you need a simple alpha-blend shader, use the
UI/Default
shader instead. - If your custom shader does not work properly with UIParticle, consider creating a custom UI shader.
Built-in shaders are not supported
UIParticle
does not support all built-in shaders except for UI/Default
.
If their use is detected, an error is displayed in the inspector.
Use UI shaders instead.
(Unity 2018 or 2019) UV.zw components will be discarded
UIParticleRenderer renders the particles based on UIVertex.
Therefore, only the xy components are available for each UV in the shader. (zw components will be discarded).
So unfortunately, UIParticles will not work well with some shaders.
(Unity 2018 or 2019) Custom vertex streams
When using custom vertex streams, you can fill zw components with "unnecessary" data.
Refer to this issue for more information.
Overheads
UIParticle has some overheads, and the batching depends on uGUI.
When improving performance, keep the following in mind:
- If you are displaying a large number of the same effect, consider the
Mesh Sharing
feature in the UIParticle Component.- If you don't like the uniform output, consider the
Random Group
feature.
- If you don't like the uniform output, consider the
- If you are using multiple materials, you will have more draw calls.
- Consider a single material, atlasing the sprites, and using
Sprite
mode in theTexture Sheet Animation
module in the ParticleSystem.
- Consider a single material, atlasing the sprites, and using
How to Make a Custom Shader to Support Mask/RectMask2D Component
Shader "Your/Custom/Shader"
{
Properties
{
// ...
// #### required for Mask ####
_StencilComp ("Stencil Comparison", Float) = 8
_Stencil ("Stencil ID", Float) = 0
_StencilOp ("Stencil Operation", Float) = 0
_StencilWriteMask ("Stencil Write Mask", Float) = 255
_StencilReadMask ("Stencil Read Mask", Float) = 255
_ColorMask ("Color Mask", Float) = 15
[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
}
SubShader
{
Tags
{
// ...
}
// #### required for Mask ####
Stencil
{
Ref [_Stencil]
Comp [_StencilComp]
Pass [_StencilOp]
ReadMask [_StencilReadMask]
WriteMask [_StencilWriteMask]
}
ColorMask [_ColorMask]
// ...
Pass
{
// ...
// #### required for RectMask2D ####
#include "UnityUI.cginc"
#pragma multi_compile __ UNITY_UI_CLIP_RECT
float4 _ClipRect;
// #### required for Mask ####
#pragma multi_compile __ UNITY_UI_ALPHACLIP
struct appdata_t
{
// ...
};
struct v2f
{
// ...
// #### required for RectMask2D ####
float4 worldPosition : TEXCOORD1;
};
v2f vert(appdata_t v)
{
v2f OUT;
// ...
// #### required for RectMask2D ####
OUT.worldPosition = v.vertex;
return OUT;
}
fixed4 frag(v2f IN) : SV_Target
{
// ...
// #### required for RectMask2D ####
#ifdef UNITY_UI_CLIP_RECT
color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
#endif
// #### required for Mask ####
#ifdef UNITY_UI_ALPHACLIP
clip (color.a - 0.001);
#endif
return color;
}
ENDCG
}
}
}
🤝 Contributing
Issues
Issues are incredibly valuable to this project:
- Ideas provide a valuable source of contributions that others can make.
- Problems help identify areas where this project needs improvement.
- Questions indicate where contributors can enhance the user experience.
Pull Requests
Pull requests offer a fantastic way to contribute your ideas to this repository.
Please refer to CONTRIBUTING.md
and develop branch for guidelines.
Support
This is an open-source project developed during my spare time.
If you appreciate it, consider supporting me.
Your support allows me to dedicate more time to development. 😊
License
- MIT
Author
See Also
- GitHub page : https://github.com/mob-sakai/ParticleEffectForUGUI
- Releases : https://github.com/mob-sakai/ParticleEffectForUGUI/releases
- Issue tracker : https://github.com/mob-sakai/ParticleEffectForUGUI/issues
- Change log : https://github.com/mob-sakai/ParticleEffectForUGUI/blob/main/CHANGELOG.md