Giter VIP home page Giter VIP logo

particleeffectforugui's Introduction

ParticleEffectForUGUI

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


PRs Welcome

<< Description | WebGL Demo | Download | Usage | Development Note | Change log >>

What's new? Please see See changelog

Do you want to receive notifications for new releases? Watch this repo

Support me on Patreon! become_a_patron





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:
(This scene is included in the package.)

Approach Good Bad Screenshot
Baking mesh
(UIParticle)
Rendered as is.
Maskable.
Sortable.
Less objects.
Requires Unity 2018.2+.
Requires UI shaders to use Mask.
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.

Features

  • Sort particle effects with uGUI
  • No Camera, RenderTexture or Canvas are required
  • Masking with Mask or RectMask2D
  • Easy to use
  • Support Trail module
  • Change alpha with CanvasGroup
  • Scaling independent of Transform
  • No heavy allocation every frame
  • All ParticleSystem.ScalingModes and all Canvas.RenderModes are supported. They look almost the same in all modes.
  • Scaled gizmo
  • Animatable material property





Demo

WebGL Demo





Install

Using UnityPackageManager (for Unity 2018.3+)

Find the manifest.json file in the Packages folder of your project and edit it to look like this:

{
  "dependencies": {
    "com.coffee.ui-particle": "https://github.com/mob-sakai/ParticleEffectForUGUI.git#2.2.1",
    ...
  },
}

To update the package, change #{version} to the target version.
Or, use UpmGitExtension.

Using .unitypackage file (for Unity 2018.2+)

Download *.unitypackage from Releases and import the package into your Unity project.
Select Assets > Import Package > Custom Package from the menu.





How to play demo

  • Import UIParticle_Demo.unitypackage into your project.
  • The demo unitypackage exists in Assets/Assets/Coffee/UIExtensions/UIParticle or Packages/UI Particle.
  • Open UIParticle_Demo scene and play it.





Usage

  1. Add your particle effect to canvas.
  2. (Option) If you want to mask particles, set a UI shader such as "UI/UIAdditive" to material for ParticleSystem.
  3. Add UIParticle component to root particle system of your effect from Add Component in inspector.
  4. If your effect consists of multiple ParticleSystems, click "Fix".
  5. Adjust the Scale property to change the size of the effect.
  6. Enjoy!
Requirement
  • Unity 2018.2+ (Tested in Unity 2018.2.0f2)
  • No other SDK are required





Development Note

Animatable material property

Animation clips can change the material properties of the Renderer, such as ParticleSystemRenderer.
It uses MaterialPropertyBlock so it does not create new material instances.
Using material properties, you can change UV animation, scale and color etc.

Well, there is a component called CanvasRenderer.
It is used by all Graphic components for UI (Text, Image, Raw Image, etc.) including UIParticle.
However, It is NOT a Renderer.
Therefore, in UIParticle, changing ParticleSystemRenderer's MaterialPropertyBlock by animation clip is ignored.

To prevent this, Use "Animatable Material Property".
"Animatable Material Property" gets the necessary properties from ParticleSystemRenderer's MaterialPropertyBlock and sets them to the CanvasRenderer's material.





License

  • MIT
  • © UTJ/UCL

Author

mob-sakai
become_a_patron

See Also

particleeffectforugui's People

Contributors

mob-sakai avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.