Уверен, каждый кто делал игры в 2D сталкивался с мыслью: "А как сделать тот самый эффект, который я видел?". В большинстве случаев все мы думаем и говорим про эффект Parallax (параллакс).
Он создаёт иллюзию расстояния за счёт движения разных слоёв фона. Слой ближе к нам движется быстрее, а дальше от нас - медленнее. По такому простому принципу строится эффект параллакс.
Но как его сделать? Показывать я буду на примере движка Unity (кто бы сомневался).
Подготовка фона
Для создания эффекта параллакс нам понадобится фон, который изначально будет разделён на слои. Это могут быть как готовые варианты из Asset Store или Itch, так и самодельные. Главное помнить, что нам нужно изображение, которое будет "тайлиться", т.е. его начало и конец будут чётко соприкасаться друг с другом.
Таких слоёв может быть сколь угодно много, но я зачастую работаю с 5-6 слоями. Их и настроить проще, и фон не превращается в кашу.
Для каждого слоя необходимо выставить следующие настройки:
- Mesh Type - Full Rect;
- Warp Mode - Repeat.
Остальные настройки выставляете по своему усмотрению.
После того как вы нашли или сделали фон, можно выставить его так, как вы хотите его видеть на сцене. Не забываем, что можем менять Order in Layer чтобы выставить слои в нужном порядке.
Материалы
Вот вы выставили все слои, сделали всё красиво и удобно. По настройке фона это практически всё. Необходимо для каждого слоя сделать материал, при помощи которого мы и будем делать вращение.
Чтобы создать материал для работы с фоном, мы создадим обычный материал, и поставим ему шейдер Unlit/Transparent. Это позволит нам работать с прозрачным материалом текстурой которого будут наши слои. После настройки закидываем наши материалы на соответствующие слои.
Скрипт
А дальше самое интересное. Нам надо создать скрипт, который будет отвечать за вращение наших слоёв.
Готовый скрипт я предоставлю ниже. Данный скрипт позволит вам сделать вращение постоянным, т.е. фон просто будет двигаться с той скоростью, с которой вы захотите.
using UnityEngine;
public class Parallax : MonoBehaviour
{
private Material material; // Материал (Надо выставить шейдер материала
Unlit/Transparent)
private Vector2 offset = Vector2.zero; // Значение поворота материала
[SerializeField] private float scale = 1.0f; // Множитель для скорости
private void Start()
{
material = GetComponent<SpriteRenderer>().material; // Получаение материала для вращения
}
private void Update()
{
offset.x += Time.deltaTime * scale;
if (offset.x >= 1)
offset.x = 0;
material.mainTextureOffset = offset;
}
}
ГОСПОДИ, ЯНДЕКС, ДОБАВЬТЕ ФОРМАТИРОВАНИЕ КОДА
Так вот. После того как вы создали данный скрипт и вставили данный код, вам остаётся лишь повесить его на каждый слой нашего фона, выставить scale как вам нужно (чем меньше число, тем медленнее вращение) и вуаля! Магия произошла.
Таким нехитрым образом можно сделать эффект параллакс для вашей игры.
Делитесь вашим мнением, сложно ли и красиво ли получается? И не забывайте следить за дальнейшими публикациями и подписываться на наш телеграмм.
До встречи!