Does anyone know of any resources for UI Glow? Something, like the text in this Battlefield 4 shot below
Notice how the blue and green text and icons have a sort of “glowy” halo.
I’m open to any sort of shader information, whether it’s a link to a snippet of shader code, an asset on the store, or some general techniques (although, one of the first two options is preferable).
Thanks!
Ah, what a pleasure to find a person, who appreciates the sheer beauty of Battlefield’s interface. It has been steadily degrading since the perfect BF3, but in this case they still use the best parts of it.
I was digging into their frames to find out how they do it. You can dig yourself, btw - just download Intel GPA. You basically install that soft, run Graphics Monitor, run the game, capture a frame (crtl+shift+c or something) and then run Frame Analyzer, load the frame and delve into the magic :).
Long story short, they are using pre-blurred textures. Yes even for the font (they have a complete texture atlass for every letter). The color is added afterwards (textures are shades of grey), but what you see is just aplha-blended textures, nothing else. You should go along the same path, to make things right.
If you are lazy, you can achieve this by writing a custom unlit alpha-blended shader for your UI to allow for a color multiplier variable. The multiplier will allow you to write a value, that has channels higher than 1. Then you turn on HDR on your camera, so that it can capture these values properly. Then you use a bloom shader like the one in the recent Unity’s Post Processing stack and get the bloomed UI. You can even set up two cameras to allow for different bloom for the UI and for the game, but that would be quite wastefull and will slow your game.
No idea how to do it with the Canvas, mb it’s elements allow for custom shaders, I just don’t know.
I’ve used this before. Thanks for the suggestion. I was just lazy and hoping that wonderful souls like yourself would shed some light without me having to crack it open.
I would never have expected the simplest solution… lol.
This is more along the lines I was thinking, but as you mentioned, it’s a lot of extra processing to do for just that effect.
I’m using NGUI, so I’m thinking the baked-in effect in the font sheet will be the way to go.
Thanks!
Just to finish my thoughts, I would actually start by implementing the separate-camera-HDR-blur approach. This would allow to get a feel of how the result works in the game AND iterate on it in an immediate way. I would even set several cameras, one for the icons, one for the text, etc. I would only make the final blurred atlas when I am satisfied with how the interface looks in-game.
