UGUI Animated Outlines & Glow

Links: Manual

🎁 This asset is also part of the UI Toolkit bundle (get assets for up to 50% off).

✔️ Animated Outlines & Glow

Choose two colors and enjoy your glow effect. Choose the same color for both and it's an outline.

😎 Non-destructive workflow

This does not require you to change your existing UI hierarchy. Simply add the Outline component and you are ready to go.

💫 Animations

Use the animation presets to spice up your UI.

You can also get control over each vertex for full customization (this requires some coding, examples included).

✔️ Scripting API

Control each property via code.

✔️ Handy Features

* Split glow width: Control the glow width on each side separately (useful for shadow emulation).

* Glow configs and animations are stored in Scriptable Object assets so you can easily copy and reuse them in your projects. This also makes them very easy to modify via script.

📚 Lots of examples & documentation

Check out Kamgam/UGUIOutlines/Examples.

✔️ Supports URP, HDRP and Built-In

No custom shader. It generates geometry and uses vertex colors.

✔️ Full Source Code

I publish this asset with full source code because as a developer I know how annoying it is to not have source code access. If you like it then please remind others to purchase the plugin. Don't just copy and paste it everywhere. Thank you ❤️

✔️ Supports Unity 2021.3+, 2022, 2023 (aka Unity 6), ... LTS

It may work with earlier versions too but those are not tested anymore.

👇 Things you should know* 👇

(Read this before you buy)

😲️ This is NOT an UI Toolkit or IMGUI asset. This is for uGUI. If you don't know what I am talking about then you are probably fine. If you use USS and UI Builder in your project then check out my UI Toolkit asset instead.

⚠️ Animations are done via vertex animations on the CPU. Take care when animating many elements at the same time. Usually it's not an isse but 'Ye have been warned!'. If you run into any issues please contact support. Maybe we can come up with a custom solution.

⚠️ Unity 2021.3 or higher is required (LTS releases strongly recommended).

✍️ Usage

Add the Glow component to your element and configure it.

Done. It's that simple!

😎 HINT 1:

Animating button outlines is a very nice way to convey the currently focused element.

🧐 HINT 2:

Use the outer vertices info in OnBeforeMeshWrite to only animate the outer vertices. Also the GlowManipulator has a handy "DisplaceVertexOutwardsNormalized()" method to move vertices along a vector pointing outwards.

🤠 HINT 3:

Use the colors of the shadow to emulate glow on your UI elements.

Use GlowUtils.RegisterToggleOnHover() to easily add hover outlines to your elements.

☎️ Support

If you have any questions please write to office[at]kamgam.com. Please be patient, replies may take a few days. Please include your Asset Store Order Nr and the exact Unity version in your request. Please also try upgrading to the most recent LTS version of Unity before asking. Thank you.

❤️ If you like this asset then maybe you'll like these too:

😲 UI Toolkit Blurred Background

Blurred backgrounds for your UI in any render pipeline.

🔍 UI Preview

Preview your UI Prefabs in the inspector.

😺 Smart UI Selection

Skip the hierarchy search. Select the correct element with just one click.

✂ Mesh Extractor

Separate your assets into useful parts within seconds.