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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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