При розробці гри ми зіткнулися з необхідністю відображати інформацію так, щоб користувач її помітив. Наприклад, підбираючи аптечку, гравці не завжди помічають що в кутку екрану в HUD починає додаватися здоров'я. Так з'явилося завдання щодо додавання візуального ефекту поверх ігрового процесу.
Завдання. Необхідно показати ефект лікування. З нижньої частини екрану летять плюсики, кожен з них погойдується вліво-вправо, змінює яскравість і плавно зникає в центрі. Все це зробити через PostProcess.
Перш за все, готуємо текстуру з плюсиками, яка знадобиться для ефекту. Кожен канал містить певну інформацію:
Червоний - мінімальна яскравість плюсика.
Зелений - початкове зрушення руху плюсика по горизонталі.
Синій - область в якій будуть видні плюсики (в центрі будуть майже відразу зникати, по краях вище летіти).
Прозорість - амплітуда погойдування плюсика.
У підсумку отримуємо таку текстуру:
Щоб уникнути артефактів зверху і знизу у плюсиків треба налаштувати текстуру при імпорті в Unreal Engine наступним чином:
Коли текстура готова та імпортована, створюємо новий матеріал. У параметрах матеріалу встановлюємо властивість Material Domain в PostProcess.
Саме написання матеріалу можна розділити на кілька етапів.
По-перше, потрібно додати рух плюсиків вгору. Для цього викличемо Panner від Screen Position і вкажемо в параметрах швидкість за Y = 0.2. Таким чином, наша текстура буде поступово рухатися вгору.
Щоб плюсики рівномірно розподілялися по екрану і не розтягувалися, текстурні координати по X множимо на відношення ширини екрану до висоти. Додаємо зрушення в половину дробової частини. І множимо текстурні координати на Coor^ Scale (у нашому випадку дорівнює 2), щоб плюсиків було більше і вони були меншого розміру (не довелося витрачати багато часу на малювання великої кількості плюсиків у текстурі).
По-друге, додамо погойдування плюсиків. Із зеленої компоненти текстури беремо значення початкового зсуву, множимо на період погойдування і додаємо поточний час Time. Все це передаємо у функцію LinearSine і результат множимо на амплітуду погойдування. Отримане значення додаємо до текстурної координати X.
По-третє, зміна яскравості плюсиків. За новими текстурними координатами ми отримуємо початкове значення яскравості (червоний канал текстури), яке буде змінюватися до 1 і назад. Підсумкова яскравість виходить: (1 — red) * RoundedLinearSin + red. Де RoundedLinearSin це значення від 0 до 1 з функції LinearSine, а red - це значення з червоного каналу. Результат множимо на колір плюсика (світло-зелений у нашому випадку).
Яскравість використовуємо для змішування з поточним зображенням сцени, щоб накласти наш ефект поверх ігрового процесу. Для цього помножимо його на округлене вгору значення (Ceil) з червоного каналу (щоб нічого за межами плюсика не блимало). Потім, на значення з синього каналу, яке беремо по екранних координатах. Це додасть ефект плавного зникнення плюсиків ближче до центру екрану. Крім того, нам потрібен параметр Scale, який стане в нагоді для поступової появи ефекту лікування. Отримане значення використовує для лінійної інтерполяції (Lepr) між зображенням сцени і кольором плюсика.
Щоб не виконувати зайві розрахунки там, де це не потрібно, додамо умову, що перевіряє, де точно немає плюсика. У підсумку у нас вийшов такий матеріал (картинка клікабельна):
Залишилося тільки викликати плавну появу і зникнення ефекту при підбиранні аптечки і при закінченні її дії. Додаємо Timeline, в якому змінюємо параметр Scale та події для запуску та завершення ефекту.
Ну і звичайно ж відео з результатом:
