Розширене: Створення власного ефекту
Створення власних візуальних ефектів із нуля.
Створення нового UI-Shader з AI
Завантажити приклади шейдерів з GitHub →
Комбінування існуючих ефектів
Візьміть 2 або більше префабів із бажаними ефектами, розмістіть їх на Canvas та розпакуйте.
Визначте, який шар буде фоновим, а який - переднім. Фоновий шар стане головним батьківським об’єктом на Canvas, наприклад, TouchGlowTrailFairy. Перемістіть префаби інших ефектів як дочірні об’єкти до нього, наприклад, TouchStarTrail.
Для дочірніх ефектів (як TouchStarTrail) видаліть внутрішній InputController і замість нього вкажіть InputController батьківського об’єкта, щоб уникнути дублювання логіки вводу. Також для дочірніх ефектів у Additional Settings встановіть Always Last Sibling і Don’t Destroy on Load у False.
Розташуйте дочірні ефекти у правильному порядку. Налаштуйте всі компоненти в отриманій структурі з пропорційним часом життя, розмірами. Підберіть кольори для досягнення бажаного результату.
TouchGlowUI
Створення ефекту з цим компонентом дозволяє генерувати безперервний слід або математично анімований одноточковий ефект без потреби малювати.
1/5 Посилання (References)
Створіть порожній об’єкт на Canvas і додайте до нього компонент TouchGlowUI. Створіть дочірній об’єкт і додайте до нього компонент InputController. Одразу встановіть систему вводу на Old/New.
Заповніть посилання: в TargetCanvas призначте поточний Canvas. У GlowMaterial тимчасово встановіть Sprites-Default (UI). В Input Controller призначте дочірній компонент InputController. У PointPrefab призначте префаб UI-частинки із папки TouchEffectSystem → Prefabs → Sources. Для ParentObjectForPoints призначте поточний об’єкт або створіть у ньому дочірній контейнер.
Після цього переходьте до налаштувань.
2/5 Налаштування десктоп версії (Desktop Settings)
Для одноточкового ефекту встановіть Desktop Max Points = 1 і Glow Mode = One Touch.
Для ефекту сліду встановіть Desktop Max Points = 512 і Glow Mode = Trail.
Встановіть у Desktop Glow Lifetime час, протягом якого кожна частинка існуватиме, наприклад, 1 секунда.
Встановіть у Desktop Glow Lifetime час, протягом якого кожна частинка існуватиме, наприклад, 2 секунди.
Встановіть Desktop Point Size = 120 і Desktop Base Trail Spacing = 0. Для одноточкового ефекту відстань між точками не потрібна, тому має сенс регулювати лише розмір.
Встановіть Desktop Point Size = 120 і Desktop Base Trail Spacing = 10. Ці значення визначають розмір частинок та відстань між ними.
Залиште Desktop Target FPS = 60 для оптимальної продуктивності.
Залиште Desktop Target FPS = 60 для оптимальної продуктивності.
Запустіть сцену та перевірте, що саме з’являється і змінюється, використовуючи частинки Sprite-Default як приклад. Це базова система для створення візуального відгуку на дотик без використання кастомного шейдера. Далі потрібно налаштувати зовнішній вигляд частинок.
3/5 Матеріал частинки (Glow Material)
Виберіть один із готових шейдерів у TouchEffectSystem → Shaders або створіть власний на їх основі.
Використайте будь-який шейдер із папки OneTouch, наприклад TouchPointCircle.
Використайте будь-який шейдер з інших папок, наприклад TouchPointGlow.
Клацніть правою кнопкою на шейдері → Create → Rendering → Material. Призначте створений матеріал у поле Glow Material у TouchGlowUI замість Sprites-Default.
Змініть кольори або інші налаштування матеріалу на свій смак.
4/5 Додатково (Additional)
Тепер, після налаштування візуального вигляду, відрегулюйте розмір частинок, відстань між ними та час життя для Desktop.
Встановіть Initialization Delay, щоб відкласти ініціалізацію системи і уникнути перевантаження додатку під час старту.
Встановіть Always Last Sibling = True, щоб тач-ефект завжди перебував поверх інших UI-елементів на Canvas.
Встановіть Dont Destroy On Load = True, якщо на Canvas немає інших об’єктів і ви хочете, щоб тач-ефект зберігався між сценами.
Встановіть Enable Multi Touch = True, щоб була реакція на дотики кількома пальцями на сенсорному екрані.
Для одночастинкового ефекту увімкнення Sharp Edges не потрібне, оскільки немає сегмента для звуження.
Якщо потрібні гострі краї, встановіть SharpEdges = True і відрегулюйте Start Taper Points Desktop та End Taper Points Desktop, наприклад, по 64 частинки кожен. Така кількість частинок буде звужена на початку та в кінці сліду. Однак ця логіка виключає мультитач через складність обчислень.
Для одночастинкового ефекту краще регулювати розмір через Desktop Point Size, але також можна використовувати Size Multiplier для швидкого підлаштування під розмір екрана.
Щоб змінити загальний розмір сліду без зміни пропорцій, використовуйте повзунок Size Multiplier.
5/5 Мобільні налаштування (Mobile Settings)
Після налаштування візуального вигляду ефекту для Desktop переходьте до Mobile Settings. Ви можете скопіювати ті самі налаштування з Desktop, але це може не дати бажаного результату. Зазвичай для мобільних пристроїв доцільно трохи збільшити розмір частинок і зменшити відстань між ними. Якщо використовується Sharp Edges, краще зменшити кількість звужених частинок удвічі порівняно з Desktop.
Встановіть Force Mobile In Editor = True, щоб тестувати мобільні візуальні ефекти прямо з Editor. Також рекомендується використовувати Unity Remote та зробити збірку для мобільного пристрою з Demo Scene для попереднього тестування.
Перед збіркою відключіть Enable Debug Logs і Force Mobile In Editor. Проте навіть якщо цього не зробити, вони автоматично вимикаються.
SparkleSpawner
Створення ефекту з цим компонентом дозволяє генерувати акцентний ефект шляхом додавання спрайтів частинок і розсіювання їх по області дотику.
1/4 Посилання (References)
Створіть порожній об’єкт на Canvas і додайте до нього компонент SparkleSpawner. Створіть дочірній об’єкт і додайте до нього компонент InputController. Одразу встановіть систему вводу на Old/New.
Заповніть посилання: в TargetCanvas призначте поточний Canvas. В Input Controller призначте дочірній компонент InputController. У PointPrefab призначте префаб UI-частинки із папки TouchEffectSystem → Prefabs → Sources. Для ParentObjectForPoints призначте поточний об’єкт або створіть у ньому дочірній контейнер.
Додайте 2D текстури в Sparkle Textures, які складатимуть частинки ефекту (випадково обираються з них). Рекомендується використовувати білі спрайти з квадратними пропорціями, наприклад, 256×256, ромби, пір’їнки, листя, сніжинки тощо.
Додайте кольори в Sparkle Colors для випадкового вибору.
Після цього переходьте до налаштувань.
2/4 Універсальні і десктопні налаштування (Universal & Desktop Settings)
Виберіть Dispersion Type і Fade Animation Type з доступних опцій, щоб налаштувати базову поведінку частинок.
Для одноточкового ефекту встановіть Desktop Max Points = 1 і Sparkle Mode = One Touch.
Для ефекту сліду встановіть Desktop Max Points = 512 і Sparkle Mode = Trail.
Встановіть Desktop Glow Lifetime на кількість секунд, протягом яких кожна частинка існуватиме, наприклад, 1.
Встановіть Desktop Glow Lifetime на кількість секунд, протягом яких кожна частинка існуватиме, наприклад, 2.
Встановіть Desktop Point Min/Max Size = 20/40. Частинки будуть з’являтися випадкового розміру в межах цього діапазону.
Встановіть Desktop Point Min/Max Size = 20/40. Частинки будуть з’являтися випадкового розміру в межах цього діапазону.
Встановіть Desktop Base Trail Spacing = 0. Для одноточкового ефекту відстань між частинками не потрібна, тому має сенс регулювати лише розмір.
Встановіть Desktop Spacing = 20. Найкраще задавати його меншим за розмір частинок, щоб проміжки між сплесками були непомітні та утворювався безперервний слід.
Встановіть Desktop Min/Max Sparkle Points = 8/16 (кількість частинок у кожному сплеску).
Встановіть Desktop Min/Max Sparkle Points = 8/16 (кількість частинок у кожному сплеску).
Встановіть Desktop Min/Max Radius = 80/120. Частинки з’являтимуться в межах цієї області (виділеної зеленим у Scene view).
Встановіть Desktop Min/Max Radius = 80/120. Частинки з’являтимуться в межах цієї області (зелено виділеної у Scene view).
3/4 Мобільні налаштування (Mobile Settings)
Після налаштування візуального вигляду ефекту для Desktop переходьте до Mobile Settings. Ви можете скопіювати ті самі налаштування з Desktop, але це може не дати бажаного результату. Зазвичай для мобільних пристроїв доцільно трохи збільшити розмір частинок і зменшити відстань для сліду.
Встановіть Force Mobile In Editor = True, щоб тестувати мобільні візуальні ефекти прямо з Editor. Також рекомендується використовувати Unity Remote та зробити збірку для мобільного пристрою з Demo Scene для попереднього тестування.
Перед збіркою відключіть Enable Debug Logs і Force Mobile In Editor, хоча навіть якщо цього не зробити, вони автоматично вимикаються.
4/4 Додатково (Additional)
Встановіть Initialization Delay, щоб відкласти ініціалізацію системи і уникнути перевантаження додатку під час старту.
Встановіть Always Last Sibling = True, щоб тач-ефект завжди перебував поверх інших UI-елементів на Canvas.
Встановіть Dont Destroy On Load = True, якщо на Canvas немає інших об’єктів і ви хочете, щоб тач-ефект зберігався між сценами.
Встановіть Enable Multi Touch = True, щоб ефекти реагували на дотики кількома пальцями на сенсорному екрані.
Після того як пропорції встановлені і зовнішній вигляд ефекту задовольняє, можна регулювати його загальний розмір, зберігаючи внутрішні пропорції, за допомогою повзунка Size Multiplier.
Last updated