Редактор тайловых карт — бесплатный онлайн-конструктор тайлмапов и редактор уровней

Редактор тайловых карт — это сетка, тайлсет и кисть. Вы импортируете PNG или генерируете набор по промпту, задаёте один размер ячейки, закрашиваете ячейки по слоям, помечаете непроходимые для коллизий и экспортируете. Редактор тайловых карт на этой странице работает в браузере: без загрузки, без аккаунта, без этапа сборки, и первое, что вы видите, — это сам редактор, а не его скриншот.

Всё ниже описывает, что инструмент на самом деле делает и где он ломается. Почему лист с отступом в 1 px импортируется неправильно, если указать только размер тайла. Почему правилу автайлинга с двумя состояниями на каждую грань нужно 47 вариантов вместо 16. Что несёт в себе TMX, чего не может PNG. И почему возможность нажать «играть» и пройтись по только что нарисованной карте меняет то, как быстро вы можете её исправить.

Редактор тайловых карт (живой инструмент)

Живой инструмент — первое, что есть на этой странице. Холст — это сетка, тайлсет расположен рядом, а список слоёв — это стопка независимых сеток, которые можно скрывать и блокировать по одной. Закрасить ячейку — один клик. Перетаскивание закрашивает ряд ячеек. Инструмент «прямоугольник» заполняет область, заливка обрабатывает открытое пространство, а ластик очищает до слоя ниже.

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

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

Импортируйте тайлсет или сгенерируйте его

Есть два пути. Импортировать PNG, который у вас уже есть, или сгенерировать набор по текстовому промпту и рисовать им. Оба ведут в одно место: выровненный лист тайлов рядом с холстом.

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

Редактор спрашивает размер тайла до того, как что-либо загрузит, и это число должно точно совпадать с рисунком. Лист 256 на 256 из тайлов 16 px — это 16 столбцов на 16 строк. Если у листа отступ в 1 px по краю и 1 px промежутка между тайлами — обычное значение по умолчанию в спрайтовых инструментах, — то простая арифметика даёт неверное число столбцов, поэтому введите также отступ и промежуток или обрежьте лист. Ошибётесь — и сетка перекосится: первый столбец выглядит нормально, а каждый следующий тайл смещается на ошибку, которая растёт по всему листу.

Импорт тайлсета ломают ещё три вещи. Тайлы размером 15 или 33 px, потому что рисунок был отмасштабирован на нецелый коэффициент. Рисунок, заходящий на 1 px в ячейку соседа, что проявляется тонкой линией соседнего тайла вдоль каждого шва и усиливается, когда движок сэмплирует с включённой фильтрацией. И альфа-канал, где прозрачная область на самом деле чёрная, из-за чего каждая пустая ячейка превращается в сплошной блок при отрисовке карты.

Вместо этого опишите набор: размер ячейки, вид, палитру и нужные роли тайлов, такие как пол, стена, угол стены, дверь и кромка воды. Генератор AI-тайлсетов возвращает лист, уже выровненный под запрошенный размер ячейки, поэтому он импортируется без арифметики с отступами.

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

Рисуйте тайлы, добавляйте слои и коллизии

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

Держите коллизии как данные на отдельном слое, а не как тёмные тайлы, встроенные в рельеф. Если блокирующие объёмы врисованы в рисунок земли, редактирование рисунка меняет дизайн уровня, а редактирование дизайна уровня меняет рисунок. С отдельным слоем вы можете перерисовывать пол сколько угодно раз, а стены останутся на месте.

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

Автайлинг и набор из 47 тайлов — объяснение

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

Простая версия правила смотрит на четырёх соседей — север, восток, юг и запад, — что даёт два в четвёртой степени, или 16 комбинаций. Такой набор легко нарисовать, и он терпит неудачу в одном конкретном месте: внутренний угол. Возьмите ячейку пола со стеной на севере и стеной на востоке и больше ни с чем. Это не экзотический случай, именно так выглядит внутренность Г-образной комнаты везде. У набора из 16 тайлов нет варианта, рисующего кромку вдоль северной и восточной сторон одной ячейки, поэтому вы получаете лишний пиксель пола, удвоенную границу или видимую дыру.

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

Редакторы обычно хранят блоб-набор как таблицу поиска с индексом по 8-битной маске: 1, 2, 4 и 8 для кромок, 16, 32, 64 и 128 для углов. Когда вы рисуете, редактор пересчитывает маску нарисованной ячейки и каждого соседа, который тоже автайлится, поэтому один клик может перезаписать до девяти ячеек. Практическое следствие: автайлингу нужен собственный слой рельефа. Смешайте с этим слоем вручную размещённые предметы — и каждое обновление автайла должно будет решать, допустимо ли их перезаписать.

«Tiled Map» или «Tile Map» — что вы имеете в виду?

Сюда приходят два разных поисковых запроса, и они хотят разного. Редактор тайловых карт — это категория: любой инструмент, который рисует сетку тайлов и создаёт карту. Tiled — это конкретная программа внутри этой категории, настольный редактор, публикуемый на mapeditor.org, и люди часто набирают «tiled map editor», когда имеют в виду именно эту программу по названию.

Если вы имели в виду категорию, то живой инструмент на этой странице — это редактор тайловых карт, и ему не нужна установка. Если вы имели в виду бренд, то, вероятно, вам нужно то, что открывает уже имеющиеся у вас файлы — проекты TMX и тайлсеты TSX, которые создаёт настольный рабочий процесс, — и позволяет продолжать работу, ничего не устанавливая на текущей машине. Страница об альтернативе Tiled покрывает это напрямую: какие из ваших файлов переносятся, какие настройки — нет, и как соотносятся форматы экспорта у обоих.

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

Экспортируйте карту (PNG / TMX / JSON)

Три формата, три задачи. Выбирайте по тому, что будет читать файл, а не по тому, какой звучит официальнее.

PNG — это плоское изображение. Экспортёр отрисовывает карту в размере ячейки, умноженном на размер карты, поэтому карта 40 на 25 из ячеек 32 px становится 1280 на 800 пикселей, а слои либо объединяются в одно изображение, либо записываются по файлу на слой. Используйте его для макетов, миниатюр, фонов меню или разговора с художником. Не используйте его как передачу в движок: PNG не несёт ни сетки, ни идентичности тайлов, ни коллизий, поэтому ничто дальше не отличит стену от пола иначе как по цвету.

TMX — это XML-формат обмена Tiled и самое близкое к лингва франка, что есть в экосистеме тайловых инструментов. Он несёт слои, ссылки на тайлсеты, свойства отдельных тайлов, слои объектов и пользовательские свойства, и большинство движков и конвертеров умеют его читать. Одна деталь вызывает большинство ошибок: идентификаторы тайлов в TMX глобальны для всех тайлсетов карты и смещаются на firstgid для каждого тайлсета. Объедините два листа и ошибётесь с этим смещением — и каждая ячейка, использовавшая второй лист, загрузится с тайлом из чужого листа. Никакой ошибки. Просто выглядит неправильно.

JSON — это то, что большинство движков и веб-сред напрямую принимают на входе. Обычно это список слоёв, каждый из которых содержит плоский массив индексов тайлов плюс размер ячейки, с коллизиями в виде отдельного массива. Поскольку потребитель строит карту во время выполнения, соглашение о порядке строк имеет значение: инвертируйте его — и вся карта зеркалится по вертикали, что очевидно на карте с береговой линией и незаметно на симметричном подземелье. Пустые ячейки тоже нуждаются в определённом значении, так как одни форматы используют 0, а другие -1, и неверный выбор ставит настоящий тайл в каждый промежуток.

Войдите внутрь своей карты (играбельная демонстрация)

Играбельная демонстрация на этой странице — «Остров Циклопа», изометрическая пиксель-арт игра, построенная из тайловой карты, нарисованной в том же редакторе. Нажмите «играть» — и камера опускается в карту. Слой коллизий становится стенами, слой земли — полом, по которому ходит персонаж, а слой деталей рисуется позади или перед персонажем в зависимости от того, где он расположен.

Это шаг, который пропускает большинство страниц инструментов. Нарисовать карту и экспортировать её означает, что впервые вы видите уровень в масштабе игрока в другой программе, с другой камерой, после сборки. Игра здесь же превращает дизайн уровня в цикл, который можно прокрутить десять раз в минуту: нарисовать коридор, пройти его, заметить, что он на один тайл шире, перерисовать.

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

Оттуда карта может пойти в двух направлениях. Оставьте её 2D — и она останется тайловой картой с контроллером игрока сверху. Перенесите её в конструктор 3D-игр — и та же сетка станет геометрией, где каждая ячейка выдавливается в плиту пола или стену, что и лежит в основе Mini World. Agent Sprite Forge отвечает за персонажей. Нарисованная вами сетка не меняется ни в том, ни в другом случае.

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

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

FAQ