Intro

<aside> 🛠

In this project, I explored SDF math while building an early reusable material-value tweening system (DoTween based). I applied it to a mockup level select screen in Unity.

Features:

Polygon buttons with shape variant customisability, for quick iteration.
SDF resolution independence, and avoidance of texture usage.
Fluid animations possible - shape morphing/spinning/masking. Shader based, reducing possible canvas rebuilds.
Inspector-driven animation states. For friendly artist tween adjusting.
Modular tweens that can be applied to drive any material property.

This project helped me combine shader creation, motion design, UI implementation, and tool building - helping to build more skills in 2D technical art, specifically focusing on UI.

</aside>

Final Result

Playable Webgl Demo: https://lysard.itch.io/ui-sdf-animation

Process video:

https://youtu.be/m4B-wNlngwc?si=uwrVfa0orW2KDkHW

Interaction demo with 2 different setups:

https://youtu.be/e90xriRhSkY

The system allows artists to:

Build UI elements from modular SDF shapes.
Preview different states visually through materials.
Apply transitions without coding.
Customize timing, easing, and target values.
Reuse the script on elements multiple places.

Shader System (SDF UI Shapes)

SDF shader supporting adjustable polygon shape.
Separate controllable border with settings for animation.
Built using HLSL functions inside Shader Graph.
Masking settings for interesting effects.

Intro

Features:

Final Result

The system allows artists to:

Shader System (SDF UI Shapes)

Animation System (DOTween + Material States)