Фонарик на кнопку в темноте UI как в Tutoriale

Дата: Воскресенье, 31 Мая 2020, 20:18 | Сообщение # 1

частый гость

Сейчас нет на сайте

Здорово ребят! Хочу сделать Туториал как в некоторых играх Идея такова - Все затемняется в прозрачно черный цвет UIшкой и типа фонарика показывающие на UI кнопки (он как бы выжигает черный UI) но столкнулся с проблемой.
У меня было 2 варианты в голове. 1 На кинуть маску кружка на этот черный UI и потом этот кружок двигать к нужной кнопки, но не получилось маска не выжигала ( я нарисовал кружок белый ) в черном полотне дырку. Вариант 2 - в Painte нарисовать черное полотно ( которое будет 2 раза больше экрана) с дыркой по середине. И перемещать этот черный фон относительно кнопок которые нужно нажать. 2 Вариант мне не нравится (вдруг мне понадобиться сделать какую-то фигуру например. Что вырезать в ФШ) Как ребят это делается элегантно???

Сообщение отредактировал MegaMan11 - Воскресенье, 31 Мая 2020, 20:20

drcrack

Дата: Воскресенье, 31 Мая 2020, 23:10 | Сообщение # 2

старожил

Сообщений: 2634

Сейчас нет на сайте

Цитата

вдруг мне понадобиться сделать какую-то фигуру например. Что вырезать в ФШ

Ну и вырежешь. В чем проблема-то вообще

Core

Дата: Понедельник, 01 Июня 2020, 03:24 | Сообщение # 3

заслуженный участник

Сообщений: 575

Сейчас нет на сайте

MegaMan11, Я ничего не понял. Можно точней?
Если нужно от рисовать кнопку поверх темноты, то достаточно просто задать ей значение z ближе к камере, чем темнота. Это делается в инспекторе.
Например:
Z темного сурфейса = 0.2
Z кнопки = 0.1

drcrack

Дата: Понедельник, 01 Июня 2020, 19:02 | Сообщение # 4

старожил

Сообщений: 2634

Сейчас нет на сайте

Цитата

MegaMan11, Я ничего не понял.

Но тем не менее написал бесполезный ответ не в тему. Зачем?

Цитата Core (

)

Если нужно от рисовать кнопку поверх темноты, то достаточно просто задать ей значение z ближе к камере, чем темнота. Это делается в инспекторе.
Например:
Z темного сурфейса = 0.2
Z кнопки = 0.1

К тому же речь о UI, который не сортируется по Z, а просто рисуется в порядке как он есть в иерархии

Сообщение отредактировал drcrack - Понедельник, 01 Июня 2020, 21:04

Storm54

Дата: Вторник, 02 Июня 2020, 13:05 | Сообщение # 5

постоянный участник

Сообщений: 416

Сейчас нет на сайте

Один из самых элегантных вариантов:
1. Сохранить в текстуру оригинальное изображение экрана, до того как затемнили экран
2. Затемнить экран
3. Сохранить в текстуру затемненное изображение экрана
4. Рисовать в нужном месте маску, которая и будет являться подсветкой, только придется написать определенный алгоритм, например такой: берем цвет незатемненной текстуры и цвет затемненной текстуры, после чего лерпаем, используя в качестве веса значение альфа канала из маски.
Вот, накидал проект за пару минут: GitHub

За основу был взят Default UI шейдер из Unity 2019. Можно дополнительно оптимизировать алгоритм, отказавшись от захвата оригинальной текстуры, т.к. можно рассчитывать значение каждого оригинального пикселя, просто разделив значение затемненного пикселя на множитель, который применялся при затемнении экрана.

Сообщение отредактировал Storm54 - Вторник, 02 Июня 2020, 13:33

drcrack

Дата: Вторник, 02 Июня 2020, 13:50 | Сообщение # 6

старожил

Сообщений: 2634

Сейчас нет на сайте

Цитата

Никак не пойму к чему этот гемор если можно использовать аппаратный блендинг
https://docs.unity3d.com/Manual/SL-Blend.html
Который к тому же и быстрее будет
PS Это решение мало чем отличается от "варианта 2" по производительности тока реализация на порядок сложнее чем просто нарисовать дырку и добавить один обьект на сцену

Сообщение отредактировал drcrack - Вторник, 02 Июня 2020, 13:51

Storm54

Дата: Вторник, 02 Июня 2020, 14:06 | Сообщение # 7

постоянный участник

Сообщений: 416

Сейчас нет на сайте

Это просто более элегантное решение, особенно, если понадобится нарисовать несколько подсвечиваемых мест - достаточно раскидать маски по нужным координатам.
Да, можно дополнительно оптимизировать, полностью отказавшись от GrabPass и использовать Blend, но это уже детали.