Particle Effect For UGUI (UI Particle)

This plugin provide a component to render particle effect for uGUI in Unity 2018.2 or later.
The particle rendering is maskable and sortable, without Camera, RenderTexture or Canvas.

<< Description | Demo | Installation | Usage | Development Note | Change log >>

Description

This plugin uses new APIs MeshBake/MashTrailBake (added with Unity 2018.2) to render particles by CanvasRenderer. You can mask and sort particles for uGUI without Camera, RenderTexture, Canvas.

Compares this "Baking mesh" approach with the conventional approach:
Performance test results

Approach	Good	Bad	Screenshot
Baking mesh UIParticle	Rendered as is. Maskable. Sortable. Less objects.	Not support TEXCOORD*.zw components for custom vertex stream
Do nothing	Rendered as is.	Looks like a glitch. Not maskable. Not sortable.
Convert particle to UIVertex UIParticleSystem	Maskable. Sortable. Less objects.	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	Rendered as is. Sortable.	You must to manage sorting orders. Not maskable. More batches.
Use RenderTexture	Maskable. Sortable.	Requires Camera and RenderTexture. Difficult to adjust position and size. Quality depends on the RenderTexture's setting.

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

Features

• Easy to use: the package is out-of-the-box
• Sort particle effects and UI by sibling index
• No Camera, RenderTexture or Canvas are required
• Masking by Mask or RectMask2D
• Support Trail module
• Support CanvasGroup alpha
• No allocations
• Support overlay, camera space and world space
• Support changing material property with AnimationClip (AnimatableProperty)
  
• [4.0.0+] Support 8+ materials
• [4.0.0+] Correct world space particle position 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

• WebGL Demo (Cartoon FX & War FX)
  • Cartoon FX Free & War FX (by Jean Moreno (JMO)) with UIParticle

Installation

Requirement

Using OpenUPM

This package is available on OpenUPM.
You can install it via openupm-cli.

openupm add com.coffee.ui-particle

Using Git

Find the manifest.json file in the Packages folder of your project and add a line to dependencies field.

• "com.coffee.ui-particle": "https://github.com/mob-sakai/ParticleEffectForUGUI.git"

To update the package, change suffix #{version} to the target version.

• "com.coffee.ui-particle": "https://github.com/mob-sakai/ParticleEffectForUGUI.git#4.0.0",

Or, use UpmGitExtension to install and update the package.

For Unity 2018.2

Unity 2018.2 supports embedded packages.

1. Download a source code zip file from Releases page
2. Extract it
3. Import it under Packages directory in your Unity project

How to play demo

For Unity 2019.1 or later

1. Open Package Manager window
2. Select UI Particle package in package list
3. Click Import Sample button
   
4. The demo project is imported into Assets/Samples/UI Particle/{version}/Demo
5. Open UIParticle_Demo scene and play it

For Unity 2018.4 or earlier

1. Select Assets/Samples/UI Particle Demo from menu
2. The demo project is imported into Assets/Samples/UI Particle/{version}/Demo
3. Open UIParticle_Demo scene and play it

About Cartoon FX & War Fx Demo

• It requires free assets (Cartoon FX Free & War FX)
  • by Jean Moreno (JMO)

Usage

UIParticle component

UIParticle controls the ParticleSystems that is attached to its own game objects and child game objects.

Properties	Description
Maskable	Does this graphic allow masking.
Ignore Canvas Scale	Ignore the scale of the root canvas. This prevents it from displaying small even in hierarchy scaling mode of ParticleSystem.
Scale	Scale the rendering. When the 3D toggle is enabled, 3D scale (x,y,z) is supported.
Animatable Properties	If you want 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 randomaly.
Absolute Mode	The particles will be emitted at the ParticleSystem position. Move the UIParticle/ParticleSystem to move the particle.
Rendering Order	The ParticleSystems to be rendered. You can change the rendering order and the materials.

NOTE: Press Refresh button to reconstruct rendering order based on children ParticleSystem's sorting order and z position.

Basically usage

1. Select Game Object/UI/ParticleSystem to create UIParticle with a ParticleSystem.
   
2. Adjust the ParticleSystem as you like.
   

With your existing ParticleSystem prefab

1. Select Game Object/UI/ParticleSystem (Empty) to create UIParticle.
   
2. Drag & drop your ParticleSystem prefab on UIParticle.
   

With Mask or RectMask2D component

If you want to mask particles, set a stencil supported shader (such as UI/UIAdditive) to material for ParticleSystem. If you use some custom shaders, see 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.

Properties	Description
Particle System	Attracts particles generated by the specified particle system.
Distination 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)
OnAttracted	An event called when attracting is complete (per particle).

Development Note

Shader Limitation

UIParticles are based on UIVertex.
Therefore, only xy components is available for each UV in the shader. (zw components will be ignored).
So unfortunately UIParticles will not work well with some shaders.
When using custom vertex streams, you can fill zw components with "unnecessary" data.
https://github.com/mob-sakai/ParticleEffectForUGUI/issues/191

• 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.

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 Mesh Sharing feature in UIParticle Component.
  • If you don't like the uniform output, consider Random Group feature.
    
• If you are using multiple materials, you will have more draw calls.
  • Consider single material, atlasing the sprites, and using Sprite mode in the Texture Sheet Animation module in ParticleSystem.

How to make a custom shader to support Mask/RectMask2D component

Shader tips

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 very valuable to this project.

• Ideas are a valuable source of contributions others can make
• Problems show where this project is lacking
• With a question you show where contributors can improve the user experience

Pull Requests

Pull requests are, a great way to get your ideas into this repository.
See CONTRIBUTING.md.

Support

This is an open source project that I am developing in my spare time.
If you like it, please support me.
With your support, I can spend more time on development. :)

License

• MIT

Author

• mob-sakai

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/upm/CHANGELOG.md