2D рендеринг

Hollow Knight - инди-игра двух разработчиков с бюджетом 57 тысяч австралийских долларов. Продажи - 3 миллиона копий за первый год. Секрет? 10 слоёв параллакса, 300+ анимаций персонажа и тайлмап на 10 часов нелинейного мира. Всё это из четырёх технических примитивов: спрайт, тайлмап, анимация, параллакс.

• **Тайлмапы** используются в картографии (Google Maps), level-дизайне (Tiled editor), и даже в ASCII-играх (Dwarf Fortress)
• **Sprite animation** - основа UI-анимаций в мобильных приложениях: лоадеры, переходы, микро-взаимодействия
• **Parallax-скроллинг** применяется на веб-сайтах для создания эффекта глубины при прокрутке страницы
• **Batching через атласы** - та же техника используется в WebGL-рендерерах Three.js и PixiJS для браузерных игр

Parallax родился в 1981 году - на аркадном автомате

Первый задокументированный parallax scrolling появился в Moon Patrol (Irem, 1981) - аркадный шутер с двумя слоями фона. До этого фоны в играх были статичными или скроллились с той же скоростью, что и основной уровень. Техника эволюционировала: в Super Mario Bros (1985) фоновые облака двигались медленнее платформ. Sonic the Hedgehog (1991) добавил 6 слоёв параллакса с эффектом вращения. К 2010-м Rayman Origins вывел технику на уровень кинематографичной красоты.

Предварительные знания

• Game Engines: Unity, Unreal, Godot

Спрайты

**Спрайт** - базовый элемент 2D-графики: прямоугольное изображение с позицией, размером и поворотом. Каждый видимый объект в 2D-игре - персонаж, враг, пуля, монетка - это спрайт. Именно с отрисовки спрайтов начинается любой 2D-рендерер.

Чтобы не загружать сотни отдельных файлов, спрайты упаковывают в **sprite sheet** (атлас текстур) - одно большое изображение, содержащее все кадры. GPU работает эффективнее с одной большой текстурой, чем с множеством маленьких. Unity использует TexturePacker-совместимые атласы, Godot - собственный формат. Один атлас на сцену = один draw call вместо тысячи.

**Batching** - ключ к производительности 2D. Каждый draw call - дорогая операция GPU. Если 100 спрайтов используют один атлас, их можно нарисовать одним draw call вместо ста. Hollow Knight держит 60 FPS при 300+ спрайтах на экране именно благодаря агрессивному batching.

Порядок отрисовки (z-order) определяет, что рисуется поверх чего. В платформере: фон - платформы - враги - игрок - UI. Sprite с большим z-order рисуется позже и перекрывает предыдущие.

Тайлмапы

Как нарисовать огромный уровень из тысяч объектов? Не спрайтами же! **Тайлмап** (tilemap) - сетка из маленьких квадратных изображений (тайлов), из которых собирается уровень. Как мозаика: из 20 типов тайлов можно построить бесконечно разнообразный мир. Terraria хранит весь мир в 2D-массиве целых чисел. Stardew Valley - то же самое. Один int вместо одного спрайта на каждую клетку.

**Автотайлинг** - система, автоматически выбирающая правильный тайл в зависимости от соседей. Вместо ручного размещения «угол стены сверху-слева» ставится «стена», а движок сам подбирает нужный вариант. Unity (Rule Tiles), Godot (TileMap autotile) и Tiled поддерживают автотайлинг.

Тайлмап - не только графика, но и **коллизии**. Каждому типу тайла назначается: проходимый/непроходимый, платформа (проходимый снизу), лестница, вода. Это позволяет строить физику уровня параллельно с визуалом.

Тайлмапы используют **chunking** для больших миров: карта разбивается на чанки (например, 16x16 тайлов), и рендерятся только видимые. Minecraft, Terraria, Stardew Valley - все используют чанки для бесконечных миров.

2D анимация

Анимация в 2D - это последовательная смена кадров (sprite animation) или плавное изменение свойств (tweening). Оба подхода управляются **animation state machine** - конечным автоматом, определяющим, какая анимация играет в данный момент. Dead Cells использует 300+ анимаций на персонажа, переключаемых за один кадр без артефактов.

**Tweening** (от "in-between") - плавная интерполяция значения из A в B. Вместо покадровой анимации объект плавно перемещается, масштабируется или меняет прозрачность. Easing-функции определяют «характер» движения: linear, ease-in, ease-out, bounce, elastic.

**Animation State Machine** управляет переходами: idle -(нажата кнопка)-> run -(отпущена)-> idle, run -(прыжок)-> jump -(приземление)-> idle. Каждое состояние имеет анимацию и условия перехода. Unity Animator, Godot AnimationTree реализуют это визуально.

Parallax-скроллинг

В реальном мире далёкие объекты движутся медленнее близких (смотрите из окна поезда: столбы пролетают, а горы едва сдвигаются). **Parallax-скроллинг** воспроизводит этот эффект в 2D: несколько слоёв фона движутся с разной скоростью, создавая иллюзию глубины. Ori and the Blind Forest - 7 слоёв параллакса. Hollow Knight - 10. И ни одного полигона.

Для бесконечного параллакса слои делают **tileable** - правый край текстуры плавно переходит в левый. Два экземпляра текстуры рисуются рядом, и когда один уходит за экран - перескакивает вперёд. Игрок видит бесшовную бесконечную панораму.

Продвинутый параллакс использует **вертикальный сдвиг** (слои смещаются при вертикальном движении камеры) и **масштабирование** (далёкие слои чуть мельче). Некоторые игры добавляют слои ПЕРЕД камерой (foreground parallax) - листва, снежинки, - что усиливает ощущение глубины.

Параллакс стоит почти бесплатно по производительности - это всего несколько дополнительных draw calls с разным смещением. Но эффект на восприятие огромен: Hollow Knight, Ori, Celeste используют многослойный параллакс, превращая 2D в «2.5D»-пространство.

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

Ключевые идеи

• **Спрайты** + атласы (sprite sheets) + batching = эффективный рендеринг тысяч объектов одним draw call
• **Тайлмапы** строят мир из маленьких тайлов: автотайлинг, слои, коллизии, чанки для больших миров
• **Анимация:** покадровая (sprite) для персонажей, tweening для свойств, state machine для управления переходами
• **Parallax** создаёт иллюзию глубины через слои с разной скоростью скроллинга - почти бесплатно по GPU

Связанные темы

2D-рендеринг - один из столпов геймдева, связанный с множеством областей:

• Игровые движки — Unity, Godot, Unreal реализуют все описанные техники: sprite renderer, tilemap, animator, parallax
• Введение в разработку игр — Функция render() из game loop - это именно то, что описано в этом уроке

Вопросы для размышления

• Почему 2D-игры переживают ренессанс (Celeste, Hollow Knight, Stardew Valley), несмотря на возможности 3D?
• Как организовать тайлмап для игры с разрушаемым окружением (как Terraria)?
• Может ли parallax-скроллинг работать в top-down игре (вид сверху), а не только в side-scrolling?

Связанные уроки

• gd-02 — Движки реализуют sprite renderer, tilemap и animator из этого урока
• gd-04 — Физика и коллизии строятся поверх тайлмапа и спрайтов
• gd-07 — Shader-анимации расширяют возможности sprite animation
• cg-01 — Компьютерная графика - теория за GPU batching и рендерингом
• se-05 — Паттерн State Machine управляет animation states
• alg-01 — Сортировка z-order - прикладная задача алгоритмов
• la-06-transformations