Привет. Маски можно увидеть в большинстве фото и видеоредакторов. В Фотошопе закругления, обрезки и другие подобные задачи и вовсе принято делать только с их помощью. Ведь так мы можем получить отредактированное изображение сохранив оригинал.
В 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 элементы самых разных форм, а также использовать многократно одни и те же ресурсы с разным результатом.
Очень удобно!
