Эффекты Shadow и Outline в Unity GUI.

Один из способов сделать текст с тенью – это отобразить текст два раза, второй раз с небольшим смещением и с цветом тени позади первого. Такое решение часто используют, если графическая библиотека не дает собственных механизмов отображения теней.

Неудобство такого подхода в том, что на каждый текст с эффектом тени нужно создавать два объекта и если текст динамический, то следить за тем, чтобы текст обновлялся в обоих объектах.

Простой текст и текст с тенью, созданной вручную

Unity GUI, доступная с версии 4.6, позволяет на текст наложить два эффекта: «Shadow» и «Outline». Как можно догадаться из названия – первый добавляет тень, второй – обводку.

Но эти эффекты можно применить не только к тексту (Text), но и к картинке (Image). А так как текст и картинка основные кирпичики для всех остальных элементов UI, то и к любому другому UI элементу. Например к кнопке:

Кнопки с эффектами Shadow и Outline

Если мы заглянем в исходный код компонентов Shadow и Outline, то увидим, что компоненты делают по сути то же самое: Shadow – создает копию геометрии UI компонента и смещает ее на несколько пикселей в одну сторону, а Outline – создает четыре копии и смещает их в четырех противоположенных направлениях по x и y, и таким образом, достигается эффект обводки.

Давайте подумаем, чего еще можно добиться используя эти компоненты:Простая обводка для выделенных объектов.Не надо рисовать два состояния для каждой картинки или производить манипуляции с цветом, можно просто добавить эффект Outline и сделать его активным для выделенного объекта.

Выделение картинки путем включения компонента Outline

Например, можно отобразить несколько самолетов и их тени на земле, а так же, путем изменения одного параметра, сымитировать движение солнца.- тени объектов, которые “уходят дальше”, чем обычные тени UI элементов.(Конечно же никто не будет делать механику игры на GUI элементах, но если какая-то простая сцена и по-быстрому, то почему бы и нет).

Тени самолетов и смещение со временем

Эффект раздвоения в глазахДопустим, вы хотите наложить эффект раздвоения на HUD, когда ваш герой получает сильный удар или выпивает много алкоголя, такой вот простой скрипт, навешанный на все UI объекты окна, поможет достичь нужного результата.

Эффект раздвоения в UI элементах

Пишите в комментариях другие идеи, как можно выжать из компонентов Shadow и Outline другие эффекты и дополнительную пользу.

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x