Створення тайлових карт (Tilemap) мобільної гри

Створення тайлових карт для мобільної гри

Tilemap — система, де рівень будується з повторюваних тайлів фіксованого розміру. Це не просто візуальний інструмент — це конвеєр від створення тайлсету до завантаження в рушій з батченим рендерингом та коректною колізією. Неправильно зібраний тайлсет перетворюється в сотні 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. Принципова різниця для продуктивності.

Анімовані тайли

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 (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 стандартних рівнів. Повний набір для гри з 3–5 тематичними локаціями — 1–2 місяці. Вартість розраховується індивідуально.