Как создать продвинутую бесконечную бегалку, используя Flutter, инструмент для казуальных игр и Back4app

50min
Введение
Казуальные игры популярны благодаря своей простоте и увлекательному игровому процессу, часто привлекая широкую аудиторию с легкими для освоения механиками. В этом продвинутом учебном пособии мы разработаем полностью функциональную бесконечную беговую игру, используя инструменты для казуальных игр Flutter. Мы интегрируем Back4app для управления бэкендом игры, храня данные пользователей, такие как высокие баллы, профили игроков и достижения. Мы также углубимся в продвинутые темы, такие как управление состоянием, оптимизация производительности и стратегии развертывания. К концу этого учебного пособия у вас будет отшлифованная бесконечная беговая игра, готовая к развертыванию как на Android, так и на iOS, с сохранением данных и улучшенными функциями.
Предварительные требования
Перед началом убедитесь, что у вас есть следующее:
Среда разработки Flutter: Установлена и настроена. Следуйте официальному руководству по установке Flutter, если вы еще не настроили.
Промежуточные знания Flutter: Знание виджетов Flutter, управления состоянием и асинхронного программирования.
Учетная запись Back4app: Зарегистрируйтесь для получения бесплатной учетной записи на Back4app.
Понимание Back4app: Базовые знания о создании проектов и управлении данными. Обратитесь к руководству по началу работы с Back4app.
Учетная запись GitHub: Для клонирования репозиториев и управления версиями.
Опыт работы с библиотеками управления состоянием: Такие как Provider или Bloc.
Знание тестирования и развертывания: Базовое понимание написания тестов и развертывания приложений Flutter.
﻿
Шаг 1 – Настройка бэкенда Back4app
1.1 Создание нового проекта на Back4app
Войдите в свою учетную запись Back4app.
Нажмите "Создать новое приложение" и назовите его "Расширенная бесконечная игра".
1.2 Настройка классов для данных пользователей
Мы создадим классы для Пользователь, Очки, и Достижения.
Класс Пользователь
Поля:
имя пользователя (Строка)
пароль (Строка)
электронная почта (Строка)
фото профиля (Файл)
Класс Очки
Поля:
пользователь (Указатель на Пользователя)
высокий балл (Число)
уровень (Число)
Класс Достижения
Поля:
пользователь (Указатель на пользователя)
названиеДостижения (Строка)
датаДостижения (Дата)
1.3 Настройка безопасности и разрешений
Установите разрешения на уровне класса для защиты данных пользователей.
Убедитесь, что только аутентифицированные пользователи могут читать и записывать свои собственные данные.
1.4 Добавить образцы данных
Заполните классы образцами данных для последующего тестирования интеграции.
﻿
Шаг 2 – Клонирование и настройка шаблона бесконечного бегуна
2.1 Клонировать репозиторий Flutter Casual Games Toolkit
Bash
git clone https://github.com/flutter/casual-games.git
git clone https://github.com/flutter/casual-games.git
﻿
2.2 Перейдите к шаблону бесконечного бегуна
Bash
cd casual-games/templates/endless_runner
cd casual-games/templates/endless_runner
﻿
2.3 Откройте проект в вашей IDE
Используйте Visual Studio Code, Android Studio или любую предпочитаемую IDE.
Убедитесь, что плагины Flutter и Dart установлены.
2.4 Обновите зависимости
Откройте pubspec.yaml и обновите зависимости до последних версий.
Запустите:
Bash
flutter pub get
flutter pub get
﻿
﻿
Шаг 3 – Улучшение игры с помощью расширенных функций
3.1 Реализация аутентификации пользователей
Мы позволим игрокам зарегистрироваться, войти в систему и управлять своими профилями.
3.1.1 Добавить SDK Parse Server
В pubspec.yaml:
YAML
dependencies:
  parse_server_sdk_flutter: ^3.1.0
dependencies:
  parse_server_sdk_flutter: ^3.1.0
﻿
Запустите:
Bash
flutter pub get
flutter pub get
﻿
3.1.2 Настройка службы аутентификации
Создайте lib/services/auth_service.dart:
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();
  }
}
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
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());
}
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:
YAML
dependencies:
  flutter_dotenv: ^5.0.2
dependencies:
  flutter_dotenv: ^5.0.2
﻿
Создайте .env файл (добавьте его в .gitignore):
Text
APP_ID=YOUR_APP_ID
CLIENT_KEY=YOUR_CLIENT_KEY
APP_ID=YOUR_APP_ID
CLIENT_KEY=YOUR_CLIENT_KEY
﻿
Обновите main.dart:
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());
}
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:
YAML
dependencies:
  provider: ^6.0.0
dependencies:
  provider: ^6.0.0
﻿
Запустите:
Bash
flutter pub get
flutter pub get
﻿
5.2 Создайте управление состоянием игры
5.2.1 Создайте класс состояния игры
lib/models/game_state.dart:
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();
  }
}
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:
Dart
import 'package:provider/provider.dart';
import 'models/game_state.dart';

void main() async {
  // ... Parse initialization

  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => GameState()),
      ],
      child: MyApp(),
    ),
  );
}
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
Используйте состояние игры в виджетах**
На экране вашей игры:
Dart
int score = context.watch<GameState>().score;
int score = context.watch<GameState>().score;
﻿
Шаг 6 – Оптимизация производительности
6.1 Производительность игры
Управление спрайтами: Используйте спрайт-листы для уменьшения использования памяти.
Оптимизация частоты кадров: Ограничьте частоту кадров для балансировки производительности и времени работы от батареи.
6.2 Оптимизация сети
Кэширование данных: Реализуйте механизмы кэширования для уменьшения сетевых вызовов.
Пакетные запросы: Используйте пакетные операции при взаимодействии с сервером.
6.3 Профилирование кода
Используйте DevTools Flutter для профилирования приложения.
Определите и исправьте узкие места производительности.
Шаг 7 – Надежная обработка ошибок и тестирование
7.1 Обработка ошибок
Блоки Try-Catch: Оберните асинхронные вызовы для обработки исключений.
Dart
try {
  var result = await someAsyncFunction();
} catch (e) {
  // Handle error
}
try {
  var result = await someAsyncFunction();
} catch (e) {
  // Handle error
}
﻿
Обратная связь от пользователей: Отображайте удобные для пользователя сообщения при возникновении ошибок.
7.2 Логирование
Используйте пакет logging для регистрации ошибок и важных событий.
В pubspec.yaml:
YAML
dependencies:
  logging: ^1.0.2
dependencies:
  logging: ^1.0.2
﻿
7.3 Тестирование
7.3.1 Модульные тесты
Пишите тесты для ваших моделей и сервисов.
Пример теста в test/game_state_test.dart:
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);
  });
}
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 с вашими конфигурациями подписи.
Запустите:
Bash
flutter build apk --release
flutter build apk --release
﻿
iOS
Откройте ios/Runner.xcworkspace в Xcode.
Настройте подпись и возможности.
Запустите:
Bash
flutter build ios --release
flutter build ios --release
﻿
8.3 Отправка в App Store
Google Play Store: Следуйте за официальным руководством.
Apple App Store: Следуйте за официальным руководством.
Заключение
В этом продвинутом уроке мы создали насыщенную функциями бесконечную игру на основе Flutter's Casual Games Toolkit и интегрировали Back4app для бэкенд-сервисов. Мы рассмотрели:
Аутентификация пользователя: Позволяет игрокам регистрироваться, входить в систему и управлять профилями.
Управление состоянием: Использование Provider для эффективного управления состоянием.
Оптимизация производительности: Улучшение производительности игры и сети.
Обработка ошибок и тестирование: Реализация надежной обработки ошибок и написание тестов.
Развертывание: Подготовка и отправка приложения в магазины приложений.
Этот комплексный подход наделяет вас навыками для разработки приложений Flutter профессионального уровня с надежными интеграциями бэкенда. Вы можете дополнительно расширить игру, добавив больше функций, таких как:
Социальный обмен: Позволяет игрокам делиться достижениями в социальных сетях.
Внутренние покупки: Монетизация игры с помощью покупаемых предметов или улучшений.
Поддержка многопользовательского режима: Реализация многопользовательской функциональности в реальном времени или по очереди.
Для получения дополнительной информации о Flutter и интеграции с Back4app, обратитесь к:
﻿Документация Flutter﻿
﻿Руководство Back4app Flutter﻿
﻿Руководства по Parse Server﻿
Счастливого кодирования и разработки игр!
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Создание приложения на Flutter с интеграцией OverlayPortal и Back4app
Как визуализировать данные в Flutter с помощью fl_chart и Back4App