How do you do UI VFX?


#1

How do you guys go about creating VFX for UI? I can’t really wrap my head around it. Is it all in flash, or whatever its called… scalesomething? Is it the same tools as when doing “normal” vfx?

If I’m too vague let me know :joy:


#2

If you could give us some more specific examples, we could answer better. There are too many possibilities how it can be done.

I, for one, code/script most of the UI VFX or UI animation. If I use a shader, it is mostly just for an small effect that relies on masking.


#3

By using After Effects for example. You make some animations using shapes layers, particles, etc. I’m not that much into it, that’s mostly UI Designers that does that, at least on our project, that is.

You can check this guy (i’m even the one that suggested this topic on his Patreon ohoho): https://youtu.be/hiRdux33UCs

But more than that, you could just use google and you find stuff like these: https://youtu.be/jRFGtAqYWaI


#4

Scaleform is the name you’re looking for.
As far as I know, you create everything in flash and scaleform is just a middleware that creates a bridge between flash and your game systems.


#5

Thanks, I think this is what I’m looking for. Great stuff :grin:


#6

Specifically for Unity>>
Speaking from experience with Unity, it was painful to make VFX work on all possible aspect ratios, sort them, position them and scale them.

Happened to be using Image Renderers for UI, which also inflict additional headache when in comes to sorting with VFX (it’s canvas based) and default it will sort based on hierarchy (which Particles annoyingly ignore…). I have not used Sprite Renderers for UI, but I would imagine that that component is easier to sort with from a VFX perspective as it has Sorting Layer and Sorting Order exposed by default.

I ended up making UI shaders for things such as glowy buttons and other things that should attach to the UI, as UI shaders would scale with underlying 2d Rect Transform, work with anchors and also sort hierarchically with other similar Renderers.

Other than sorting, scaling and positioning hurdles, I found it was like making regular particle VFX in Unity albeit 2d


#7

Similar to @Ludvig I use image-components and plug in my UI effect materials there. Usually I provide a simple 0-1 Range Slider for others to animate the effects.
Also handy is to have a secondary UI Camera with a bloom script on it while all other post processing is done on the main camera - allowing those fx materials to be glowy while the rest of the UI looks unchanged.