При создании одиночных игровых объектов, такие как персонажи игры или элементы окружения, удобно просто переносить мышкой нужные спрайты на сцену. Но мир, в котором движется персонаж, может быть очень большим, и тогда рисование всего мира таким способом потребует много времени и сил.
Одним из способов быстро и удобно создать большой игровой мир является объект Tilemap, который разбивает сцену на сетку, а каждой ячейке сетки можно установить разные спрайты. Таким образом мы будем рисовать мир не отдельными объектами, а сразу плитками, которые называют тайлы. Это значительно ускорит процесс создания окружения для персонажа.
Начнем с создания Tilemap, для этого в окне Иерархии щелкните по кнопке добавления нового объекта, выберите пункт "2D Object" - "Tilemap" - "Rectangular", при помощи которого на сцене можно разместить сетку, состоящую из прямоугольных ячеек.
После этого на вашей сцене появится разметка сетки, а в иерархии родительский объект Grid, который содержит в себе наш Tilemap:
Объект Grid (сетка): представляет собой сетку на сцене, которую можно использовать для равномерного размещения игровых объектов внутри ее ячеек.
- Объект Tilemap: является дочерним объектом сетки. Tilemap состоит из плиток, которые будем считать особым типом спрайтов.
Объект Grid является основным, главным и может содержать в себе несколько объектов Tilemap.
При создании игрового мира из тайлов возникают ситуации, когда поверх одной плитки нужно нарисовать другую. Например, на плитку дороги нужно наложить полупрозрачную плитку травы или ямы. В этом случае используется несколько объектов Tilemap, которые отрисовываются в порядке расположения в иерархии. Поэтому у нас есть основной родительский объект Grid, а он в себе может содержать нужное количество тайлмэпов.
Tilemap напрямую не использует спрайты, он использует Tiles (плитки). Чтобы определить, какой тайл в какой ячейке отрисовать, Unity использует палитру. Можно провести аналогию с пиксельным редактором, где Tilemap — это наш холст, на котором мы рисуем, а тайлы — это цветные пиксели, которые рисуются на холсте. Нам нужно создать палитру из плиток, чтобы можно было их выбрать использовать на Tilemap. Но у нас в ресурсах есть только стандартные обычные спрайты, поэтому давайте создадим из них палитру плиток.
Для начала перейдите в окне проекта в папку Art, кликните правой кнопкой мыши в окне с содержимым и выберите пункт Create > Folder:
Созданную папку переименуйте на Tiles:
Теперь создадим палитру. Для этого в меню "Window" выберите пункт "2D" - "Tile Palette":
Откроется новое окно палитры:
Для удобного использования этого окна его лучше разместить рядом с окном инспектора. Зажмите левой клавишей мыши окно палитры и перетащите его чуть правее вкладки окна инспектора:
Сейчас палитра пустая, поэтому воспользуемся кнопкой "Create New Palette", а в новом окне создания палитры задайте имя палитры "GamePalette":
Нажмите кнопку Create, после чего автоматически появится окно для выбора папки, в которой будут сохраняться тайлы. Проверьте, что выбрана папка Tiles, которую мы создали чуть ранее, и нажмите кнопку "Выбор папки":
В окне проекта должен появиться новый файл GamePalette, а имя палитры изменится на аналогичное:
Обратите внимание, что в окне палитры появилась подсказка, что нужно перетащить тайлы, спрайты или текстуры в это окно. Давайте так и сделаем. Скачайте файл плитки по ссылке ниже:
Перенесите мышкой скачанный файл из окна загрузок в проект в папку Environment:
Теперь перенесите файл из папки Environment в окно палитры, при этом откроется окно проводника, в котором необходимо выбрать папку для плиток. Выберите в этом окне папку Tiles, которую мы создавали и нажмите кнопку "Сохранить":
В окне палитры появится первая плитка:
Таким образом можно добавлять новые единичные плитки в нашу палитру.
Попробуйте отрисовать плитку на сцене. Для этого в окне иерархии выберите Tilemap, на котором нужно нарисовать. В окне палитры выберите вверху элемент кисточки, а ниже ту плитку, которую нужно нарисовать. Обратите внимание, что вокруг плитки должна появиться граница:
Но при первой отрисовке нас ждет разочарование - размер плитки меньше, чем ячейка и вокруг получается пустое пространство. Почему?
В окне иерархии выберите объект Grid. В Инспекторе найдите свойство Cell Size. Вы увидите, что x и y равны 1. Это означает, что каждая ячейка имеет 1 единицу ширины и 1 единицу высоты:
В окне палитры кликните по элементу кисточки, чтобы прекратить рисование плиткой, иначе невозможно будет изменить настройки спрайта этой плитки. В окне Project выберите спрайт плитки, который мы импортировали ранее. В Инспектор будут отображены настройки импорта выбранного спрайта. Вы увидите, что для свойства Pixels Per Unit (пикселей на единицу) установлено значение 100:
Свойство "Пиксели на единицу" задает сколько пикселей должно поместиться в 1 единицу, таким образом сообщая Unity, как определить размер спрайта. В данном случае это 100 пикселей на единицу. То есть в ячейку, которая размером 1 на 1 полностью поместится спрайт размером 100 на 100 пикселей.
В нижней части Инспектора посмотрите на размер спрайта плитки. Вы увидите, что его ширина и высота всего 64 пикселя:
Поскольку размер меньше 100 пикселей, то он не заполнит полностью ячейку сетки со сторонами в 1 единицу. Поэтому и появляются пустые границы при отрисовки плитки в ячейке
Измените значение Pixel Per Unit на 64. Таким образом мы сообщим Unity, что в 1 единицу в сцене должны помещаться 64 пикселя этого спрайта, и наш спрайт полностью заполнит ячейку сетки. После изменения значения кликните мышкой по сцене, чтобы появилось окно для подтверждения изменений и нажмите кнопку "Apply":
Теперь при рисовании плитка полностью заполняет ячейку и отрисовка идет без пустых мест:
В следующей части познакомимся с понятием тайлсета.