Створення PostProcess матеріалу для ефекту лікування в Unreal Engine 4

При розробці гри ми зіткнулися з необхідністю відображати інформацію так, щоб користувач її помітив. Наприклад, підбираючи аптечку, гравці не завжди помічають що в кутку екрану в HUD починає додаватися здоров'я. Так з'явилася завдання додавання візуального ефекту поверх ігрового процесу.

image

Завдання. Необхідно показати ефект лікування. З нижньої частини екрана летять плюсики, кожен з них погойдується вліво-вправо, змінює яскравість і плавно зникає в центрі. Все це зробити через PostProcess.

Насамперед готуємо текстуру з плюсиками, яка знадобиться для ефекту. Кожен канал містить певну інформацію:

Червоний — мінімальна яскравість плюсик.image

Зелений — початковий зсув руху плюсик по горизонталі.image

Синій — область в якій будуть видні плюсики (в центрі будуть майже відразу зникати, по краях летіти вище).image

Прозорість — амплітуда гойдання плюсик.image

В результаті отримуємо таку структуру:

image

Щоб уникнути артефактів зверху і знизу у плюсиков треба налаштувати текстуру при імпорті в Unreal Engine наступним чином:

image

Коли текстура готова й імпортована, створюємо новий матеріал. У налаштуваннях матеріалу встановлюємо властивість Material Domain у PostProcess.

image

Саме написання матеріалу можна розділити на кілька етапів.

По-перше, потрібно додати рух плюсиков вгору. Для цього викличемо Panner від Screen Position і вкажемо в параметрах швидкість по Y = 0.2. Таким чином, наша текстура буде поступово рухатися вгору.

Щоб плюсики рівномірно розподілялися по екрану і не розтягувалися, текстурні координати по X множимо на відношення ширини екрана до висоті. Додаємо зрушення в половину дробової частини. І множимо текстурні координати на CoordsScale (в нашому випадку дорівнює 2), щоб плюсиков було більше і вони були меншого розміру (не довелося витрачати багато часу на малювання великої кількості плюсиков в текстурі).

image

По-друге, додамо погойдування плюсиков. Із зеленої компоненти текстури беремо значення початкового зсуву, множимо на період похитування і додаємо поточного часу Time. Все це передаємо в функцію LinearSine і результат множимо на амплітуду коливання. Отримане значення додаємо до текстурної координаті за X.

image

В третіх, зміна яскравості плюсиков. За новим текстурних координат ми отримуємо початкове значення яскравості (червоний канал текстури), що буде змінюватися до 1 і назад. Підсумкова яскравість виходить: (1 — red) * RoundedLinearSin + red. Де RoundedLinearSin це значення від 0 до 1 з функції LinearSine, а red — це значення червоного каналу. Результат множимо на колір плюсик (світло-зелений у нашому випадку).

Яскравість використовуємо для змішування з поточним зображенням сцени, щоб накласти наш ефект поверх ігрового процесу. Для цього помножимо його на округлене вгору значення (Ceil) з червоного каналу (щоб нічого за межами плюсик не миготіло). Потім, на значення синього каналу, яке беремо по екранних координатах. Це додасть ефект плавного зникнення плюсиков ближче до центру екрану. Крім того, нам потрібно параметр Scale, який стане в нагоді для поступового появи ефекту лікування. Отримане значення використовуємо для лінійної інтерполяції (Lepr) між зображенням сцени і кольором плюсик.

image

Щоб не виконувати зайві розрахунки там, де це не потрібно, додамо умова, що перевіряє, де точно немає плюсик. У результаті у нас вийшов такий матеріал (картинка кликабельна):

image

Залишилося тільки викликати плавне поява і зникнення ефекту при подбирании аптечки і при закінченні її дії. Додаємо Timeline в якому змінюємо параметр Scale і події для запуску і завершення ефекту.

image

Ну і звичайно ж відео з результатом:

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.