Использование тайловых карт

Использование тайловых карт - это простой и быстрый способ создания 2D уровней. Все сводится к тому, что вы взаимодействуете с набором тайлов (tiles) - одинаковых плиток, которые могут быть помещены на графическую сетку столько раз, сколько нужно - представьте, что работаете с редактором карт, собирая карту из состыкующихся друг с другом фрагментов:

tilemap

К тайлам могут быть добавлены коллизии, что позволит расширить взаимодействие объектов с тайлами в игровом 2D мире.

Создание тайла

В первую очередь нужно создать набор тайлов (tileset). Ниже представлены изображения, которые мы будем использовать. По соображениям оптимизации все они собраны в одном изображении (“упакованы” на одну текстуру). Благодаря “упаковке” мы можем собрать воедино несколько спрайтов и получить палитру тайлов.

tilemap

Создайте новый проект в Godot и переместите подготовленное изображение (в формате PNG) в каталог проекта. Затем, в окне импорта изображения, в настройках импорта, отключите Filter, чтобы в последствии избежать проблем с “артефактами”. Mipmaps также должен быть отключен, если нет, отключите его.

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

tilemap

Достаточно много свойств. Хоть этот вариант и рабочий, но уйдет довольно много времени на использование данного способа. Самый простой вариант использовать и настраивать набор тайлов, а для этого нужно экспортировать его из специально созданной сцены!

Сцена TileSet

Создайте новую сцену с корневым узлом Node или Node2D. Для каждого тайла, который вы хотите создать, добавьте узел спрайта в качестве дочернего элемента. Так как плитки имеют размер 50x50, вы должны включить сетку (View -> Show Grid или клавиша G) и включить привязку (иконка Use Snap или клавиша S). Перемещение тайлов с помощью мыши может быть неточным, удобней использовать клавиши стрелок.

Если в исходном изображении несколько тайлов, обязательно используйте свойство Region Rect, чтобы настроить, какая часть текстуры должна использоваться.

Наконец, задайте имя спрайта. Это гарантирует, что при последующих изменениях в наборе тайлов (например, при добавлении коллизии, изменении области и т. д.), Тайл будет по-прежнему правильно идентифицироваться и обновляться. Его имя должно быть уникальным!

Большая часть требований, отражено на скриншоте ниже:

tile_example

Продолжайте добавлять все тайлы, при необходимости корректируя смещения (если у вас несколько фрагментов в исходной текстуре). Важно помнить, что их имена должны быть уникальными.

tile_example2

Коллизии

Чтобы добавить коллизии к тайлам, создайте дочерний элемент StaticBody2D для каждого спрайта. Это статический узел обработки столкновений. Затем создайте CollisionShape2D или CollisionPolygon в качестве дочернего элемента StaticBody2D. Рекомендуется использовать CollisionPolygon, его легче редактировать.

tile_example3

Наконец, отредактируйте CollisionPolygon, что позволит использовать коллизии и уберет значок предупреждения рядом с этим узлом. Используйте привязку к сетке используя Snap. Убедитесь, что края полигона столкновений выровнены по краям тайла правильно (для редактирования используйте вершины полигона), это позволит персонажу беспрепятственно идти от тайла к тайлу. Важно! Не масштабируйте и не двигайте сам узел полигона. Параметры, относительно родительского спрайта, должны быть: Offset - 0,0, scale - 1,1 и rotation - 0.

tile_example4

Добавьте коллизии для всех тайлов. Обратите внимание, BG - всего лишь фон, и он не использует коллизии.

tile_example5

ОК! Все сделано! Сохраните эту сцену для возможности редактирования в будущем. Назовите его tileset_edit.scn или как-то в этом роде.

Экспорт TileSet

В созданной и открытой сцене следующим шагом будет создание набора тайлов. В меню Scene выберите Scene> Convert To> Tile Set:

tileset_export

Затем выберите имя файла, например, mytiles.tres. Убедитесь, что включена опция Merge With Existing. Таким образом, каждый раз, когда файл с тайлами перезаписывается, все существующие тайлы обновляются (определяются по уникальному имени, называйте свои тайлы правильно!).

tileset_merge

Использование набора тайлов в тайловой карте

Создайте новую сцену, используя Node или Node2d, а затем создайте TileMap в качестве дочернего элемента.

tilemap_scene

Перейдите в свойства TileSet этого узла и укажите созданный ранее набор тайлов:

tileset_property

Также установите размер ячеек 50 (это размер тайлов). Quadrant (квадрант) - это настраиваемое значение, которое указывает сколько тайлов должен рисовать движок и выводить на видимую область экрана, по умолчанию оно равно 16х16. Это значение изначально настроено правильно и не нуждается в изменении, но в определенных случаях, для точной настройки производительности можно прибегнуть к редактированию этого параметра (если вы знаете, что делаете).

Картина вашего мира

Убедитесь, что выбран узел TileMap. На экране появится красная сетка, позволяющая рисовать на ней выбранный тайл, который расположены на палитре слева.

tile_example6

Чтобы избежать случайного перемещения и выбора узла tilemap (учитывая, что это огромный узел), рекомендуется заблокировать его, используя кнопку блокировки:

tile_lock

Если вы случайно разместили тайл не там, где хотели, всегда можно удалить его с помощью правой кнопки мыши в редакторе tilemap.

Вы также можете перевернуть и повернуть спрайты в редакторе TileMap (примечание: отражение спрайтов в TileSet не будет иметь должного эффекта). Значки в углу редактора позволяют “отзеркалить” и повернуть выбранный в настоящий момент тайл - вы также можете использовать клавиши A и S, чтобы отразить спрайт по горизонтали и по вертикали. Но для некоторых видов плиток отражение может быть удобной и компактной функцией.

Артефакты смещения и масштабирования

Использование одной текстуры для всех фрагментов тайлового набора, скорее всего, приведет к артефактам:

tileset_filter

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

  • Отключить Filter и Mipmaps для текстуры плитки или всех текстур в окне настроек Импорта изображений.

  • Включить Pixel Snap (установите значение true). Project > Project Settings > Rendering > Quality > 2d > Use Pixel Snap

  • Часто помогает масштабирование посредством уменьшения карты через Viewport. Хорошей отправной точкой может послужить простое добавление 2D камеры, и с помощью включения Current и игры с параметром Zoom добиться нужного результата.

  • Вы можете использовать отдельное изображение для каждого тайла. Это позволит удалить все артефакты, но данный способ скажется на производительности и времени, которое будет затрачено.

http://docs.godotengine.org/en/3.0/tutorials/2d/using_tilemaps.html

Written on October 25, 2018