This Unity plugin provides a UI component and utility for rendering UI graphics with features such as outlines, shadows, and rounded corners using signed distance functions (SDF). It supports a variety of simple shapes (e.g., quads, triangles, circles) as well as more complex shapes (currently splines and SDF textures). Additionally, the utility includes an SDF texture painter that allows for editing Bezier curves within the Unity editor and converting them to SDF textures.
Clone this repository with the following command
git clone https://github.com/TLabAltoh/Unity-SDF-UI-Toolkit.git
or
git submodule add https://github.com/TLabAltoh/Unity-SDF-UI-Toolkit.git
add package from git URL ...
https://github.com/TLabAltoh/Unity-SDF-UI-Toolkit.git#upm
CachingPreprocesser
in ProjectSettins/Editor/ShaderCompilation
Vector UI offers advantages in quality and dynamic UI creation. This plugin includes the SDFUI
class, and most of the main components inherit from it. Additionally, most SDFUI
components render graphics as Vector UI using signed distance functions.
[!NOTE]
SDFSpline
is not supported in WebGL platform becauseSDFSpline
usesStructuredBuffer
and WebGL doesn't support it.
To optimise performance, this plugin will batch-render SDFUI
s that have the same properties. This feature was implemented thanks to AAAYaKo.
If the shape is complex (like an SDFSpline
, which might be the only one at the moment), it can significantly impact performance. If you want to use a complex shape while considering app performance, replacing the current shape with an SDFTex
might be more efficient. The SDF Tex Painter
has the ability to edit cubic Bezier curves and convert them to SDF textures (Texture2D
).
Select Create/TLab/UI/SDF/SDF Tex Painter
Left Click
+ Mouse Drag
: Move Anchor HandleCtrl
+ Left Click
+ Mouse Drag
: Move Control HandleShift
+ Left Click
: Select Anchor HandlesShift
+ Ctrl
+ Left Click
: Select all Handles of the Bezier segmentG
: Move selected handlesR
: Rotate selected handlesS
: Scale selected handlesRight Click
: Deselect Anchor Handles or Cancel EditingDelete
: Delete Selected HandleIt is difficult to calculate distance from cubic Bezier mathematically. So SDF Text Painter
converts the cubic Bezier curve to a quadratic Bezier curve based on this code.
This repository is MIT licensed.