5 шагов к созданию клона BomberMan

Аватарка пользователя Daria R

Рассказываем, как разработать клон игры BomberMan, которая запомнилась очень многим. Работать будем в Unity.

Всем привет! Меня зовут Александр Ватолин, я геймдизайнер и преподаватель Московской школы программистов (МШП).

Сегодня мы вспомним классику и повторим основной геймплей игры BomberMan, которая запомнилась очень многим. Работать будем в Unity, необходимые спрайты я предоставлю.

5 шагов к созданию клона BomberMan 1

Очень простая система: вы закладываете бомбы, которые взрываются через некоторое время. После взрыва также разрушаются некоторые клетки. Главное при этом не напороться на взрыв своей бомбы или противника. В общем, очень просто, но со вкусом. Для создания проекта подойдет обычный 2D-шаблон.

5 шагов к созданию клона BomberMan 2

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

Этап 1. Подключение спрайтов

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

5 шагов к созданию клона BomberMan 3

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

5 шагов к созданию клона BomberMan 4

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

5 шагов к созданию клона BomberMan 5

После выбора Miltiple-режима переходим в Sprite Editor. Здесь нам предстоит нарезать спрайты. Нарезать можно как вручную, так и при помощи средств нарезки. Выбирайте то, что вам удобнее.

5 шагов к созданию клона BomberMan 6

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

5 шагов к созданию клона BomberMan 7

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

Этап 2. Строим основную сцену

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

5 шагов к созданию клона BomberMan 8

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

5 шагов к созданию клона BomberMan 9

После этого добавим наши тайлы на палитру. Открыть ее можно через меню Window->2D. Просто добавляем тайлы в палитру и сохраняем их в отдельную папку. После этого мы их настроим.

5 шагов к созданию клона BomberMan 10

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

5 шагов к созданию клона BomberMan 11

А вот так будет выглядеть тайл стены:

5 шагов к созданию клона BomberMan 12

Теперь начинаем рисовать уровень. На слой неразрушаемых объектов размещаем все объекты, которые никак не будут взаимодействовать с миром. Вот так будет выглядеть уровень из оригинальной игры.

5 шагов к созданию клона BomberMan 13

Теперь построим уже разрушаемые объекты – кирпичи.

5 шагов к созданию клона BomberMan 14

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

Этап 3. Основа игрока

Для создания игрока нам понадобятся физические материалы. Создадим два: материал без отскоков и трения и с отскоком.

5 шагов к созданию клона BomberMan 15
5 шагов к созданию клона BomberMan 16
5 шагов к созданию клона BomberMan 17

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

5 шагов к созданию клона BomberMan 18

К примеру, важно не забыть установить материалы без трения. Далее мы добавляем в игрока 5 пустышек – состояний, 4 на каждое из направлений, а пятое на состояние проигрыша. Выглядит это примерно так:

5 шагов к созданию клона BomberMan 19

Каждому из объектов добавляем компонент-спрайт. Устанавливаем нужное изображение. Отключаем все компоненты изображения кроме состояния вниз – это наше стартовое состояние. Выглядит это следующим образом:

5 шагов к созданию клона BomberMan 20
Заметка по слоям, как устанавливал их я : задний слой и стены – 5, основной слой с разрушаемыми объектами на слое 0, а игроки на слое +5.

Мы готовы к реализации управления и анимаций. Вперед!

Этап 4. Управления и анимации

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

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

Сама логика управления примитивна, в цикле Update будем проверять нажатие на клавишу управления, и в случае нажатия будет активироваться специальная функция установки направления.

Функция установки направления SetDirection: будем указывать нужную анимацию, а также указывать вектор направления.

Забежим немного вперед и подумаем о смерти. Будем проверять столкновение со взрывом, и если он произойдет, то мы используем специальную функцию (Death Sequence), активирующую анимацию смерти и запускающую функцию на проверку окончания игры (OnDeathSequenceEnded).

Звучит достаточно сложно, но в реализации куда проще, взгляните сами:

5 шагов к созданию клона BomberMan 21

Этот скрипт имеет крайне симпатичный интерфейс настройки. Все можно настроить прямо из интерфейса

5 шагов к созданию клона BomberMan 22

Переходим к следующему этапу: скрипту управления анимацией. По своей сути это кастомный контроллер анимаций Юнити. Зачем писать свой, когда есть существующий? Вопрос, на самом деле, непростой. Но главная причина в банальном удобстве в дальнейшем обращении в скриптах. Второй скрипт будет содержать набор переменных, хранящих различные параметры (длительность, скорость перехода кадров, зацикленность анимации), а также список хранящихся кадров анимации.

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

5 шагов к созданию клона BomberMan 23

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

5 шагов к созданию клона BomberMan 24

Вот и базовые системы готовы. Теперь нас ждут системы бомб, взрывов бонусов и прочего.

Этап 5. Игровые механики

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

5 шагов к созданию клона BomberMan 25

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

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

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

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

Помимо этого будут работать отдельные функции:

  • Explode – функция расчета направлений взрыва и создания взрыва в направлениях.
  • ClearDestructible – функция уничтожения всех препятствий посредством уничтожения их и создания анимированного клона, который уничтожается (функция работает со стенами.
  • AddBomb – функция, добавляющая в наш багаж бомб дополнительную бомбу. Нужна для работы бонуса с доп. бомбой.
  • OnTriggerExit – функция, работающая со столкновениями с другими бомбами.
  • IEnumerator – основной мозговой центр системы. Принимает решения о взрывах и разрушениях. 

Звучит невероятно сложно, но взгляните, но попробуйте. Все возможно!

5 шагов к созданию клона BomberMan 26

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

5 шагов к созданию клона BomberMan 27

Перейдем к префабу взрыва. Он представляет из себя простой сборный модуль из трех частей.

5 шагов к созданию клона BomberMan 28

Каждая из этих частей содержит анимацию соответствующей части взрыва

5 шагов к созданию клона BomberMan 29

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

А выбор спрайт происходит легко при помощи установки значений и трех публичных переменных. Выглядит это так:

5 шагов к созданию клона BomberMan 30

И главное – не забыть настроить секторы внутри головного модуля. К слову, все эти элементы также можно анимировать.

5 шагов к созданию клона BomberMan 31

Полученный взрыв помещаем в контроллер бомб. Это же касается и префаба бомбы, который представляет из себя анимационный спрайт.

Займемся еще одним декоративным элементом, спрайтом разрушаемой стены.

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

5 шагов к созданию клона BomberMan 32

Устанавливаем все переменные внутри префаба стены и помещаем префабы бонусов.

5 шагов к созданию клона BomberMan 33

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

Вот и вся рабочая логика. Выглядит она следующим образом:

5 шагов к созданию клона BomberMan 34

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

5 шагов к созданию клона BomberMan 35

Проект почти готов. Уже многое работает, но в игре пока что нельзя проиграть! Но сам функционал уже работоспособен.

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

5 шагов к созданию клона BomberMan 36

Самое время превратить игрока в префаб и использовать его.

5 шагов к созданию клона BomberMan 37

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

5 шагов к созданию клона BomberMan 38

Создать его, как можно было увидеть, не так уж и сложно. Зачем он нужен? Вот тут уже есть вопросы. Кому-то эта игра приглянется для души, просто поиграть. Кто-то возьмет ее в свое портфолио, а кто-то, возможно, адаптирует ее для своего собственного аркадного автомата ( к слову, если не знаете, как сделать свой автомат, можете прочитать это здесь).

Надеюсь, статья оказалась полезной. До встречи!

Разработка игр
Unity
1337