Создание тайловых карт (Tilemap) мобильной игры
Мы создаём тайловые карты для мобильных игр — от тайлсета до готовой сцены с оптимизированным рендерингом. В этой статье разберём реальные технические проблемы, с которыми сталкиваются разработчики, и покажем, как их решать. Наш опыт — 10+ лет в мобильной разработке и более 50 проектов с тайловыми картами. Неправильно собранный тайлсет превращает простой уровень в сотни draw calls, а физику — в тормоза на слабых устройствах.
Tilemap — система, где уровень строится из повторяющихся тайлов фиксированного размера. Это не просто визуальный инструмент — это pipeline от создания тайлсета до загрузки в движок с батченным рендерингом и корректной коллизией.
Как выбрать размер тайла?
Стандартный тайл: 16×16, 32×32, 64×64 или 128×128 пикселей. Для пиксель-арта — 16×16 или 32×32, для casual 2D — 64×64 или 128×128. Критическое требование — бесшовные края. Правый край тайла должен точно совпадать с левым краем соседнего, иначе видны швы на стыках. В Aseprite или Photoshop используйте режим Tile Mode (View → Tile Mode в Aseprite) для превью стыков в реальном времени.
Тайлсет как один PNG — стандарт. Все тайлы в сетке на одном изображении. В Unity Tilemap система работает со Sprite Atlas или Tile Palette. В Tiled — тайлсет задаётся одним PNG с параметрами сетки. Одна текстура = один draw call для всей сцены с тайлами при правильной настройке батчинга.
Autotile (Terrain Tiles в Unity, Wang Tiles в Tiled) автоматически подставляет нужный тайл по соседям. Художник рисует 8–16 переходных тайлов, движок делает остальное.
Структура слоёв
Профессиональный Tilemap — не один слой, а минимум три:
- Background — небо, дальний фон, статика без коллизий.
Z = -2, без коллайдера. - Ground — земля, платформы.
Z = 0, сTilemapCollider2D+CompositeCollider2D. - Foreground / Details — трава, декор поверх персонажа.
Z = 2, без коллизий.
CompositeCollider2D объединяет все индивидуальные тайл-коллайдеры в один меш коллайдера. Без него 100 тайлов платформы = 100 проверок Box Collider2D при каждом Physics update. С CompositeCollider — один Polygon Collider. Разница в производительности физики — до 100 раз меньше проверок. Подробнее в документации Unity: Tilemap Collider 2D.
Анимированные тайлы
AnimatedTile в Unity — тайл с набором спрайтов и скоростью анимации. Вода, лава, мерцающие светильники. Каждый AnimatedTile — отдельный цикл обновления. Не злоупотребляйте: 50 анимированных тайлов воды на экране — 50 Coroutine или Update вызовов. Для больших водных поверхностей используйте шейдер с анимацией UV — это намного эффективнее.
Редакторы уровней и экспорт
Tiled Map Editor — внешний редактор уровней, экспортирует в JSON / XML / TMX. В Unity интегрируется через SuperTiled2Unity или Tiled2Unity пакет. LDtk — современная альтернатива Tiled с лучшим UX и нативной интеграцией с Unity (официальный пакет). Godot TileMap — встроенная система с поддержкой terrain set и автотайлинга без внешних инструментов.
Сравнение редакторов:
| Редактор | Интеграция с Unity | Автотайлинг | Экспорт |
|---|---|---|---|
| Tiled | SuperTiled2Unity | Wang Tiles | JSON, TMX, XML |
| LDtk | Официальный пакет | Встроенный | JSON |
| Godot TileMap | Встроенный | Terrain set | Внутренний формат |
Из практики: мобильный платформер, Unity + SuperTiled2Unity. Уровень из 800 тайлов давал 35 draw calls — неожиданно много. Причина: художник случайно использовал два разных тайлсета PNG с одинаковым контентом. Unity создавал два Material для двух текстур. После объединения в один тайлсет — 2 draw calls для всей тайловой геометрии. Этот кейс подтверждает: один тайлсет — одно текстура — один draw call.
Pixel art специфика для тайлсетов
Используйте Filter Mode: Point (no filter) — обязательно. Bilinear фильтрация размывает пиксели на стыках тайлов. Включите Pixel Snap в Camera Settings или используйте PixelPerfectCamera. Для тайлсетов с тонкими пиксельными линиями отключите сжатие (Compression: None), чтобы избежать артефактов. Pixels Per Unit должен совпадать со стороной тайла: тайл 32px → PPU = 32.
Типы тайловых карт
| Тип | Особенности |
|---|---|
| Orthographic (прямоугольный) | Стандарт для платформеров, top-down |
| Isometric | Диагональный обзор, RPG / стратегии. Tile Shape: Isometric в Unity |
| Hexagonal | Стратегии. Tile Shape: Hexagonal в Unity и Godot |
| Top-down с offset | 45° вид, JRPG стиль |
Изометрические тайлы требуют сортировки объектов по Y-координате. Используйте Renderer.sortingOrder по transform.position.y или TilemapRenderer.Mode: Individual с кастомным IComparator.
Как создать тайлсет за 4 шага
- Определите размер тайла и стиль (пиксель-арт или сглаженный).
- Нарисуйте базовые тайлы (пол, стена, потолок) с бесшовными краями.
- Создайте переходные тайлы для автотайлинга (8–16 вариантов).
- Экспортируйте как единый PNG с сеткой.
Что входит в работу
- Создание тайлсета (бесшовные тайлы с переходными вариантами).
- Настройка автотайлинга (Terrain / Wang).
- Сборка уровней в Unity / Godot / Tiled по вашему дизайну.
- Оптимизация физики через CompositeCollider.
- Проверка draw calls и батчинга в профилировщике.
- Анимированные тайлы для спецэффектов (вода, лава).
Мы делаем полный цикл — от концепции до готовой сцены с учётом производительности на мобильных устройствах. Свяжитесь с нами, чтобы обсудить ваш проект и получить предварительную оценку сроков. Стоимость рассчитывается индивидуально.
Сроки
Тайлсет для одной локации (основные тайлы + переходы + декор) — 1–2 недели. Сборка уровней на основе готового тайлсета — 3–5 дней за 5–10 стандартных уровней. Полный сет для игры с 3–5 тематическими локациями — 1–2 месяца.