Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.

Unity UI UI Effects and Particles

Discussion in 'UGUI & TextMesh Pro' started by enchiridion, Nov 9, 2017.

  1. enchiridion

    enchiridion

    Joined:
    Oct 29, 2014
    Posts:
    57
    Hi!

    I am trying to add shimmers, shines, sparkles, particle awesomeness to my games UI, but cannot find any information regarding the subject online.

    My simplest guess would to just have tons and tons of sprite animations, but that is very file size and memory heavy.

    Does anyone have links, references, ideas how to tackle this? I find it quite surprising that there's nothing online about this...
     
  2. Johannski

    Johannski

    Joined:
    Jan 25, 2014
    Posts:
    779
    As for particles:
    Going the easy way with screenspace -camera you can just add a normal particle system.
    As for screenspace overlay you could use this:
    https://github.com/mob-sakai/ParticleEffectForUGUI
    or
    https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/wiki/Controls/UIParticleSystem
    or a separate camera rendering the particles: https://techblog.king.com/showing-particles-in-a-screen-space-overlay-canvas/

    As for other effects, I would say a lot can be done with shaders. Here is a nice example:
     
    Last edited: Feb 3, 2019
  3. enchiridion

    enchiridion

    Joined:
    Oct 29, 2014
    Posts:
    57
    Thanks for your reply.

    That was an extremely interesting video! It seems like shaders are the way to go, though even this I cannot find any information on (for UI specifically).

    Anyone else have links/resources/documentation on shaders for pimping up UI?
     
  4. enchiridion

    enchiridion

    Joined:
    Oct 29, 2014
    Posts:
    57
    Some specific examples:

    1) UI image sequence or mesh warp+shader or other?


    2) how does one do this to UI images?


    3) how to achieve animatable lighting effects like this for UI images?


    4) this tutorial used a sprite sheet animation but is it possible to achieve with particles?


    Remember I am asking how to achieve this in a UI Canvas. I know this is pretty straight forward with 2D SpriteRenderer but not so much in the UI Canvas.
     
    Mehrdad995 likes this.
  5. enchiridion

    enchiridion

    Joined:
    Oct 29, 2014
    Posts:
    57
    The lack of activity on this thread tells me no one knows anything about this or it's simply not possible, both being very problematic...
     
    clamum, nxtboyIII, florianBrn and 4 others like this.
  6. Johannski

    Johannski

    Joined:
    Jan 25, 2014
    Posts:
    779
    1.) Pretty sure just an image sequence (Changing the color inside, writing a shader for that would be too much overhead for just this little detail)
    2.) Those are all shaders
    3.) You could just blend between two graphics (one with glow, the other one without)
    4.) For sure you can do that with just particles. To see how you connect them to the canvas, see my first post.

    I would say the lack of activity is because not that many developers know how to write shaders (and those who do are probably more active in the shader subforum) and because you are not very precise with your second question.
    I would recommend, to take a closer look at shaders. The example I posted could be easily adapted to a ui shader.

    So here are the steps I would recommend:
    1.) Learn writing shaders in general (take a look at this link collection, especially Shaderslab and Alan Zucconi will be interesting for you).
    2.) Take a look at the default ui shader from unity, you can download it here: https://unity3d.com/unity/qa/patch-releases
    Download Built In Shaders from the unity version you are interested in. The default shader is in DefaultResourcesExtra\UI\UI-Default.shader
    3.) Play around with that shader and try to do some simple stuff with it
    4.) Implement effects you learnt in step one on the ui shader.

    I hope that helps :)
     
  7. Johannski

    Johannski

    Joined:
    Jan 25, 2014
    Posts:
    779
    You can get it to work with a screenspace camera canvas with a normal particle System:
    upload_2019-2-6_14-24-18.png

    And those are the simple settings for the Particle System:
    upload_2019-2-6_14-25-10.png

    Sorting will be not that easy though. I think it is not possible to be paritally in fornt and partially behind an UI element, you would need two particle systems for that. But particle Systems do support sorting through sorting layers and sorting order, so you can get more complex. Since I really like Screenspace Overlay Canvases I think this solution is the better choice: https://github.com/mob-sakai/ParticleEffectForUGUI
     
  8. Romaleks360

    Romaleks360

    Joined:
    Sep 9, 2017
    Posts:
    65
  9. travis_unity746

    travis_unity746

    Joined:
    Nov 12, 2018
    Posts:
    14
    If you use camera stacks in URP, you can position your particle systems either behind or in front of UI elements, but still have them overlay the main scene cam: https://bdts.com.au/tips-and-resour...p-using-overly-cameras-and-camera-stacks.html
     
  10. castor76

    castor76

    Joined:
    Dec 5, 2011
    Posts:
    2,427
    Is there way to fade the particle system according to the canvas group alpha value?
     
  11. Johannski

    Johannski

    Joined:
    Jan 25, 2014
    Posts:
    779
    Take a look at the repo linked above (https://github.com/mob-sakai/ParticleEffectForUGUI). There you can see which methods support canvas group alpha out of the box. The normal particle system would need some kind of listener script to refresh its transparency on changes.
    ezgif-4-aac09bd1f9eb.gif
     
    Zethros likes this.
  12. Deankovitch

    Deankovitch

    Joined:
    Sep 28, 2012
    Posts:
    38
    Hi there,

    I created the Canvas Particle System, an asset that can create UI particles fully compatible with Unity's UI Render Pipeline.

    Within this asset you can:

    • Use sibling index to control particles z position
    • Add particles in front, behind, or between any UI element
    • Emit particles from: point, directional, line, rect, and circular or using any recttransform in the scene
    • Works on all canvas types:
    • Works on all platforms: mobile, desktop, or console
    • Control all emitter attributes programmatically
    • Animate any emitter or particle attributes
    • Add multi-texture particles
    • Particles with animates sprites
    • Emit particles from images
    • Use UI masks
    • Emit from local or world spaces
    • Render Shuriken particle on UI
    • And more
    https://assetstore.unity.com/packages/tools/particles-effects/canvas-particle-system-64134
     
  13. clamum

    clamum

    Joined:
    May 14, 2017
    Posts:
    61
    Oh man that first link (Particle Effect for uGUI by mob-sakai) is awesome! Super easy to use. My mobile game is already using Screenspace - Overlay and when I've changed that in the past to another option it messes up the whole UI so I really didn't want to do that. Thanks for the links!