Онлайн-редактор тайловых карт — бесплатная браузерная альтернатива Tiled

Редактор тайловых карт — это программа, которая собирает уровень из небольшого набора повторяющихся изображений-тайлов вместо одной большой нарисованной вручную подложки. Tiled, настольное приложение с mapeditor.org, — эталонная реализация этой идеи: бесплатное, работающее офлайн, гибкое в отношении типов сетки и достаточно старое, чтобы множество выпущенных проектов до сих пор несли файлы .tmx. Эта страница посвящена случаю, когда вы хотите тот же процесс рисования без установки чего-либо и хотите нажать «Играть» и пройтись по только что нарисованной карте.

Neta Studio запускает редактор во вкладке браузера. Вы импортируете тайлсет, задаёте размер тайла, закрашиваете слой земли и слой деталей, помечаете коллизии, а затем играете. Сетка становится 3D-миром, отрисованным с помощью Three.js, с управляемым персонажем и настоящими коллизиями. Ничего не нужно скачивать, нет папки проекта, которую нужно синхронизировать между машинами, и есть ссылка, которую можно передать другому, чтобы он открыл ту же карту.

Tiled против онлайн-редактора тайловых карт

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

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

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

Что такое тайловая карта (и почему это название всех путает)

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

Именно из-за этого разделения поисковые запросы про редактор тайловых карт попадают в два разных места. Половина людей хочет конкретное настольное приложение и его форматы файлов. Другая половина хочет построить карту на тайлах, и ей не важно, какой инструмент это сделает. И то, и другое разумно. Если вы во второй группе, вопрос не в том, у какого редактора длиннее список возможностей, а в том, какой из них быстрее даёт играбельный результат.

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

Нарисуйте свою первую тайловую карту онлайн

Первый экран состоит из трёх областей: панель тайлсета слева, холст карты посередине, список слоёв справа. Начните с создания карты. Выберите ортогональную сетку, задайте сетку 40 на 30 тайлов и установите размер тайла точно под ваш тайлсет. При 32 на 32 пикселя это холст 1280 на 960 пикселей — разумный рабочий размер, который остаётся отзывчивым во время рисования.

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

Примеры тайловых карт — карты, которые можно открыть прямо сейчас

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

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

Импорт TMX / тайлсета в браузер

Импорт — это парсер, а не конвертер. Мы читаем элемент map для получения ориентации, ширины, высоты, ширины и высоты тайла, затем записи тайлсетов с их firstgid и либо встроенным изображением, либо ссылкой на внешний .tsx. Затем каждый слой по порядку с его данными тайлов. Кодировки, которые имеют значение, — это CSV и base64, со сжатием gzip или zlib или без него. Если файл использует кодировку, которую мы не декодируем, импорт останавливается и называет её, а не загружает пустую сетку.

Что выживает — это структурная часть. Ссылка на тайлсет перенаправляется на загруженное изображение, поэтому внешний путь .tsx из вашего настольного проекта заменяется, а не используется. Размер тайла, отступ и промежуток переносятся. Порядок слоёв, видимость и прозрачность переносятся. Идентификаторы тайлов сохраняют свои относительные позиции внутри каждого слоя, и именно это заставляет карту выглядеть одинаково после импорта. Слои объектов приходят как прямоугольники и многоугольники с их свойствами, сведёнными к строкам «ключ/значение». Объявленные анимации тайлов сохраняются.

Что не выживает — это всё, что было кодом. Tiled поддерживает расширения на JavaScript, пользовательские классы свойств и плагины на C++, и ни одно из них не работает во вкладке браузера. Карта, созданная скриптом, здесь — просто её выходные тайлы. Пользовательские типы свойств вырождаются в строки. Бесконечные карты с блочным хранением сплющиваются в фиксированную сетку, что меняет поведение памяти на очень больших картах. А тайлсет-коллекция изображений, где каждый тайл — отдельный PNG, работает, но стоит одного запроса изображения на тайл. Если ваша карта зависит от плагина, продолжайте создавать её в Tiled.

Tiled бесплатный против платного Tiled

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

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

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

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

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

FAQ