Создание кроссплатформенной игры на Flutter за неделю
Рассказываем, как сделать мобильный кликер и адаптировать его для Android, iOS, ПК и веба.
22К открытий23К показов
Часто мобильные разработчики не хотят браться за создание игр, потому что это кажется долгим и трудоёмким процессом. Это работа с памятью и спрайтами, сложные UI/UX и много оптимизации. И если вы уже разрабатывали приложения под Android, то наверняка представляете, как было бы трудно создавать игры на нативном коде. Именно по этой причине стоить задуматься о разработке на Flutter — SDK от Google для создания кроссплатформенных приложений.
На GitHub есть пример игры Spaceblast, созданной на этом SDK.
Целью этой статьи является разработка мобильной игры-кликера. В ней вы сражаетесь с врагами, зарабатываете монеты и тратите их на улучшения своего персонажа.
Разработка игры
Начнём с простого. Сделаем отображение фона и счётчик, который уменьшается при каждом нажатии на экран. Счётчик будет показывать оставшееся здоровье босса.
Вот что должно получиться после добавления визуальных элементов:
Следующим шагом будет добавление UI-элементов, которые сделают игру более приятной. Потребуются спрайты персонажа, боссов (которым будет наноситься урон), бонусов и монет.
Для анимации персонажа используется всего 2 изображения. Первый кадр — для состояния покоя, второй — для атаки. При нажатии на экран эти изображения будут переключаться между собой. Это создаст визуальный эффект удара.
Для боссов же понадобится больше изображений. Это сделает игру более разнообразной и интересной.
У каждого босса есть имя, показатель жизни и спрайт.
Для бонусов код аналогичный:
У каждого бонуса есть название оружия, эффект усиления от базового урона (если вы его купили) и количество монет, необходимое для приобретения этого усиления.
После этого можно добавить визуальный «хитбокс», который будет отображаться при каждом нажатии на экран:
Этот код добавляет визуальный элемент на позицию прикосновения пальца. Так же он добавляет небольшую подсказку о количестве нанесённого урона (с некоторым смещением вверх).
При прикосновении используется параметр TapDownDetails
для получения X и Y координат пальца.
Ещё нужно добавить логику скрытия этих элементов после того, как игрок отведёт палец от экрана.
В добавлении списка бонусов тоже нет ничего сложного:
Теперь добавим некоторые визуальные улучшения для всех кнопок, заднего фона и оружия.
На текущем моменте игра выглядит так:
Звуки и музыка
Звуки играют очень важную роль в играх. Добавим их:
Теперь при нанесении удара, убийстве босса, получении монет или покупке улучшения будет воспроизводиться этот звук. Но в игре всё ещё нет фоновой музыки. Это нужно исправить:
Звук будет проигрываться из InitState
и будет остановлен из метода Dispose
. Если присмотреться, то в игре можно увидеть кастомные шрифты — они не обязательны, но делают игру более ламповой.
Экран приветствия
В каждой игре должен быть экран приветствия. Он даёт игроку некую подсказку о том, что ждёт его в игре.
Тут экран приветствия был создан из спрайта босса, игрока и фонового изображения с логотипом.
Ещё в экран приветствия был добавлен эффект Blur (размытие) и немного частиц огня и пепла. Код эффекта выглядит так:
Код частиц можно найти в этом репозитории.
Вот так выглядит итоговый результат:
Добавление механик в игру
По желанию можно усложнить игру, сделав её разнообразнее и интереснее. Например, можно добавить ограничение по времени. Оставшееся время будет увеличиваться при каждом убийстве босса. Ещё можно дать возможность поделиться результатом в соц. сетях.
Для отсчёта времени используется обычный AnimationController
. Он отсчитывает прошедшее время в миллисекундах, пока не достигнет 0. Если вам нужно форматировать время для строки, то используйте этот фрагмент кода:
Если счётчик достигнет 0, то будет активироваться «Game over»:
Поддержка геймпада
Это экспериментальная функция, поэтому с ней может происходить всё, что угодно.
Пока можно попробовать варианты Android + Switch Pro Controller (PS4 и Xbox Controller остаются в стороне).
Для работы с геймпадом нужно использовать каналы. Вначале код для Android Kotlin:
Его можно разместить внутри класса MainActivity
. Ещё вы можете реализовать интерфейс InputManager.InputDeviceListner
для обнаружения подключения/отключения геймпада:
При каждом из этих событий Android будет отправлять данные в канал:
Этот код будет обрабатывать запрос на получение названия устройства и его статус подключения. Если хотите прослушивать события с Android, то внутри метода initState
вам нужно вставить следующий код:
Аргументы могут быть следующими:
Результат:
Запуск на других платформах
Наверное, главным преимущество Flutter является его кроссплатформенность. Игры на нём можно запускать на Android, iOS, ПК и даже в вебе.
iOS
Первым делом вам потребуется Mac с установленным на нём XCode. Только так вы сможете собрать билд игры.
Прим. перев. Есть также вариант использовать codemagic.io.
Если вы используете Android Studio, то после нажатия на RUN выберете iOS устройство. Для этого у вас должна быть включена опция «Open iOS Simulator».
Ещё вы можете запустить игру на определённом устройстве по его ID. Идентификатор устройства можно посмотреть во «flutter devices», а после выполнить следующее:
ПК
Для компьютеров сборка игры чуть сложнее из-за дополнительных шагов. Её можно проводить не только на Mac, но и на Windows или Linux.
Процесс сборки игры детально описан в этой статье. В терминале нужно выполнить следующую команду:
export ENABLE_FLUTTER_DESKTOP=true
После этого вы сможете клонировать официальный репозиторий Flutter для ПК:
git clone https://github.com/google/flutter-desktop-embedding.git
cd example
Теперь вы должны скопировать папки «Mac», «Windows» и «Linux» в папку вашего проекта.
После этого нужно внести небольшие изменения в код:
Этот метод нужно вызвать в main()
.
Убедитесь, что вы импортировали эти два класса:
Примечание Если вам нужно заблокировать поворот экрана на телефоне, то добавьте этот код перед возвратом в методе сборки:
И наконец игру можно запускать на ПК. Целевая платформа должна появится в списке устройств.
Веб
Да, браузеры тоже никто не отменял. О сборке игр на Flutter под веб-версию описано в этой статье.
Процесс идентичен сборке под ПК. Сначала вам нужно клонировать репозиторий (там есть пример «hello_world
»):
git clone git@github.com:flutter/flutter_web.git
cd examples/hello_world
Убедитесь, что вы используете последнюю версию Flutter:
flutter upgrade
И ещё вам потребуется пакет для веб-разработки:
flutter packages pub global activate webdev
flutter packages upgrade
Именно благодаря ему вы сможете собирать игры и запускать их в браузере. После этого нужно указать путь к Dart
и Webdev
и изменить импортируемые библиотеки для flutter_web
, например:
После этого нужно перенести все ассеты игры в папку /web/assets
. Под конец остаётся нажать на строку webdev serve
над терминалом.
Вот и всё. Теперь открыть игру в браузере можно по ссылке http://localhost:8080/
.
Получение фактического URL
Знаете ли вы что-то о хостинге на Firebase? С его помощью вы сможете разместить ваше приложение и получить его URL. Вам нужна услуга «хостинг» и подробный гайд по ней:
После этого вам нужно будет создать своё Flutter Web App:
webdev build
В вашем проекте вы увидите новые папки: «build
» и «public
». Скопируйте всё содержимое первой во вторую. Последним шагом будет деплой:
firebase deploy
Вот и всё! Теперь ваше приложение должно быть доступно по адресу .web.app
вашего домена. В игру из примера можно поиграть тут: https://gametaphero.web.app/#/
Примечание В папке public
есть файл index.html
. Он следует той же логике, что и любая веб-страница: для сайта можно установить иконку, цвет строки поиска (для Chrome mobile), название приложения и т. д.
22К открытий23К показов