Бесшовный тайлсет травы и переходы для Godot и Tiled

Автор: Егор. 14 октября 2026

Плитки травы с вариациями и переходы между травой и камнем: как они устроены, как их сделать и как собрать из них карту в Godot 4 или Tiled.

Что такое бесшовная плитка и зачем вариации

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

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

Переходы: 16 плиток вместо рисования каждой границы

Больше всего хлопот в тайлсете доставляют границы. Трава встречает камень, песок встречает воду, и каждый такой стык нужно нарисовать для всех поворотов. Для этого придумали схему Wang по углам.

У каждой плитки четыре угла. Каждый угол принадлежит либо нижней поверхности, либо верхней. Это даёт две в четвёртой степени, то есть шестнадцать сочетаний. Все шестнадцать плиток нарисованы один раз, и из них собирается любая граница. Код плитки считают суммой: верхний левый угол даёт 1, верхний правый 2, нижний правый 4, нижний левый 8, если угол принадлежит верхней поверхности. Плитка с кодом 0 это целиком нижняя поверхность, с кодом 15 целиком верхняя, остальные четырнадцать это границы.

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

Если рисовать вручную

Для одной плитки в Aseprite есть режим Tiled Mode: холст показывает плитку размноженной, и вы сразу видите, как стыкуются края. Рисуете деталь у правого края, она появляется у левого. Так делают вариации травы.

Шестнадцать плиток перехода рисуются дольше. Нужно нарисовать границу так, чтобы она сходилась по краям с соседями во всех сочетаниях. В Tiled на это есть готовый механизм наборов Wang, но сами рисунки всё равно ваши. Один переход, например трава и камень, занимает заметное время.

Если собрать в Пиксельне

1. Откройте «Генерировать», отдел «Картинки», вкладка «Плитки».
2. Опишите поверхность: например, «короткая яркая трава, мелкие травинки, пара листиков клевера».
3. Выберите размер плитки: 16, 32 или 64 пикселя. Размер должен совпадать с клеткой, на которой построена ваша игра.
4. Выберите число вариаций: 1, 4 или 8.
5. Для перехода включите «Переход к другой поверхности» и опишите вторую. Нижняя поверхность задаётся в первом поле, верхняя во втором, она лежит поверх нижней.
6. Нажмите «Сделать».

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

Обычные плитки стоят 9 кристаллов (13 ₽ при разовой покупке), плитки с переходом 17 кристаллов (25 ₽). Цена не зависит от размера плитки.

На выходе лист PNG, файл TileSet для Godot, файл .tsx для Tiled и JSON с описанием раскладки. У перехода плитки лежат в листе четыре в ряд: первые шестнадцать по коду угла, ниже дополнительные варианты чистых плиток.

Подключаем к Godot 4

1. Положите файлы из архива в проект и дождитесь импорта.
2. Добавьте в сцену узел TileMapLayer. Он появился в Godot 4.3, в более ранних версиях рисуют узлом TileMap.
3. В свойстве Tile Set выберите «Load» и укажите файл .tres из архива.
4. Для чёткого пикселя поставьте фильтр Nearest в настройках проекта: Rendering, Textures, Default Texture Filter.
5. Откройте нижнюю панель TileMap. Для обычной травы выберите плитки на вкладке Tiles и рисуйте с включённой случайной плиткой. Для перехода откройте вкладку Terrains: там две поверхности, нижняя называется lower, верхняя upper. Кистью рисуете верхней поверхностью, границы Godot подбирает сам.

То же можно делать из кода. Простой вариант: залить поле случайными вариациями травы. В листе из четырёх вариаций это плитки с координатами от 0 до 3 в одном ряду.

extends Node2D

@onready var zemlya: TileMapLayer = $TileMapLayer

func _ready() -> void:
	for x in range(40):
		for y in range(24):
			zemlya.set_cell(Vector2i(x, y), 0, Vector2i(randi_range(0, 3), 0))

Для перехода в Godot есть метод set_cells_terrain_connect: вы называете клетки, а Godot подбирает подходящие плитки. Сначала заливаем всё нижней поверхностью, потом рисуем на ней поляну верхней.

func zalit(oblast: Rect2i, poverhnost: int) -> void:
	var kletki: Array[Vector2i] = []
	for x in range(oblast.position.x, oblast.end.x):
		for y in range(oblast.position.y, oblast.end.y):
			kletki.append(Vector2i(x, y))
	zemlya.set_cells_terrain_connect(kletki, 0, poverhnost)

func _ready() -> void:
	zalit(Rect2i(0, 0, 40, 24), 0)    # весь пол: камень, нижняя поверхность
	zalit(Rect2i(8, 5, 18, 10), 1)    # поляна: трава, верхняя поверхность

Второй аргумент метода это номер набора местности (у нас он один, нулевой), третий номер поверхности: нижняя имеет номер 0, верхняя номер 1. Функция _ready в этом примере заменяет такую же из предыдущего.

Tiled

В Tiled откройте файл .tsx как набор плиток. Вариации одной поверхности записаны в нём как плитки с вероятностями, поэтому штамп со случайной плиткой будет выбирать между ними. У перехода в файле есть набор Wang типа corner: два цвета, нижняя и верхняя поверхности. Кисть Terrain рисует границы по тому же правилу, что и Godot.

Что учесть

• Размер плитки выбирайте один раз для всей игры. Плитки 16 и 32 в одной сцене смотрятся разномасштабно.
• Для разных поверхностей в одном проекте старайтесь держать похожий уровень детализации, иначе граница между ними получится резкой по стилю.
• Для начала хватит четырёх вариаций. Если повторы всё равно заметны, возьмите восемь.
• Если вам нужно ограничить число цветов, пригодится сокращение палитры в бесплатных инструментах.

Если вам нужен персонаж для этой карты, лист героя в восьми направлениях делается по этой инструкции.