More
Как создать продвинутую бесконечную бегалку, используя Flutter, инструмент для казуальных игр и Back4app
50 мин
введение казуальные игры популярны благодаря своей простоте и увлекательному игровому процессу, часто привлекая широкую аудиторию с легкими для освоения механиками в этом продвинутом учебном пособии мы разработаем полностью функциональную бесконечную беговую игру, используя инструменты для казуальных игр flutter мы интегрируем back4app для управления бэкендом игры, храня данные пользователей, такие как высокие баллы, профили игроков и достижения мы также углубимся в продвинутые темы, такие как управление состоянием, оптимизация производительности и стратегии развертывания к концу этого учебного пособия у вас будет отшлифованная бесконечная беговая игра, готовая к развертыванию как на android, так и на ios, с сохранением данных и улучшенными функциями предварительные требования перед началом убедитесь, что у вас есть следующее среда разработки flutter установлена и настроена следуйте официальному руководству по установке flutter https //flutter dev/docs/get started/install , если вы еще не настроили промежуточные знания flutter знание виджетов flutter, управления состоянием и асинхронного программирования учетная запись back4app зарегистрируйтесь для получения бесплатной учетной записи на back4app https //www back4app com понимание back4app базовые знания о создании проектов и управлении данными обратитесь к руководству по началу работы с back4app https //www back4app com/docs/get started/welcome учетная запись github для клонирования репозиториев и управления версиями опыт работы с библиотеками управления состоянием такие как provider или bloc знание тестирования и развертывания базовое понимание написания тестов и развертывания приложений flutter шаг 1 – настройка бэкенда back4app 1 1 создание нового проекта на back4app войдите в свою учетную запись back4app нажмите "создать новое приложение" и назовите его "расширенная бесконечная игра" 1 2 настройка классов для данных пользователей мы создадим классы для пользователь , очки , и достижения класс пользователь поля имя пользователя (строка) пароль (строка) электронная почта (строка) фото профиля (файл) класс очки поля пользователь (указатель на пользователя) высокий балл (число) уровень (число) класс достижения поля пользователь (указатель на пользователя) названиедостижения (строка) датадостижения (дата) 1 3 настройка безопасности и разрешений установите разрешения на уровне класса для защиты данных пользователей убедитесь, что только аутентифицированные пользователи могут читать и записывать свои собственные данные 1 4 добавить образцы данных заполните классы образцами данных для последующего тестирования интеграции шаг 2 – клонирование и настройка шаблона бесконечного бегуна 2 1 клонировать репозиторий flutter casual games toolkit git clone https //github com/flutter/casual games git 2 2 перейдите к шаблону бесконечного бегуна cd casual games/templates/endless runner 2 3 откройте проект в вашей ide используйте visual studio code, android studio или любую предпочитаемую ide убедитесь, что плагины flutter и dart установлены 2 4 обновите зависимости откройте pubspec yaml и обновите зависимости до последних версий запустите flutter pub get шаг 3 – улучшение игры с помощью расширенных функций 3 1 реализация аутентификации пользователей мы позволим игрокам зарегистрироваться, войти в систему и управлять своими профилями 3 1 1 добавить sdk parse server в pubspec yaml dependencies parse server sdk flutter ^3 1 0 запустите flutter pub get 3 1 2 настройка службы аутентификации создайте lib/services/auth service dart import 'package\ parse server sdk flutter/parse server sdk flutter dart'; class authservice { future\<parseuser> signup(string username, string password, string email) async { var user = parseuser(username, password, email); var response = await user signup(); if (response success) { return response result; } else { throw exception(response error! message); } } future\<parseuser> login(string username, string password) async { var user = parseuser(username, password, null); var response = await user login(); if (response success) { return response result; } else { throw exception(response error! message); } } future\<void> logout() async { var user = await parseuser currentuser() as parseuser; await user logout(); } } 3 1 3 создание экранов аутентификации экран регистрации lib/screens/signup screen dart экран входа lib/screens/login screen dart используйте виджеты flutter для создания форм для ввода данных пользователем 3 2 улучшение ui/ux реализуйте пользовательские анимации с помощью animationcontroller добавьте пользовательскую тему в lib/theme dart 3 3 добавить достижения и таблицы лидеров создайте компоненты пользовательского интерфейса для отображения достижений реализуйте экран таблицы лидеров для отображения лучших результатов по всему миру шаг 4 – интеграция back4app с игрой 4 1 инициализация parse в main dart void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your app id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, ); runapp(myapp()); } 4 2 безопасное хранение учетных данных используйте flutter dotenv для управления переменными окружения в pubspec yaml dependencies flutter dotenv ^5 0 2 создайте env файл (добавьте его в gitignore ) app id=your app id client key=your client key обновите main dart import 'package\ flutter dotenv/flutter dotenv dart'; void main() async { widgetsflutterbinding ensureinitialized(); await dotenv load(filename " env"); final keyapplicationid = dotenv env\['app id']!; final keyclientkey = dotenv env\['client key']!; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, ); runapp(myapp()); } шаг 5 – реализация управления состоянием 5 1 выберите решение для управления состоянием мы будем использовать provider для простоты 5 1 1 добавьте зависимость provider в pubspec yaml dependencies provider ^6 0 0 запустите flutter pub get 5 2 создайте управление состоянием игры 5 2 1 создайте класс состояния игры lib/models/game state dart import 'package\ flutter/foundation dart'; class gamestate extends changenotifier { int score = 0; int get score => score; void incrementscore() { score++; notifylisteners(); } void resetscore() { score = 0; notifylisteners(); } } 5 2 2 обеспечьте состояние игры в main dart import 'package\ provider/provider dart'; import 'models/game state dart'; void main() async { // parse initialization runapp( multiprovider( providers \[ changenotifierprovider(create ( ) => gamestate()), ], child myapp(), ), ); } 5 2 3 используйте состояние игры в виджетах на экране вашей игры int score = context watch\<gamestate>() score; шаг 6 – оптимизация производительности 6 1 производительность игры управление спрайтами используйте спрайт листы для уменьшения использования памяти оптимизация частоты кадров ограничьте частоту кадров для балансировки производительности и времени работы от батареи 6 2 оптимизация сети кэширование данных реализуйте механизмы кэширования для уменьшения сетевых вызовов пакетные запросы используйте пакетные операции при взаимодействии с сервером 6 3 профилирование кода используйте devtools flutter для профилирования приложения определите и исправьте узкие места производительности шаг 7 – надежная обработка ошибок и тестирование 7 1 обработка ошибок блоки try catch оберните асинхронные вызовы для обработки исключений try { var result = await someasyncfunction(); } catch (e) { // handle error } обратная связь от пользователей отображайте удобные для пользователя сообщения при возникновении ошибок 7 2 логирование используйте пакет logging для регистрации ошибок и важных событий в pubspec yaml dependencies logging ^1 0 2 7 3 тестирование 7 3 1 модульные тесты пишите тесты для ваших моделей и сервисов пример теста в test/game state test dart import 'package\ flutter test/flutter test dart'; import 'package\ your app/models/game state dart'; void main() { test('score increments correctly', () { final gamestate = gamestate(); gamestate incrementscore(); expect(gamestate score, 1); }); } 7 3 2 интеграционные тесты тестируйте интерфейс и взаимодействия приложения используйте фреймворк интеграционного тестирования flutter шаг 8 – развертывание игры 8 1 подготовка к развертыванию иконки приложений и заставки настройте для брендинга идентификаторы пакетов приложений установите уникальные идентификаторы для android и ios 8 2 создание версий для релиза android обновите android/app/build gradle с вашими конфигурациями подписи запустите flutter build apk release ios откройте ios/runner xcworkspace в xcode настройте подпись и возможности запустите flutter build ios release 8 3 отправка в app store google play store следуйте за официальным руководством https //developer android com/distribute/console apple app store следуйте за официальным руководством https //developer apple com/app store/submit/ заключение в этом продвинутом уроке мы создали насыщенную функциями бесконечную игру на основе flutter's casual games toolkit и интегрировали back4app для бэкенд сервисов мы рассмотрели аутентификация пользователя позволяет игрокам регистрироваться, входить в систему и управлять профилями управление состоянием использование provider для эффективного управления состоянием оптимизация производительности улучшение производительности игры и сети обработка ошибок и тестирование реализация надежной обработки ошибок и написание тестов развертывание подготовка и отправка приложения в магазины приложений этот комплексный подход наделяет вас навыками для разработки приложений flutter профессионального уровня с надежными интеграциями бэкенда вы можете дополнительно расширить игру, добавив больше функций, таких как социальный обмен позволяет игрокам делиться достижениями в социальных сетях внутренние покупки монетизация игры с помощью покупаемых предметов или улучшений поддержка многопользовательского режима реализация многопользовательской функциональности в реальном времени или по очереди для получения дополнительной информации о flutter и интеграции с back4app, обратитесь к документация flutter https //flutter dev/docs руководство back4app flutter https //www back4app com/docs/flutter/overview руководства по parse server https //docs parseplatform org счастливого кодирования и разработки игр!