Создание тайловых карт (Tilemap) мобильной игры

Создание тайловых карт (Tilemap) мобильной игры

Tilemap — система, где уровень строится из повторяющихся тайлов фиксированного размера. Это не просто визуальный инструмент — это pipeline от создания тайлсета до загрузки в движок с батченным рендерингом и корректной коллизией. Неправильно собранный тайлсет превращается в сотни draw calls там, где должен быть один.

Тайлсет: размер и структура

Стандартный тайл: 16×16, 32×32, 64×64 или 128×128 пикселей. Выбор зависит от разрешения и стиля. Pixel art — 16×32 или 32×32. Casual 2D — 64×64 или 128×128.

Критическое требование: seamless edges. Правый край тайла должен точно совпадать с левым краем соседнего, иначе видны «швы» на стыках. В Aseprite и Photoshop — режим Tile Mode (View → Tile Mode в Aseprite) позволяет рисовать с превью стыков в реальном времени.

Тайлсет как один PNG — стандарт. Все тайлы в сетке на одном изображении. В Unity Tilemap система работает со Sprite Atlas или Tile Palette. В Tiled (редактор уровней) — тайлсет задаётся одним PNG с параметрами сетки. Одна текстура = один draw call для всей tilemapped сцены при правильной настройке.

Autotile (Terrain Tiles в Unity, Bitmasking). Смысл: вместо ручного выбора правильного тайла для каждой позиции (угол, край, внутренняя часть) — система автоматически определяет нужный тайл по соседям. Unity Terrain Tiles с Tile Flags и bitmask-логикой. В Tiled — Wang Tiles. Художник рисует набор из 8–16 переходных тайлов, движок подставляет нужный автоматически.

Структура слоёв

Профессиональный Tilemap — не один слой, а минимум три:

• Background — небо, дальний фон, статика без коллизий. Z = -2, нет TilemapCollider.
• Ground — земля, платформы. Z = 0, TilemapCollider2D + CompositeCollider2D.
• Foreground / Details — трава, декор поверх персонажа. Z = 2, нет коллизий.

CompositeCollider2D в Unity объединяет все индивидуальные тайл-коллайдеры в один mesh collider. Без него 100 тайлов платформы = 100 Box Collider2D проверок при каждом Physics update. С CompositeCollider — один Polygon Collider. Принципиальная разница для производительности physics.

Анимированные тайлы

AnimatedTile в Unity — тайл с набором спрайтов и скоростью анимации. Вода, лава, мерцающие светильники. Каждый AnimatedTile — отдельный цикл обновления. Не злоупотреблять: 50 анимированных тайлов воды на экране — 50 Coroutine или Update вызовов. Для масштабных водных поверхностей — шейдер с анимацией UV выгоднее.

Редакторы уровней и экспорт

Tiled Map Editor — внешний редактор уровней, экспортирует в JSON / XML / TMX. В Unity интегрируется через SuperTiled2Unity или Tiled2Unity пакет. Уровни хранятся как ассеты, могут редактироваться вне Unity. Удобно для level designer'а без Unity-опыта.

LDtk (Level Designer Toolkit) — современная альтернатива Tiled с лучшим UX. Нативная интеграция с Unity через официальный LDtk to Unity package (Unity Package Manager). Поддерживает entities, custom fields для game logic данных.

Godot TileMap — встроенная система, не требует внешних инструментов. TileSet с terrain layers, physics layers, custom data layers. Autotile через terrain_set.

Из практики: мобильный платформер, Unity + SuperTiled2Unity. Уровень из 800 тайлов давал 35 draw calls — неожиданно много. Причина: художник случайно использовал два разных тайлсета PNG с одинаковым контентом (один — оригинал, второй — дубликат с другим именем файла). Unity создавал два Material для двух текстур. После объединения в один тайлсет — 2 draw calls для всей тайловой геометрии.

Pixel art специфика для тайлсетов

Filter Mode: Point (no filter) — обязательно. Bilinear фильтрация размывает пиксели на стыках тайлов. Pixel Snap в Camera Settings или через PixelPerfectCamera компонент — убирает субпиксельное мерцание при движении камеры. Compression: None для тайлсетов с тонкими пиксельными линиями — ASTC портит чёткость.

Pixels Per Unit должен совпадать со стороной тайла: тайл 32px → PPU = 32. Иначе тайлы не стыкуются в Unity Tilemap.

Типы тайловых карт

Изометрические тайлы требуют дополнительной работы с сортировкой объектов по Y-координате — объекты ниже по экрану должны рендериться поверх объектов выше. Renderer.sortingOrder по transform.position.y или TilemapRenderer.Mode: Individual с кастомным IComparator.

Что входит в работу

• Создание тайлсета (seamless, с переходными вариантами тайлов)
• Terrain / Autotile набор для автоматического соединения тайлов
• Сборка уровней в Unity / Godot / Tiled по игровому дизайну
• Настройка слоёв (фон, коллизии, передний план)
• CompositeCollider для оптимизированной физики
• Анимированные тайлы для воды, лавы, спецэффектов
• Проверка draw calls и батчинга в профилировщике

Сроки

Тайлсет для одной локации (основные тайлы + переходы + декор) — 1–2 недели. Сборка уровней на основе готового тайлсета — 3–5 дней за 5–10 стандартных уровней. Полный set для игры с 3–5 тематическими локациями — 1–2 месяца. Стоимость рассчитывается индивидуально.