Воссоздание знаменитой игры T-Rex с Flutter и Flame

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

узнать больше о Flutter.

TL; DR: Приложение и его исходный код доступны здесь

С тех пор, как я открыл для себя Flutter, я видел так много примеров того, как еще можно достичь этого фреймворка UIwise. А как насчет создания игры?

Почему?

Потому что.

Идея

Итак, я собрал свои вещи и начал задаваться вопросом, как создать игру с Flutter, и, самое главное, было то, что мне делать. Поскольку у меня нет опыта в разработке игр, я решил не создавать игру с нуля, а вместо этого портировать хорошо известную простую игру с открытым исходным кодом с другой платформы. При таком сценарии нет более подходящей игры, чем радость работы в автономном режиме: TRex от Google Chrome.

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

В поисках источника

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

Существует класс под названием Runner, который управляет TRex, Horizon (где находятся облака, линия горизонта и препятствия), оверлеем игры и индикатором очков. Все это обновляется в игровом цикле, реализованном через requestAnimationFrame.

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

Давайте Flutter, что

Пламя - вот слово. Все абстракции, необходимые для реализации игрового цикла, попытки нарисовать объекты на холсте и код для помещения спрайта в объект, все это реализовано Flame, минималистичным движком для 2-мерной игры.

Все готово: мы поняли, как работает TRex HTML5, и половину работы мы сделали во Flutter by Flame.

Такие классы, как Horizon и TRex легко переносятся в концепцию Компонента Flame. Бегун - это наша игра. Такие методы, как Update и Draw, которые присутствуют в некоторых компонентах, имеют аналоги на стороне Flame (Update и render).

Класс TRexGame - это наш Бегун:

Но на этом сходство заканчивается. Основные различия между нашей реализацией и реализацией Chrome - это размер области просмотра (значения x, y были совершенно разными), возможность изменения ориентации экрана и частоты кадров.
Эти проблемы вызвали множество ошибок, когда я портировал игру. Некоторые из них довольно забавные:

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

Результат

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

Смотрите исходный код на Github или скачайте apk для тестирования на свой телефон.

Это список того, что нам еще предстоит сделать:

  • Внедрить систему подсчета очков
  • Приготовить утку TRex
  • Положите туда летающих птеродактилей
  • Поместите несколько звуков

Это предварительный просмотр, запущенный на моем телефоне Android в ландшафтном режиме:

Заключение

Создавать игры - это весело, но с трепетом и пламенем - это здорово!

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

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

С этой парой уже сделано много игр (Flutter и Flame), одна из них - Tales of a lost mine, первая большая игра, полностью сделанная на Flutter. Посмотрите некоторые моменты игрового процесса:

Игра все еще находится в разработке, вы можете скачать демоверсию в игровом магазине.

Ваше здоровье!