SDF Image Tutorial | Part 4 | Image modes (Unity UI Outline Asset)

Описание: "SDF Image" is a package designed for Unity that adds a functionality that should have been present from the start - high-quality outlines and shadows for UI elements. Currently, Unity's outline and shadow components for UI suffer from poor visual quality, distorting the shapes of sprites significantly and possessing other limitations.

"SDF Image" enables the creation of high-fidelity outlines and shadows using Signed Distance Fields (SDFs). These textures are generated alongside your regular project textures during the import process. To make them work, you only need to toggle a checkbox in the import settings.

Setting up "SDF Image" is straightforward: create an "SDF Image" component from the context menu, just as you would with any other UI component. Then, enable the "Import SDF" checkbox in the Texture import settings. Afterward, drag and drop a sprite onto the "SDF Image" component. That's it! The "SDF Image" component will now operate similarly to Unity's built-in Image component but with the added functionality of SDF rendering for improved outlines and shadows.

0:00 Intro & Agenda
0:13 Initial SDF setup
0:52 Sliced
1:39 Which images fitted for Sliced
2:38 Complex material
3:00 Tiled (initial image fits it better)
3:36 Fixing bad sprite slicing
3:58 More about Tiled
4:59 Filled
5:46 Fixing Vertical & Horizontal filled artifacts
6:43 Radial 90 & 180
7:38 Recap

🚀Get it on the Asset Store: https://assetstore.unity.com/packages...

▶️WebGL demo: https://nickeltin1.github.io/sdf-imag...

📄My website: https://nickeltin1.github.io/sdf-image/

🧑‍💻Asset tutorials playlist:    • SDF Image