Сбер вакансии Backend
Сбер вакансии Backend
Сбер вакансии Backend
Написать пост

Вдохновляясь The Legend of Zeldа: создаем рабочий прототип игры

Инструкция со скринами и гифками!

14К открытий15К показов

Всем привет! Нам предстоит поработать с 2D и немного поностальгировать. Мы создадим рабочий прототип игры, вдохновившись The Legend of Zelda.

А зачем это? Резонный вопрос. Давайте разберемся с этим сразу:

  • Проект в портфолио. Если для вас это новый жанр, с которым вы мало работали, проект раскроет для вас новые ниши и познакомит с новыми приемами разработки.
  • Тайлы. Оказывается, далеко не все знакомы с технологией тайлов. Или у многих она оставляет вопросы, на которые мы сегодня ответим.
  • Большие перспективы. Статья познакомит вас с центральной идеей игры, оставив простор для ее улучшения и развития. Возможно, именно этот прототип станет вашим шедевром.

Что мы затронем:

  • Тайлы. Научимся нарезать их и работать с ними.
  • 2D-анимации. Поговорим о них на базовом уровне.
  • Управление для игрока, врагов. Базовые системы управления, которые сможем улучшить в будущем.
  • Работа с тегами и их использование на практике. Теги — инструмент, о котором частенько забывают. Лишним точно не будет.
  • Обработка триггеров.

Графика

Лучший вариант графики — нарисовать самим. Но если время поджимает или искусство рисования не для вас, то ищите ассеты. В данном случае готов посоветовать itch.io , тут всегда много полезных ассетов в зоне бесплатных или совсем недорогих закупок.

Мою статью не стоит считать классическим пошаговым руководством, поэтому выбор Версии Юнити оставлю за вами. Но советую 2019+, ввиду того, что все инструменты здесь будут присутствовать, а в более старых версиях возможны расхождения.

Итак, проект создан, графика импортирована, что делать далее?

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

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

Вдохновляясь The Legend of Zeldа: создаем рабочий прототип игры 1

Важно обратить внимание на несколько параметров:

— Переключить режим спрайтов в мульти режим. Это позволит создать атлас слайдов, в котором можно будет хранить несколько спрайтов сразу.

— Режим фильтрации. Его стоит установить в точечный режим (без фильтрации), если у вас ассеты низкого разрешения. Это избавит от замыливания картинки.

Переходим к нарезке.

Вдохновляясь The Legend of Zeldа: создаем рабочий прототип игры 2

Здесь тоже стоит ответственно подойти к выбору способа нарезки. В моем случае все тайлы 16*16 пикселей, без зазоров на картинке. Таким образом я расставил сетку и нарезал, после чего подтвердил выбор и получил атлас спрайтов с кучей элементов.

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

Небольшой лайфхак, который сэкономит кучу времени: в спрайт-листах ставьте разрешение пикселей на юнит согласно разрешению вашего тайллиста. Я устанавливаю 16 пикселей на юнит, благодаря чему у меня все спрайты в Юнити 1*1 единицу, что очень удобно в будущем. У вас может быть другое разрешение, не забывайте об этом ?

Пришло время познакомиться с системой тайл-палитры, которую нам предстоит создать. Откроем окно с системой.

Вдохновляясь The Legend of Zeldа: создаем рабочий прототип игры 3

После открытия окна советую сразу же его расположить в каком-то удобном месте, после чего создать собственную палитру, следуя меню create new palette. К слову, размер ячеек стоит установить 1 1, если вы последовали совету с разрешением на Юнит.

Вдохновляясь The Legend of Zeldа: создаем рабочий прототип игры 4

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

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

Вдохновляясь The Legend of Zeldа: создаем рабочий прототип игры 5

Разберем инструменты слева направо:

  • Первые два инструмента отвечают за работу со сценой без использования паллеты. Используйте их, когда нужно просто поработать со сценой.
  • Кисть. Зажимая ЛКМ на паллете, выбирайте область, которая станет вашим трафаретом. Кликая уже на редакторе сцены, вы сможете наносить данный паттерн на сцену. Проще говоря, это основной инструмент художника.
  • Инструмент выбора области. Тут все просто.
  • Пипетка. В тех случаях, когда нужен прям такой же тайл, как в левом углу замка. Палочка выручалочка.
  • Ластик. Куда без него. Избавляет от следов вашего пребывания.
  • Заливка. Когда все вокруг нужно залить одним цветом.

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

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

Вдохновляясь The Legend of Zeldа: создаем рабочий прототип игры 6

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

Вдохновляясь The Legend of Zeldа: создаем рабочий прототип игры 7

В данный момент я добавил три слоя.

  • Back. Для фоновых элементов. Они будет находиться на фоне, и игрок не будет с ними взаимодействовать. Стены замка отличный пример. Для данного слоя я указал Позицию −5, в order in Layer. Данный параметр отвечает за то, какие объекты будут выше на слое, а какие ниже. У персонажа данный параметр 0
  • Walls. Слой для стен и других твердых объектов. О них персонаж будет биться и не сможет проходить сквозь. OiL — 0
  • Dang. Слой для всякой всячины. В данным момент служит декорациями переднего плана. Факелы, щиты, картины и т.д.

Со слоями закончили. Теперь можно наконец немного порисовать и создать свой первый тайл-шедевр. Потратив некоторое количество времени я создал первый уровень для нашей игры.

Вдохновляясь The Legend of Zeldа: создаем рабочий прототип игры 8

Данный этап сугубо творческий и во многом лежит на вашем собственном плече. В зависимости от задумки у вас может быть 1 уровень, 10, хоть 255 уровней.

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

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

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

Вдохновляясь The Legend of Zeldа: создаем рабочий прототип игры 9

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

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

Вдохновляясь The Legend of Zeldа: создаем рабочий прототип игры 10

В данном случае я расположил кадры анимации через 5 кадров игры, что дает достаточную плавность на 60 кадрах.

Что мы имеем на данный момент, подведем промежуточные итоги.

 

У нас уже есть уровень игры с анимацией персонажа. Пришло время заняться врагами, не так ли ?

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

 

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

Игровая логика

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

Начнем с основы: системы управления героем.

Вдохновляясь The Legend of Zeldа: создаем рабочий прототип игры 11

Данный скрипт работает по несложному принципу, который основан на сопоставлении вектора движения и клавиши — нажатия на клавишу. Заранее мы создаем два массива с набором клавиш и набором векторов. Далее обрабатывая нажатия клавиш, мы задаем соответствующие направления, умножая на скорость персонажа.

Для работы данного скрипта понадобятся Rigidbody2D, Box Collider. Ригид оставляем в динамическом режиме, однако устанавливаем масштаб гравитации на 0, чтобы наш персонаж не падал вниз. Аналогично этот пункт будет касаться и врагов. Не забудьте накинуть на стены tilemapCollider, чтобы персонаж сталкивался со стенами.

Следующий скрипт затронет врагов.

Вдохновляясь The Legend of Zeldа: создаем рабочий прототип игры 12

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

На этом этапе нас снова ожидает творческое задание: придумать собственные траектории для движения и реализовать на других врагах. Это может помочь в наполнении игры.

А теперь самый интересный этап. Скрипт, который отвечает за игровые взаимодействия, который ради простоты прототипа сведен в один файл, но при развитии идеи советую вам его разделить на раздельные документы.

Встречаем третьего претендента.

Вдохновляясь The Legend of Zeldа: создаем рабочий прототип игры 13

Игровые взаимодействия в нашем случае выстроены под три вида:

— Столкновение с врагом. Не забудьте на всех врагов повесить Тег врага. В случае столкновения вся сцена перезапустится и уровень начнется заново.

— Столкновение с объектом типа ключ. Он активирует ворота ( пустышка с коллайдером, при входе в которые нас телепортирует далее). Ключ при поднятии уничтожается.

— Столкновение с воротами. Данное взаимодействие телепортирует нас на заготовленную площадку следующего уровня, финала игры и тд.

А как это работает?

Подведем итоги

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

Далее нужно расширять игровые уровни, наполнять контентом игру. Помните творческие задании в статье? Именно они помогут вам раскрыть идею и довести ее до состояния классной данж-игры.

Какие конкретно стоит внести улучшения:

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

На этом мы закончим, буду рад, если поделитесь результатами вашего забега. До встречи!

Следите за новыми постами
Следите за новыми постами по любимым темам
14К открытий15К показов