что такое тайлы на карте

Что такое тайловые карты?

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

Для наших целей мы будем использовать тайловые карты в виде сетки, в которой мы размещаем растровые изображения квадратной формы в каждой ячейке, чтобы собрать подземелье и необходимые игровые элементы. Если вы когда-либо играли в ролевую игру с ручкой и бумагой, такую как Dungeons & Dragons, и вам приходилось рисовать карту с помощью миллиметровой бумаги, вы заметите много общего между этим и тем, что будет делать наше программное обеспечение для этой главы.

Подземелье, используемое для проекта roguelike по книге, в конечном итоге будет иметь несколько уровней. Каждый уровень будет представлять собой сетку с тайловыми картами, в которой стены, комнаты, коридоры и другие элементы будут размещены для создания узнаваемого подземелья в стиле RPG. Давайте научимся рисовать плитки.

Рисование тайловой карты

Исходный код этого раздела находится в папке chapter-3/example-1-simple-tilemap или здесь. Файл HTML такой же как и в прошлых примерах: он просто загружает Phaser и наш файл game.js, в котором на самом деле происходят все интересные моменты этого раздела.

Предварительная загрузка таблицы спрайтов

Текстурный атлас (texture atlas или spritesheet — спрайт-лист) представляет собой файл изображения, который сочетает в себе множество различных графических объектов в одном файле. Веб-игры, как правило, используют их, потому что они позволяют одним файлом передать все необходимые изображения на компьютер игрока.

В нашем примере используется простой текстурный атлас, в котором все изображения имеют одинаковый размер и размещаются рядом друг с другом, как хорошо организованный набор марок на странице. Например, предположим, что каждое изображение имеет размер 10 на 10 пикселей и у вас есть десять изображений в двух строках в спрайт-листе — это означает, что у вас есть один файл изображения размером 20 на 50 пикселей со всеми вашими изображениями внутри. Многие часто называют эти изображения, содержащиеся в текстурном атласе, спрайтами. Однако вы также увидите, что это же слово применяется к элементам игры, которые движутся по экрану, что может сбивать с толку, если вы новичок в разработке игр. Мы будем называть их тайлами или плитками, если они не относятся к игровым элементам, которые представляют собой движущиеся объекты, такие как игрок или монстры. Тем не менее, все они взяты из одного файла.

Наша таблица спрайтов взята из свободно доступного пакета игровых изображений Кенни и выглядит великолепно (рис. 3-1 ). что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на картеРисунок 3-1. Образец текстурного атласа.

Как видно, в нем много разных плиток, и мы сможем комбинировать их для карты для игры в жанре roguelike. Каждое изображение в этой таблице тайлов представляет собой квадрат шириной 16 пикселей. Они разделены промежутками в 1 пиксель. Исходный код для предварительной загрузки таблицы спрайтов требует передачи всей этой информации. Теперь в файле game.js функция preload() выглядит так:

Как и другие методы, функция preload() использует функцию из пространства имен this.load.* для загрузки спрайт-листа. Аргументы этой функции:

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

Базовая карта тайлов

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

И это приведет к подземелью, которое выглядит так: что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на картеРисунок 3-2. Пример простого подземелья 5×5.

Если вы проверите спрайт-лист, то увидите, что область пола являются первым изображением на листе, а область стен — вторым изображением. Поскольку массивы в JavaScript имеют нулевой индекс, то они становятся изображением 0 и изображением 1 из текстурного атласа.

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

В функции create() мы соберем нашу тайловую карту. Карта, используемая в примере кода для этого раздела имеет размер 10×10 плиток.

Мы выбрали 0 для пола и 1 для стены на нашей карте. После этого нам нужно переназначить их на правильные значения для текстурного атласа, который мы используем. Пол в нашем текстурном таласе действительно имеет то же значение, что и значение, которое мы используем, но для стены мы собираемся использовать изображение 826, которое представляет собой кирпичную стену. (Позиция тайлов может меняться в зависимости от версии текстурного атласа).

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

Phaser поддерживает множество различных форматов данных карт, помимо используемых нами массивов. Многие разработчики используют редакторы карт, такие как Tiled, для создания своих карт. Эти редакторы могут экспортировать карту в расширенных форматах, которые Phaser может импортировать. Поскольку мы не используем такие инструменты, нам приходится вручную указывать много данных, которые будут присутствовать в экспортированных данных карты.

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

Параметры метода addTilesetImage :

На тайловых картах Phaser может быть несколько слоев, что очень похоже на работу со слоями Adobe Photoshop. Слои можно использовать для разделения игровых элементов на фоновый и передний слои, чтобы они могли располагаться друг на друге.

Если вы загрузите этот пример в свой браузер, вы увидите тайловую карту, похожую на рисунок 3-3. что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на картеРисунок 3-3. Базовая карта тайлов

И вот так вы рисуете тайловую карту. В этом разделе было много что стоит обмозговать, и очень полезно проверить связанную документацию по функциям Phaser. Еще одно важное упражнение, которое нужно сделать сейчас — это поэкспериментировать с этим массивом карт и различными значениями. Можете ли вы разместить в этой комнате четыре колонны? Скелет на земле?

А как насчет рисования темницы? Что ж, это наш следующий пример.

Базовое подземелье

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

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

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

Загрузите его, и вы увидите подземелье, как на рис. 3-4. что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на картеРисунок 3-4. Базовое подземелье.

Источник

Введение в новую систему тайловых карт Unity

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Знакомство с систему двухмерных тайловых карт Unity даёт отличную возможность экономии времени инди-разработчиков и игровых студий на прототипирование и создание качественных 2D-игр.

Без этой системы можно потратить дни, если не недели на написание собственной системы тайловых карт или переработку чужой. И это только программирование, а как насчёт редактора тайловых карт?

Новая система бесплатна и встроена непосредственно в редактор Unity. Она предоставляет множество возможностей, которые мы рассмотрим в этом туториале.

В этой статье мы воспользуемся простой тайловой 2D-игрой, чтобы узнать следующее:

Примечание: в этом туториале подразумевается, что вы хорошо умеете работать в редакторе Unity. Если вы считаете, что недостаточно в нём освоились, то в туториале Introduction to Unity есть всё необходимое для изучения этого туториала. Кроме того, вам необходима версия Unity 2017.3 или выше.

Что такое тайловая игра?

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

Коллекция имеющихся в игре тайлов называется «тайлсетом», и каждый тайл обычно является спрайтом, частью листа спрайтов (spritesheet). Если вы хотите лучше разобраться с листами спрайтов, то у нас есть туториал, в котором описываются листы спрайтов Unity.

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

Возможно, вам уже известны две самые популярные игры, в которых используется система тайловых карт: Starbound и Terraria.

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Приступаем к работе

Запустите редактор Unity и загрузите проект Rayzor-starter из распакованных материалов проекта.

Вот, с чем вы будете работать в этом проекте:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Создание игры

Откройте сцену Game из папки Scenes.

Нажмите на кнопку Play в редакторе, чтобы запустить игру. В окне Game перемещайте героя клавишами WASD или «стрелками».

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Пока герой бродит по кажущемуся бесконечным фону камеры с цветом #00000, потерявшись в пустоте.

Чтобы исправить это, нам потребуются инструменты 2D-тайлов для построения интересных уровней и механик игры.

Знакомимся с палитрой тайлов

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Это окно станет вашим лучшим другом при работе над тайловыми играми в Unity.

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Нажмите на Create и выберите сохранение новой палитры в папке Assets\Palettes проекта. В ней создайте новую папку RoguelikeCave.

Теперь структура папок вашего проекта должна выглядеть так:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

В окне редактора Tile palette должна быть выбрана RoguelikeCave; на этом этапе у нас всё ещё нет никаких тайлов:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Как художник может творить свои шедевры, если у него нет материалов?

Не закрывая окно Tile Palette, выберите папку проекта Sprites/roguelike-cave-pack и разверните ассет roguelikeDungeon transparent.png. Затем выделите все спрайты в этом листе спрайтов: выберите первый спрайт, зажмите shift и выберите последний спрайт.

Перетащите все выбранные спрайты в окно Tile Palette RoguelikeCave:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Перетащив спрайты в окно Tile Palette, выберите в Unity место для хранения ассетов.

Создайте в Assets/Palettes/RoguelikeCave новую папку Tiles и выберите эту папку в качестве места хранения:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

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

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Повторите описанный выше процесс для создания палитры тайлов с помощью окна Tile Palette, но на этот раз назовите новую палитру RoguelikeCustom.

Поместите новую палитру в новую папку. Назовите папку RoguelikeCustom и переместите её в папку Assets/Palettes проекта.

На этот раз, воспользовавшись описанным выше процессом, используйте спрайты из листа Assets/Sprites/roguelike-custom/roguelike-normal-cutdown-sheet.png для заполнения тайлами новой палитры. Создайте внутри папки палитры RoguelikeCustom папку Tiles и переместите ассеты тайлов туда:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Порадуйтесь за себя, теперь вам известна магия создания тайловой палитры!

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Создание сетки карты тайлов

Откройте меню GameObject в верхней части редактора Unity (или панель меню Unity, если вы работаете под MacOS), нажмите на 2D Object, а затем Tilemap, чтобы создать новую сетку Tilemap:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Вы должны увидеть, что в иерархию сцены добавился новый GameObject Grid. Разверните его и выберите встроенный GameObject Tilemap.

Воспринимайте этот объект Tilemap как слой (возможно, один из многих) вашей игры. Можно добавить новые объекты для создания дополнительных слоёв Tilemap.

В инспекторе вы увидите два компонента, которые Unity автоматически добавила к этому GameObject:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Использование различных инструментов рисования палитры тайлов

Переключитесь в редакторе на режим Scene.

Не закрывая окно Tile Palette, выберите палитру RoguelikeCave, а затем выберите инструмент brush (или нажмите B). Выберите тайл песка, как показано ниже:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

В окне Scene переместите курсор на сетку рядом с игроком. Кисть с тайлом песка будет привязываться к сетке.

Зажав и удерживая левую клавишу мыши, нарисуйте вокруг игрока прямоугольную область. Она будет отрисована на слое Tilemap BaseLayer:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Рисование больших областей может оказаться монотонным занятием, поэтому существует кисть Filled Box, которую можно использовать для закрашивания крупных площадей. В окне Tile Palette нажмите на квадратный значок кисти (или нажмите U).

Вернитесь в редактор и нарисуйте вокруг игрока прямоугольник ещё большего размера, нажав и удерживая левую клавишу мыши, перетаскивая курсор из верхнего левого в нижний праый угол:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

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

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

В окне Tile Palette переключите Active Tilemap на слой DungeonFloorDecoration:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Выберите инструмент brush (B), затем нарисуйте в окне Scene разбросанные на карте объекты:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Отключите, а затем снова включите в иерархии GameObject DungeonFloorDecoration, чтобы увидеть, как отрисовка на активном Tilemap изменяет слой DungeonFloorDecoration, а все отрисованные тайлы попадают на этот новый слой:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Переключите Active Tilemap в окне Tile Palette на Collideable. Выберите инструмент brush (B), а затем нарисуйте следующие тайлы, чтобы построить вокруг игровой области стену. Выделенные красным зоны на изображении ниже — это новые части, которые нужно добавить:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Посмотрите на показанный ниже скриншот окна Tile Palette, чтобы разобраться, где найти тайлы, необходимые для постройки стены. Не забывайте, что можно использовать сочетания CTRL-Z или CMD-Z для отмены действия или стирать ошибки с помощью текущей кисти (удерживая Shift):

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Запустите игру в редакторе и попытайтесь пройти сквозь стену:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Вы ведь не этого ожидали?

Проблема в том, что мы просто нарисовали стандартные тайлы и пока не применяли к слою Tilemap волшебную физику Unity.

Выберите GameObject Collideable и добавьте новый компонент, нажав кнопку Add Component в окне Inspector; в поле поиска введите Tilemap Collider 2D:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Этот компонент был создан специально для тайловых 2D-игр на Unity. Он просто применяет форму физического коллайдера ко всем тайлам слоя, к которому он был добавлен, не выполняя никакой другой работы.

Снова запустите игру и попробуйте пройти сквозь стену. Доступ запрещён!

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Примечание: иногда при движении камеры можно заметить между некоторыми тайлами небольшие чёрные линии. Похоже, что это проблема движения камеры в проектах с системой 2D Tilemap Unity. От неё можно почти полностью избавиться, отключив Anti-Aliasing в параметрах графики. Однако даже если это сделать в проекте-заготовке, эффект всё равно слегка заметен. Решением этой проблемы может стать добавление собственного скрипта движения камеры с пиксельным смещением. Хорошее обсуждение этой проблемы можно найти здесь.

Коллизии работают хорошо, и вы можете подумать, что этого достаточно. Но пока коллайдеры не оптимизированы эффективно. В режиме Scene приблизьте часть стены и посмотрите на контуры коллайдеров:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Вокруг каждого тайла есть коллайдер. Средним секциям стен не нужны эти дополнительные коллайдеры.

Выбрав GameObject Collideable, добавьте к нему компонент Composite Collider 2D. Это также автоматически добавит RigidBody2D.

Задайте параметру BodyType RigidBody2D значение Static, а затем поставьте флажок Used by Composite в компоненте Tilemap Collider 2D:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

После этого вы заметите, что эти ненужные квадратные коллайдеры посередине стен исчезнут.

Завершите создание стен, достроив их вверх и замкнув наверху, высотой примерно в 16 тайлов. Не забывайте. что в качестве Active Tilemap окна Tile Palette должен быть выбран Collideable:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

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

Для отрисовки этих коридоров мы воспользуемся специальной тайловой кистью Rule Tile. Как вы видели в начале туториала, в проект уже добавлены дополнительные тайловые скрипты из Github-репозитория Unity 2D Extras. Одним из них является Rule Tile.

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

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Воспользовавшись инструментом box fill brush (B) в окне Tile Palette и выбрав слой Tilemap BaseLayer, нарисуйте прямую секцию мраморной стены. Нужно, чтобы она закрывала всё пока свободное пространство пола.

Можно заметить, что когда мы будем это делать, слой будет закрывать тайлы стен с колладерами, потому что пока не задан порядок слоёв. Это легко исправить, выбрав GameObject Collideable и изменив Order in Layer компонента Tilemap Renderer на более высокое значение (достаточно будет 5):

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Вернитесь в папку Prefabs проекта, откройте окно Tile и выберите палитру RoguelikeCave, а затем перетащите MarbleFloorRuleTile в пустое место на палитре:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Воспользуйтесь box fill brush и нарисуйте в комнате несколько секций мраморного пола:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Заметьте, что настроенный тайл правил, полностью окружённый со всех углов и граней, становится украшенным тайлом (спрайтом, выбранным в редакторе Tiling Rules).

Это ловушка!

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

Создайте в иерархии новый пустой GameObject и назовите его ShootingTrap. Создайте в ShootingTrap пустой дочерний GameObject. Назовите его Sprite:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Выберите Sprite и добавьте к нему компонент Sprite Renderer. Задайте Sorting Layer значение Player, а Order in Layer значение 1, чтобы он рендерился поверх остальных слоёв. Выберите поле Sprite, а в качестве спрайта поставьте roguelikeDungeon_transparent_180.

Теперь поверните Transform объекта Sprite на -90 по оси Z:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Далее вернитесь к GameObject ShootingTrap и добавьте с помощью инспектора новый компонент. В поле поиска найдите Shooting Trap и прикрепите этот скрипт.

Этот скрипт добавлен в скачанные вами файлы проекта; по сути, он каждые две секунды запускает корутину, создающую экземпляр префаба вращающегося лезвия пилы (или любого другого префаба) в текущей позиции ловушки.

Задайте параметру Item to Shoot Prefab компонента Shooting Trap значение Projectile (префаб находится в /Assets/Prefabs):

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Снова запустите игру в редакторе и воспользуйтесь режимом Scene, чтобы найти ловушку. Она работает!

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Перетащите копию ShootingTrap из иерархии в папку /Assets/Prefabs проекта, чтобы создать префаб. Удалите ShootingTrap из иерархии.

Мы используем ещё один скрипт тайловой кисти под названием PrefabBrush для создания кисти, способной рисовать префабы на слоях Tilemap.

Воспользуйтесь инспектором, чтобы задать параметру Prefabs Size PrefabBrush значение 1, а параметру Element 0 — значение ShootingTrap.

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Создайте в Grid новый слой Tilemap под названием Traps и откройте окно Tile Palette.

Выберите обычную тайловую кисть (B) и воспользуйтесь раскрывающимся меню в нижней части окна Tile Palette для выбора PrefabBrush. Выберите в качестве слоя Active Tilemap Traps и используйте окно Scene для отрисовки нескольких префабов ловушек вдоль левой границы комнаты.

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Разверните в иерархии GameObject Traps и поэкспериментируйте со значением Shoot Start Delay для каждого value on each Gameobject ShootingTrap с помощью скрипта Shooting Trap в инспекторе. Добавляйте к значению каждой ловушки по 0.25, т.е.:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Конечная цель

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

Создайте в GameObject Grid новый слой Tilemap под названием Goal. Выберите Goal и измените значение Tilemap Renderer Order in Layer на 2:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Не закрывая окно Tile Palette, убедитесь, что всё ещё выбрана PrefabBrush. Сделайте так, чтобы Element 0 ссылался на заготовку Goal из папки /Assets/Prefabs проекта.

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

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Последние штрихи

Сейчас подземелье слишком светлое и свободное. Мы можем добавить ему стиля, переключившись на материал 2D-спрайта, способный реагировать на свет.

Выберите Sprite объектов Player, Goal и ShootingTrap, и сделайте так, чтобы Material компонента Sprite Renderer использовал SpriteLightingMaterial:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Это материал с прикреплённым к нему шейдером Sprite/Diffuse. Он позволяет освещению сцены воздействовать на спрайты.

В GameObject Grid выберите объекты BaseLayer, DungeonFloorDecoration, Collideable и Goal, а потом воспользуйтесь инспектором, чтобы тоже использовать в материале Tilemap Renderer Material SpriteLightingMaterial.

Затем выберите в GameObject Lights Directional light и снизьте значение Intensity Light до 0.3.

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Также вы сейчас заметите, что Player носит с собой Point light, то есть светящий вокруг него Lantern.

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

Перетащите две копии префаба FlickerLight из папки /Assets/Prefabs проекта в Scene и разместите их в GameObject Lights.

Задайте первому префабу позицию (X:-11.25, Y:4, Z:-1.35), а второму — (X:2.75, Y:4, Z:-1.35).

Создайте новый слой Tilemap под названием WallsAndObjects и задайте в инспекторе Tilemap Renderer Order in Layer значение 15. Не забудьте, чтобы Material тоже использовал материал SpriteLightingMaterial.

Переключите кисть палитры тайлов обратно на Default Brush, а Active Tilemap на WallsAndObjects.

Воспользуйтесь инструментом brush (B) для отрисовки двух тайлов «света фонарей» под каждым из новых FlickerLight, которые мы разместили по углам начальной области:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Время трудностей

Посмотрим, сможем ли мы ещё больше улучшить подземелье. Используйте слой Tilemap WallsAndObjects для создания книжных шкафов в верхней части комнаты подземелья с помощью другой палитры тайлов под названием RoguelikeCustom. Также нарисуйте одну-две части стены с трещинами.

Вернитесь обратно в слой Tilemap DungeonFloorDecoration и добавьте ещё немного деталей на мраморный пол, например, трещины на нескольких тайлах:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Поздравляю, вы завершили свой первый мини-уровень подземелья! В результате у вас должно получиться нечто подобное:

что такое тайлы на карте. Смотреть фото что такое тайлы на карте. Смотреть картинку что такое тайлы на карте. Картинка про что такое тайлы на карте. Фото что такое тайлы на карте

Куда двигаться дальше?

Если вы пропустили какой-то шаг, то можете посмотреть на готовый результат этого туториала, открыв проект Unity Rayzor-final из скачиваемых материалов.

В этом туториале мы научились многому, но как и в любом другом деле, всегда есть что-то ещё!

Существуют интересные скрипты тайловых кистей, не рассмотренные в этом туториале. Прочитайте о них здесь и подумайте, сможете ли вы воспользоваться ими.

Также можете изучить создание анимированных тайлов здесь.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *