Unity — Используем маски для UI и спрайтов

Привет. Маски можно увидеть в большинстве фото и видеоредакторов. В Фотошопе закругления, обрезки и другие подобные задачи и вовсе принято делать только с их помощью. Ведь так мы можем получить отредактированное изображение сохранив оригинал.

В Unity маски используются аналогично. В документации они описаны так:

Маска ограничивает (т. е. «маскирует») дочерние элементы формой родителя. Таким образом, если ребенок больше родителя, то будет видна только та часть ребенка, которая вписывается в родителя.

И сегодня мы рассмотрим пару стандартных масок для UI, один бесплатный ассет, который делает это немного лучше стандартных и маски для спрайтов.

Идея взята из этого видео: Unity MASKING — Ultimate Guide | Unity UI & Sprite Tutorial

Rect Mask 2D

Эта маска чётко обрезает всё, что находится за пределами родителя. Представим такую ситуацию, где в родительском прямоугольнике находится дочерний Image.

Как видите, родитель намного меньше изображения. Добавляем родителю компонент Rect Mask 2D.

Результат увидим сразу же:

Более интересный эффект можно получить, меняя параметр Softness:

А если добавить родителю свой Image, то вместо прозрачного фона мы получим плавный переход между изображениями:

Но в данном случае мы всяк получаем прямоугольную форму, что не всегда подходит. Переходим к следующему решению.

Mask

Далее нам нужен родитель с компонентом Image, который определит вид маски, и оставим тот же дочерний элемент.

Родитель:

Ребёнок:

Добавляем родителю компонент Mask:

И смотрим на более интересный результат:

Но, можно заметить, что появились очень острые углы.

Проблема этой маски в том, что результат выглядит достаточно небрежно. Помогут с этим народные умельцы. А именно mob-sakai, который сделал свою версию этой маски, но с опциями сглаживания. Об этом далее.

SoftMaskForUGUI

Найти этот ассет можно по ссылке: https://github.com/mob-sakai/SoftMaskForUGUI

Добавляем его в проект при помощи Package Manager по этой URL.

Заменяем дефолтную Mask на Soft Mask.

Дочерние элементы теперь должны наследовать Soft Maskable:

Результат вот, но появилась обводка от маски.

Это можно легко скрыть в настройках:

И теперь сравним вид без сглаживания, и с ним:

Сглаживание тоже относительное, конечно. Но мне кажется, что на камере второй вариант выглядит куда приятнее.

Sprite Mask

Варианты выше предусмотрены для UI, а вот эту можно спокойно использовать с обычными спрайтами на сцене. К примеру, для создания головоломок, где обзор ограничен. Или для игр, где нужно искать какие-то предметы.

Для наглядного теста добавим на сцену две картинки:

И пустой объект, куда добавим компонент Sprite Mask:

Теперь у нас есть маска, но нужно указать поведения для спрайтов.

Первому укажем, что его нужно рисовать снаружи маски:

А второму – внутри:

Результат:

Да, лого тут не лучшее решение. Что-то круглое будет выглядеть интереснее:

Итак. На этом с масками у меня всё. Благодаря им можно достаточно просто создать UI элементы самых разных форм, а также использовать многократно одни и те же ресурсы с разным результатом.

Очень удобно!

Оставьте комментарий

Пролистать наверх