TLabAltoh / Unity-SDF-UI-Toolkit

UI components for Unity that render shapes with outlines, shadows and rounded corners using signed distance functions (SDF). And an SDF texture editor that allows users to edit Bezier curves and convert them to SDF textures within the Unity editor.
MIT License
35 stars 1 forks source link
assets sdf-2d ui uikit unity

Unity-SDF-UI-Toolkit

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.

Screenshot

Overview
Editor for creating Custom Shapes

Requirement

Install

Git

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

Unity Package Manager

add package from git URL ...

https://github.com/TLabAltoh/Unity-SDF-UI-Toolkit.git#upm

Setup

Feature

Vector UI

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 because SDFSpline uses StructuredBuffer and WebGL doesn't support it.

Batch rendering

To optimise performance, this plugin will batch-render SDFUIs that have the same properties. This feature was implemented thanks to AAAYaKo.

SDF Texture Painter

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).

How to make a new one

Select Create/TLab/UI/SDF/SDF Tex Painter

How to Edit a Bezier Path

Implementation Approach

Cu2Qu

It 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.

Lisence

This repository is MIT licensed.

References