Привіти. Встала ось таке завдання: зробити затемнення всього екрану, але в якійсь ділянці зробити як би «дірку».
Як таке можна зробити?
1 Варіант - «Латати» екран
Закладаємо екран шматками - тут думаю зрозуміло) У нас є одна текстура кола, а іншу частину ми закладаємо шматками. Реалізовувати додатково нічого не потрібно, достатньо зверстати. АЛЕ! Як тільки знадобитися кілька «дірок», верстка ускладниться. А якщо потрібно динамічно підсвічувати частина екрану?
2 Варіант - Шейдери
З шейдерами можна зробити дуже багато. Але нам потрібно лише невелика їх частина - відсікання пікселів. Що я б хотів бачити?
1. Якась текстура на весь екран, у якій вибираємо колір і прозорість
2. Друга текстура, яка вже задає форму «дірки», її можна переміщати, обертати і тд, відключати / включати при потребі.
3. Все це повинно працювати в рамках NGUI і UITexture
Спочатку рекомендую прочитати про Stencil:
СТЕНС буфер (Stencil Buffer - буфер шаблону або буфер трафарету) - це додатковий буфер, який відповідає розміру виведеного кадру, тобто кожного пікселя зображення на екрані відповідає своє значення в СТЕНС буфері. Кожен раз коли точка малюється на екран, то крім тестів, на зразок порівняння з глибиною в Z-буфері, вона проходить ще й СТЕНС тест. Тобто, наприклад, можна сказати - точка малюється, тільки якщо в стенсіле значення більше одиниці. З іншого боку, можна сказати, як змінити значення СТЕНС після того як піксель в цьому місці Отріс. 1. www.gamedev.ru/terms/StencilBuffer
2. docs.unity3d.com/Manual/SL-Stencil.html
За основу я брав код по другій посиланням.
Ось так виглядає наш код шейдера для UITexture, яка є дірою
Що потрібно врахувати?
1. Додали текстуру
2. Чи змінили очеред і тип відтворення - Transparent
3. Додали Блендінг, щоб була видна альфа і правильно змішувалася
4. Змінили Фрагментний шейдер. Взагалі це не зовсім потрібна річ, але я зробив так, що прозора частина текстури заливається кольором і альфою з кольору в UITexture, а непрозора частина ставати прозорою. 0.1 - це поріг відмінності прозорого від непрозорого. Милиця коротше)
5. Параметри Stencil кажуть, що малюємо все пікселі, і ставимо в буфер значення 2
Тепер магія - шейдер для повноекранних UITexture
Можете помітити, що тут текстура закоменчена, т е я просто заливаю кольором весь меш, не використовуючи дані про пікселі з самої текстури (так тут її і немає).
1. Найголовніша відмінність - Stencil параметри. Тепер ми малюємо тільки ті пікселі, які не рівні значенням 2, т е все, крім тієї області, в якій отрісовивается попередній меш. Круто?)
2. Колір береться з параметра кольору в UITexture
Ось і все) Приклад роботи нижче. Єдине, якщо дві маски накладаються один на одного, то виходить не оч красиво (перетин текстур дає велику щільність і область затемнюється). Фіксують думаю потрібно Blend параметри. Якщо хто-небудь захоче і поділитися - буду радий і вдячний!
