MrRubel

MrRubel

пикабушник
поставил 432 плюса и 260 минусов
отредактировал 0 постов
проголосовал за 0 редактирований
6878 рейтинг 3 подписчика 487 комментариев 27 постов 2 в горячем
1 награда
5 лет на Пикабу
55

Как сделать турбо-тоннель эффект в Unity с помощью Particle System

Я не знаю, как назвать такой эффект: дыра, пещера, турбо-тоннель, wormhole или, может, пищевод, но результат выглядит так:

Как сделать турбо-тоннель эффект в Unity с помощью Particle System Unity, Туториал, Визуальные эффекты, Gamedev, Разработка, Гифка, Видео, Длиннопост

Для реализации этого эффекта подойдёт практически любой игровой движок: мой первый вариант был сделан ещё на флеше. Здесь же расскажу на примере Unity (Version 2019.2.4f1).

Я добавил такой эффект во вступительном ролике и тизере своей игры про атаку вирусов на иммунную систему «Listeria Wars».

ПОШАГОВАЯ РЕАЛИЗАЦИЯ


Создание сцены


Я использовал 2D темплейт при создании проекта, но можно использовать и 3D. В любом случае понадобится ортографическая проекция в настройках камеры и сплошной чёрный фон.

Как сделать турбо-тоннель эффект в Unity с помощью Particle System Unity, Туториал, Визуальные эффекты, Gamedev, Разработка, Гифка, Видео, Длиннопост

Создание материала


Для Particle System понадобится материал со спрайтом тоннеля. Я нарисовал вот такую картинку, не особо заморачиваясь, так как эффект динамичный и мало кто успеет оценить вашу невероятную детализацию. Но всё, конечно, на ваш вкус. Изначально спрайт был красный, но для динамического цвета стоит перевести его в черно-белый режим.

Как сделать турбо-тоннель эффект в Unity с помощью Particle System Unity, Туториал, Визуальные эффекты, Gamedev, Разработка, Гифка, Видео, Длиннопост

Закидываем наш спрайт в папку для спрайтов в Assets и создаём новый материал Tunnel Wall (создаём папку Materials, по ней кликаем правой кнопкой мыши → Create → Material). В настройках выбираем шейдер Mobile/Particles/Alpha Blended (в старых версиях Unity Particle/Additive). Затем в Particle Texture кликаем по нашему спрайту тоннеля.

Как сделать турбо-тоннель эффект в Unity с помощью Particle System Unity, Туториал, Визуальные эффекты, Gamedev, Разработка, Гифка, Видео, Длиннопост

Добавление основной Particle System


Добавляем в сцену пустой объект и называем Tunnel. В него мы будем помещать все необходимые партиклы и контроллеры. Кликаем правой кнопкой мыши и выбираем Effects → Particle System, который назовём Tunnel Wall по аналогии с именем спрайта. Начинается самое интересное! Настройка и эксперименты.


Основная суть данных настроек — это поочерёдное появление стенок тоннеля с последующим увеличением, где каждый последующий партикл находится за предыдущим. За счёт этого и получается эффект движения вперед по тоннелю.


Renderer

* Material: Tunnel Wall;

* Sort Mode: Oldest in Front;

* Max Particle Size: 5 (для возможности увеличения спрайта на размер больше, чем на пол экрана, где 5 — это разрешение экрана * 5).


Основные (Появляются при клике на хедер настроек, если скрыты)

* Start Lifetime 2.5 (Время жизни партикла, так же определяет скорость увеличения);

* Start Speed: 0 (Скорость не нужна);

* Start Size: 100 (Зависит от размера спрайта, выбираем на глаз, регулируем вместе с Size over Lifetime);

* Start Rotation: от 0 до 360 (Выбираем Random Between Two Constants, крутим партиклы как хотим);

* Start Color: Выбираем на вкус, если спрайт Tunnel Wall чёрно-белый. Осторожно, со слегка оранжевым цветом турбо тоннель рискует превратиться в задний проход;

* Gravity modifier: 0.02 (Партиклы будут слегка падать, задаём немного динамики в движении);

* Simulation Space: World (Мы будем двигать точку создания партиклов, чтобы не перемещалась вся конструкция, ставим World);

* Max Particles: 10 (Смотрим итоговое количество партиклов в панели Particle Effect и устанавливаем столько же).


Emission: Rate over Lifetime: 4 (на вкус)


Shape (форма, которая спавнит партиклы)

* Shape: Circle;

* Radius: 0.05 (Чем меньше радиус, тем более ровными получаются стенки. Выбираем на вкус).


Color over Lifetime

* Я выставил такие настройки для плавного появления и менее плавного ухода

Как сделать турбо-тоннель эффект в Unity с помощью Particle System Unity, Туториал, Визуальные эффекты, Gamedev, Разработка, Гифка, Видео, Длиннопост

Size over Lifetime

* Размер должен увеличиваться примерно по экспоненте, но не с самого нуля

Как сделать турбо-тоннель эффект в Unity с помощью Particle System Unity, Туториал, Визуальные эффекты, Gamedev, Разработка, Гифка, Видео, Длиннопост

Результат на текущий момент

Как сделать турбо-тоннель эффект в Unity с помощью Particle System Unity, Туториал, Визуальные эффекты, Gamedev, Разработка, Гифка, Видео, Длиннопост

Другие партиклы


По аналогии я добавил другие частицы в виде клеток и вен. Расписывать подробно не буду, так как работу я проделал примерно аналогичную — настройки отличались лишь слегка. Следует учесть, что частицы должны быть поверх стен. Для этого необходимо задать Order in Layer в Renderer. Ещё я использовал Velocity over Lifetime, с этим тоже можно поиграться. Ну и добавил виньетку. Получилось так:

Как сделать турбо-тоннель эффект в Unity с помощью Particle System Unity, Туториал, Визуальные эффекты, Gamedev, Разработка, Гифка, Видео, Длиннопост

Немного динамики


Простым перемещением объекта Tunnel мы получим нелинейный тоннель. Добавим компонент Mover к Tunnel и удивимся результату

using UnityEngine;
public class Mover: MonoBehaviour {
public float rangeX = 2;
float rangeY = 1.5f;
public float timeDelimiterX = 4f;
public float timeDelimiterY = 3f;
void Update() {
transform.position = new Vector3(
Mathf.SmoothStep(-rangeX, rangeX, Mathf.PingPong(Time.time / timeDelimiterX, 1)),
Mathf.SmoothStep(-rangeY, rangeY, Mathf.PingPong(Time.time / timeDelimiterY, 1)),
0
);
}
}
Как сделать турбо-тоннель эффект в Unity с помощью Particle System Unity, Туториал, Визуальные эффекты, Gamedev, Разработка, Гифка, Видео, Длиннопост

Так же в коде можно менять каждый из параметров. Цвет, плавное вращение, скорость, да всё что угодно. Вот пример динамического света. Добавляем компонент и прикручиваем наши партиклы к аргументам.

using UnityEngine;
public class Colorizer: MonoBehaviour {
public ParticleSystem tunnelWall;
public ParticleSystem cellBig;
public ParticleSystem cellSmall;
public ParticleSystem cellVessel;
void Update() {
Color color = new Color(
Mathf.SmoothStep(1, 0.5f, Mathf.PingPong(Time.time / 10f, 1)),
Mathf.SmoothStep(0, 1, Mathf.PingPong(Time.time / 15f, 1)),
Mathf.SmoothStep(0, 1, Mathf.PingPong(Time.time / 5f, 1))
);
var tunnelWallMainSettings = tunnelWall.main;
tunnelWallMainSettings.startColor = color;
var cellBigMainSettings = cellBig.main;
cellBigMainSettings.startColor = color;
var cellSmallMainSettings = cellSmall.main;
cellSmallMainSettings.startColor = color;
var cellVesselMainSettings = cellVessel.main;
cellVesselMainSettings.startColor = color;
}
}
Как сделать турбо-тоннель эффект в Unity с помощью Particle System Unity, Туториал, Визуальные эффекты, Gamedev, Разработка, Гифка, Видео, Длиннопост

Залипательно!


Весь код и ассеты тут: Github


Возможно есть более простые и качественные способы, как это сделать, но мне очень понравилось то, что получилось, вот и решил поделиться с вами.


Страница игры в Steam: https://store.steampowered.com/app/1183010/Listeria_Wars/

Добавляйте игру в вишлисты!

Показать полностью 9
Отличная работа, все прочитано!