UI Toolkit Shadows, Outlines & Glow
KAMGAM
$29.99
(no ratings)
Date |
Price |
---|---|
Date |
Price($) |
11/14(2023) |
29.99 |
11/14(2023) |
14.99 |
11/14(2023) |
14.99 |
11/15(2023) |
14.99 |
11/17(2023) |
14.99 |
11/17(2023) |
14.99 |
11/18(2023) |
14.99 |
11/28(2023) |
29.99 |
11/26(2024) |
29.99 |
Jump AssetStore
Glow, outlines and shadows for your UI Toolkit elements.Links: Manual | Forum✨ This asset is part of the UI Toolkit Bundle. ✨Glow, outlines and soft shadows for your UI Toolkit elements.✔️ Glow & OutlinesChoose two colors and enjoy your glow effect. Choose the same color for both and it's an outline. PLEASE NOTICE: The glow is NOT a BLOOM shader effect (UI Toolkit does not yet support shaders). It's a simple vertex color effect (as shown in the video). *More details below.✔️ ShadowsIf you want real box shadows then you can wrap your elements in the Shadow control. Though you can also emulate shadows pretty fine with the none-destructive glow manipulators.😎 Non-destructive workflow for glow and outlinesThis does not require you to change your existing UI hierarchy. It works with manipulators and thus can be added to any existing UI element. Simply add the component to your UI Document and you are ready to go.Info: For shadows you will have to use the custom "Shadow" control (more and that below or in the manual).💫 AnimationsUse 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).✔️ USS attributesControl each property with the custom glow attributes.✔️ Handy Features* Inherit border colors: Allows you to quickly add outlines matching the border color (and you can tint it too).* 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 & documentationCheck out Kamgam/UIToolkitGlow/Examples.✔️ Supports URP, HDRP and Built-InNo custom shader. It generates geometry and uses vertex colors.✔️ Full Source CodeI 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 (except for the MIT licensed parts, those you can copy). Thank you ❤️✔️ Supports Unity 2021.3+, 2022, 2023, 2024, ... LTSIt 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 uGUI or IMGUI asset. This is for the new UI Toolkit.😢️ This is (not yet) a fully featured USS BOX SHADOW solution. Unity has announced that they will add these eventually (Source).⚠️ Since the outline is drawn within the element you will have to set OVERFLOW to VISIBLE or else the outline mesh will be clipped. If you require the overflow to be hidden then please nest a child inside the element for clipping.⚠️ The glow is NOT a BLOOM shader effect. Sadly UI Toolkit does not yet support custom shaders and therefore we can not add Post-Processing effects to it. The glow in this asset is vertex color based. It will NOT look as nice as a shader based bloom or glow effect. Please take a look at the images and video above, those are taken straight from the Unity demos scenes.⚠️ Animations are done via vertex animations on the CPU (Unity limitation in UI Toolkit). 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.⚠️ If you want a precise outline based on the pixel information of an image (alpha/transparency) then this is NOT the right asset for you. It generates rectangular or rounded rectangular outlines (or more complex ones with animations) but those are NOT based on the pixel (alpha/transparency) information of any image.⚠️ Unity 2021.3 or higher is required (LTS releases strongly recommended).* I know some of these limitations are annoying. Most of them are due to missing features in the UI Toolkit. However, UI Toolkit is still under development by Unity and I am sure things will improve over time.✍️ UsageWorflow A (custom controls)1) Add the Glow or Shadow controls to your UI layout2) Put your content inside.3) DoneWorflow B (non-destructive)1) Add a GlowDocument to your UI Document in the scene2) Configure a new glow config (or reuse an existing one)3) Set a className (like 'glow-100').4) Add the class to the list of classes in UI Builder (or your UXML).5) Done😎 HINT 1:You can either use the UI Toolkit Glow component or UI Toolkit Shadow component to wrap your elements OR you use the GlowDocument component on your UI Document which will then allow you to add and remove effects via class names.🧐 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.RegisterToggleClassOnHover() to easily add hover outlines to your elements.☎️ SupportIf 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 BackgroundBlurred backgrounds for UI Toolkit.✨ UI Toolkit ParticlesParticle Image for your UI.😺 UI Toolkit Visual ScriptingVisual Scripting for Unity (formerly B.O.L.T.)📜 UI Toolkit Scroll View ProInfinite scrolling, animations, controller support, ..✂ Mesh ExtractorSeparate your assets into useful parts within seconds.