Как сделать тайлмап — пошаговое руководство с бесплатным редактором

Изучение того, как сделать тайлмап, в основном сводится к четырём решениям в правильном порядке: размер ячейки, раскладка тайлсета, стек слоёв и то, где живут коллизии. Примите эти решения один раз — и рисование карты станет механическим.

Шаги ниже следуют порядку, который мы используем, когда письменное описание превращается в играбельный мир в Neta Studio: выберите или сгенерируйте тайлсет, зафиксируйте сетку, заблокируйте рельеф до деталей, разделите слои, а затем позвольте автотайлингу разобраться с краями. Здесь ничего не требует установки. Редактор работает в браузере, и любое число ниже можно изменить позже, не перерисовывая карту.

Что такое тайлмап? (Чёткое определение + схема)

Тайлмап — это сетка индексов, а не сетка картинок. Каждая ячейка хранит целое число, указывающее на один тайл внутри тайлсета, а рендерер находит этот индекс и рисует тайл в позиции ячейки. Карта 20 × 12 при ячейках 32 px — это 240 целых чисел, покрывающих 640 × 384 пикселя.

Эта косвенность и есть весь смысл. Один тайл травы хранится в листе один раз, и на него ссылаются сотни ячеек, поэтому файл карты остаётся маленьким и загружается быстро. Поскольку тайлмап — это данные, а не художественная графика, вы можете генерировать его из функции шума, редактировать как текст, сравнивать две версии в Git или передавать потоком по чанкам по мере движения камеры.

Схема вверху этой страницы построена из наших собственных тайлов на сетке 12 × 8 при 32 px. Трава заполняет внутреннюю часть, песок идёт вдоль левой и нижней кромок, а вода стоит в правом нижнем углу, там, где песок заканчивается. Если читать это как данные: ячейка в столбце 3, строке 0 хранит индекс травы, ячейка в столбце 0, строке 7 хранит индекс угла воды, а все остальные ячейки хранят обычный индекс песка. Начало координат — вверху слева, горизонтальная координата растёт вправо, вертикальная — вниз. Если ваш движок использует начало координат внизу слева, карта будет отрисовываться перевёрнутой, пока вы не перевернёте индекс строки в «количество строк минус 1 минус вертикальная координата».

• СеткаСтолбцы и строки, фиксируемые при создании карты. Карта 20 × 12 и карта 40 × 24 ведут себя совершенно по-разному при одном и том же увеличении камеры.
• Размер ячейкиПиксельный размер одной ячейки: 16, 32, 48 или 64. Он должен точно совпадать с размером тайла в тайлсете, иначе выборка попадёт в середину тайла.
• Набор тайловИзображение, на которое указывают индексы, плюс определение того, сколько в нём столбцов и строк.
• Слой индексовОдно целое число на ячейку на слой. Слой земли плотный, слой деталей в основном пуст, а слой коллизий хранит флаги вместо графики.

Что такое тайлсет? (и чем он отличается)

Тайлсет — это книга с картинками; тайлмап — это страница ссылок на неё. Тайлсет владеет пикселями: лист плюс правило о том, что лист состоит, например, из 8 столбцов тайлов по 32 px. Тайлмап владеет размещением: какой индекс стоит в каждой ячейке каждого слоя.

Эти два слова постоянно путают местами, потому что большинство редакторов показывают их рядом в одной панели и потому что единый формат файла может скрывать это разделение. В Tiled разделение явное: файл тайлсета отделён от файла карты. В Unity ассет Tile хранит спрайт, а компонент Tilemap хранит ячейки. В Godot TileSet и слой тайлмапа — это отдельные ресурсы.

Практическое следствие: изменение тайлсета меняет каждую карту, которая на него ссылается, тогда как изменение тайлмапа меняет один уровень. Замените лист 32 px на лист 48 px — и каждый индекс всё ещё разрешается, но теперь каждая карта рисуется в другом масштабе и может выбирать соседние тайлы по краям. Относитесь к тайлсету как к опубликованному интерфейсу с номером версии.

Шаг 1: Выберите или создайте тайлсет

У вас два пути: взять существующий лист или сгенерировать его. Существующий лист быстрее, но вы наследуете его палитру, размер ячейки и лицензию. Проверьте лицензию, прежде чем строить на нём сорок карт, и убедитесь, что это сеточный лист, а не упакованный атлас. Атлас хранит прямоугольные координаты для каждого тайла вместо равномерной ячейки, что усложняет индексацию и делает автотайлинг неудобным.

Если рельеф должен соответствовать определённой палитре, сгенерируйте его. Agent Sprite Forge создаёт лист тайлов из письменного описания с согласованным размером ячейки, что устраняет самый частый источник смещений: лист, где один тайл шириной 33 px, потому что художник добавил блик за пределами ячейки.

Какой бы путь вы ни выбрали, первый проход — это не рисование. Это измерение. Откройте лист при 100% увеличении, посчитайте столбцы и строки и запишите размер ячейки туда, где его найдёт вся остальная команда.

• Один размер ячейкиКаждый тайл одинаковой ширины и высоты, включая почти пустые тайлы. Один тайл 33 px в листе 32 px сдвигает каждый индекс после него, если экспортёр упаковывает в порядке чтения.
• Настоящая прозрачностьАльфа, а не белый. Лист с непрозрачным белым фоном рисует белые квадраты поверх вашего неба в браузере.
• Документированная сеткаЗапишите столбцы, строки и наличие отступов. Формула индекса — строка умножить на число столбцов плюс столбец, с отсчётом от нуля, слева направо и сверху вниз.
• Решение о зазореЛисты с отступами добавляют 1 или 2 px между ячейками, чтобы уменьшить растекание текстуры, ценой смещения в вашей формуле выборки. Решите, какой вариант вы используете, до первого мазка кистью.

Шаг 2: Задайте размер тайла и сетку

Размер ячейки определяется тремя вещами: увеличением, при котором игрок действительно играет, целевым разрешением рендеринга и тем, сколько графики вы готовы нарисовать. Тайл 16 px на экране шириной 1920 px даёт 120 ячеек по ширине — это много уровня на один экран и очень мало места для деталей. Тайл 64 px даёт 30 ячеек и достаточно пикселей, чтобы нарисовать читаемое дерево.

Жёсткое ограничение — арифметика. Размер ячейки должен делить лист без остатка. Лист шириной 256 px при 32 px даёт ровно 8 столбцов; при 48 px — 5,33, поэтому последний столбец оказывается долей тайла, и каждый индекс после него смещается. Размеры листа — это не эстетический выбор, а кратные размера ячейки.

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

Шаг 3: Нарисуйте землю, затем детали

Рисуйте в несколько проходов и всегда сначала рельеф. Рельеф — это то, что вы будете менять; декор — то, что вы не захотите двигать. Разместите шестьдесят деревьев, а затем сдвиньте береговую линию на четыре ячейки влево — и каждое из этих деревьев внезапно окажется в воде.

Начните с одного тайла. Заполните всю карту одним индексом травы, посмотрите на силуэт при игровом увеличении и только затем позвольте автотайлингу разобраться с краями. Детали идут после того, как форма определена, а коллизии — после деталей, потому что обнаружить, что объект проходим, — это правка коллизии, а не перерисовка.

Нарисуйте всё, что видит игрок. Пустые ячейки по умолчанию показывают то, что рендерер рисует за картой, а это обычно не тот фон, который вы задумали. Цвет фона, заданный у камеры, надёжнее, чем расчёт на очищенный холст.

Шаг 4: Добавьте слои, глубину и коллизии

Тайлмап перестаёт быть плоским в тот момент, когда вы разделяете его на слои. Минимальный полезный стек — три: плотный слой земли, редкий слой деталей и слой коллизий, который вообще не содержит графики. Слой наложения над персонажами стоит добавить рано, если что-то на карте должно скрывать игрока.

Глубина берётся из той же сетки. На карте вида сверху сортируйте по нижней кромке каждого объекта: то, у чего самая низкая нижняя точка, рисуется последним. Для тайлов это бесплатно, потому что вертикальная координата ячейки уже кодирует положение. Для движущихся персонажей нужна сортировка по объектам с детерминированным разрешением ничьих — обычно это вертикальная координата объекта плюс его дробное смещение внутри ячейки. Без этого два объекта в одном ряду мерцают между кадрами.

Коллизии отображаются на сетку как параллельный массив тех же размеров. Дайте каждому тайлу флаг твёрдости в тайлсете, чтобы рисование стены также помечало её твёрдой, а слой коллизий используйте для переопределений на уровне карты. Флаги на уровне ячейки не могут выразить склоны, односторонние платформы или тонкие стены внутри ячейки. Они принадлежат отдельным объектам, наложенным поверх сетки, а не тайлмапу.

• Слой землиПлотный: каждая ячейка хранит индекс. Это единственный слой, который можно безопасно автотайлить.
• Слой деталейРедкий и прозрачный там, где пуст. Деревья, камни, декали. Ничто здесь не должно случайно блокировать движение.
• Слой наложенияРисуется над персонажами: кроны деревьев, мосты, крыши. Всё, что должно скрывать игрока.
• Слой коллизийБез графики. Булев массив того же размера, что и карта, заполняемый из флагов твёрдости тайлсета и правимый вручную для исключений.

Шаг 5: Автотайлинг и набор из 47 тайлов

Автотайлинг — это та часть, которая ломается незаметно. У тайла рельефа с восемью соседями есть 2^8, то есть 256 возможных конфигураций окружения. Углы важны только тогда, когда заполнены обе смежные стороны, и эта симметрия сворачивает 256 случаев в 47 уникальных тайлов. Вот почему большинство движков и редакторов используют на каждый рельеф набор из 47 тайлов-блобов, расположенных в задокументированном порядке.

Вы также встретите набор из 16 тайлов, который читает четырёх боковых соседей и игнорирует углы, и набор минитайлов 2 × 2, где каждая ячейка рисуется из четырёх четвертьтайлов, так что 13–16 минитайлов покрывают все случаи. Набор из 16 тайлов проще рисовать, но он даёт тупые углы. Подход с минитайлами требует меньше изображений, но заставляет создавать каждый рельеф по четвертям, что смягчает пиксельную графику.

Как сделать тайлмап, который автотайлится без щелей

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

Затем преобразуйте маску в индекс тайла. Есть два способа: полная таблица поиска на 256 записей, которую тривиально сгенерировать и легко отлаживать, потому что можно напечатать строку, либо таблица на 47 записей плюс функция симметрии. Берите полную таблицу, если только целевая платформа не ограничена по памяти. Она устраняет целый класс ошибок с углами.

Режимы отказа автотайлинга, о которых стоит знать, прежде чем его подключать

Швы по краям карты возникают из-за непоследовательной обработки ячеек за пределами карты. Один раз решите, пуст ли мир за пределами карты или это тот же рельеф, и применяйте это правило ко всем рельефам.

Второй частый сбой — перезапись. Автотайлинг перезаписывает ячейки, которыми владеет, поэтому любой тайл, нарисованный вручную ради особого вида, исчезает на следующем проходе. Либо заблокируйте слой рельефа после автотайлинга, либо храните ручные переопределения в отдельном списке, который применяется последним.

Примеры тайлмапов, которые можно открыть и сыграть

Чтение работающей карты учит большему, чем чтение её описания. The Cyclops' Island — играбельная карта, построенная на одном наборе рельефа с отдельным слоем коллизий. Пройдите вдоль берега и посмотрите, где переход от песка к воде меняет тайлы: это и есть используемые 47 случаев блобов.

Mini World — пример поменьше. Откройте его, чтобы увидеть стек слоёв — землю, детали и наложение — и понять, как мало тайлов деталей нужно, чтобы карта читалась как законченная, а не пустая.

3D-конструктор игр берёт ту же сетку и выдавливает её. Каждая ячейка становится блоком, слой коллизий становится вертикальными стенами, а сортировка по высоте становится настоящей глубиной в сцене Three.js. Если ваша 2D-карта согласована, 3D-версия почти ничего вам не стоит; если слои перепутаны, выдавливание сразу это обнажит.

• The Cyclops' IslandПроходимая карта для изучения краёв автотайленного рельефа в игровом темпе, а не при увеличении редактора.
• Mini WorldНебольшая сетка для осмотра стека слоёв без прокрутки.
• 3D-конструктор игрТот же тайлмап, выдавленный в блоки, где слой коллизий становится геометрией, а глубина — настоящей.

Скачать шаблон тайлсета (сетка Photoshop / Aseprite)

Шаблон — это вспомогательный инструмент для рисования, а не обязательное требование. Это прозрачный холст с направляющими через каждую ячейку, однопиксельной внутренней отметкой безопасной зоны и номерами индексов вдоль верхнего ряда и левого столбца, чтобы видеть, куда попадает индекс во время рисования. Рисуйте поверх него, скройте перед экспортом.

Подберите шаблон под проект. Холст 512 × 512 вмещает сетку 16 × 16 ячеек по 32 px. При ячейках 16 px тот же файл вмещает сетку 32 × 32, и вам следует понизить непрозрачность направляющих, потому что при такой плотности они скрывают графику.

Войдите в мир, которому он принадлежит

Спрайт — это персонаж, которому негде стоять. Последний шаг — тот, которого не предлагает больше никто: возьмите только что созданный лист и поместите его в мир, по которому кто-то может ходить, — маленький остров, планету, дождливый уголок улицы. Каждый мир на этом сайте был создан из одного письменного описания и опубликован как страница, в которую можно играть.

FAQ