Шаблоны Flutter
Создание многоплатформенной игры с использованием Flutter и Back4app

11min
Введение
Flutter — это универсальный фреймворк с открытым исходным кодом от Google, который позволяет разработчикам создавать нативно скомпилированные приложения для мобильных устройств, веба, настольных ПК и встроенных устройств из единой кодовой базы. Хотя Flutter в первую очередь известен традиционной разработкой приложений, он все чаще используется для разработки игр благодаря своей производительности, обширной экосистеме пакетов и функции горячей перезагрузки.

В этом руководстве мы пройдем через процесс разработки многоплатформенной игры в стиле Flappy Bird с использованием Flutter и Flame, игрового движка, предназначенного для 2D-игр на Flutter. Кроме того, мы подключим игру к Back4App, платформе бэкенда как услуги (BaaS), чтобы хранить пользовательские очки и отображать таблицу лидеров.

К концу этого руководства у вас будет рабочая версия игры, которая будет работать на мобильных и веб-платформах, и она будет хранить и извлекать высокие очки из Back4App.
Предварительные требования
Чтобы завершить этот учебник, вам потребуется:
Аккаунт Back4app. Зарегистрируйтесь для получения бесплатного аккаунта на Back4app.com.
Среда разработки Flutter настроена на вашем локальном компьютере. Следуйте руководству по установке Flutter если вы еще не настроили её.
Базовые знания Dart, виджетов Flutter и концепций разработки игр.
Шаг 1 – Настройка вашего бэкенда Back4app
Создайте проект Back4app: Войдите в свою учетную запись Back4app и создайте новый проект.
Создайте классы Parse: Для этого учебника мы настроим простой бэкенд для управления данными, связанными с играми. В вашем проекте Back4app создайте два класса Parse с именами Player и GameScore:
Player: Хранит информацию о игроке, такую как имя пользователя, уровень и достижения.
GameScore: Хранит очки и рейтинги для игры.
Получите свои учетные данные Back4app: Перейдите в настройки вашего проекта, чтобы получить ваш идентификатор приложения и ключ клиента, которые вам понадобятся для подключения вашей игры Flutter к Back4app.
Шаг 2 – Настройка вашего проекта Flutter
Создайте новый проект Flutter: Откройте терминал или командную строку и выполните:
Добавьте зависимости: Откройте pubspec.yaml и добавьте следующие зависимости:
Инициализируйте Parse в вашем приложении: В lib/main.dart, импортируйте SDK Parse и инициализируйте его в функции main:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'package:flame/flame.dart';
import 'package:flame/game.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyGameApp());
}

class MyGameApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GameScreen(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'package:flame/flame.dart';
import 'package:flame/game.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyGameApp());
}

class MyGameApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GameScreen(),
    );
  }
}
﻿
Замените 'YOUR_BACK4APP_APP_ID' и 'YOUR_BACK4APP_CLIENT_KEY' на ваши фактические учетные данные Back4app.
Шаг 3 – Настройка игры с использованием Flame
Создайте класс игры: Flame — это игровой движок с открытым исходным кодом, построенный на основе Flutter. Он предоставляет инструменты и API для создания 2D-игр. Создайте простой класс игры с использованием Flame:
Dart
import 'package:flame/game.dart';
import 'package:flame/components.dart';

class MySimpleGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    super.onLoad();
    add(PlayerComponent());
  }
}

class PlayerComponent extends PositionComponent {
  @override
  Future<void> onLoad() async {
    // Load player sprite or set up player visuals here
    size = Vector2(50, 50); // Set size of the player
    position = Vector2(100, 100); // Set initial position
    // Optionally, add sprite or animations
  }

  @override
  void update(double dt) {
    // Update player state here
  }

  @override
  void render(Canvas canvas) {
    super.render(canvas);
    // Draw player visuals
    final paint = Paint()..color = Colors.blue;
    canvas.drawRect(size.toRect(), paint);
  }
}
import 'package:flame/game.dart';
import 'package:flame/components.dart';

class MySimpleGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    super.onLoad();
    add(PlayerComponent());
  }
}

class PlayerComponent extends PositionComponent {
  @override
  Future<void> onLoad() async {
    // Load player sprite or set up player visuals here
    size = Vector2(50, 50); // Set size of the player
    position = Vector2(100, 100); // Set initial position
    // Optionally, add sprite or animations
  }

  @override
  void update(double dt) {
    // Update player state here
  }

  @override
  void render(Canvas canvas) {
    super.render(canvas);
    // Draw player visuals
    final paint = Paint()..color = Colors.blue;
    canvas.drawRect(size.toRect(), paint);
  }
}
﻿
  2. Создайте экран игры: Обновите GameScreen виджет, чтобы отобразить игру:
Dart
class GameScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MySimpleGame().widget,
    );
  }
}
class GameScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MySimpleGame().widget,
    );
  }
}
﻿
  3. Запустите игру: Теперь вы можете запустить ваше приложение, используя flutter run чтобы увидеть вашу простую игру в действии. Вы должны увидеть синий квадрат, представляющий игрока.
Шаг 4 – Управление данными игры с помощью Back4app
Сохранение данных игрока: Далее давайте создадим функцию для сохранения данных игрока в Back4app, когда игрок повышает уровень или достигает чего-то:
Dart
Future<void> savePlayerData(String username, int level, List<String> achievements) async {
  final player = ParseObject('Player')
    ..set('username', username)
    ..set('level', level)
    ..set('achievements', achievements);

  final response = await player.save();
  if (response.success) {
    print('Player data saved successfully');
  } else {
    print('Failed to save player data');
  }
}
Future<void> savePlayerData(String username, int level, List<String> achievements) async {
  final player = ParseObject('Player')
    ..set('username', username)
    ..set('level', level)
    ..set('achievements', achievements);

  final response = await player.save();
  if (response.success) {
    print('Player data saved successfully');
  } else {
    print('Failed to save player data');
  }
}
﻿
   2. Получение высоких результатов: Вы также можете получить высокие результаты вашей игры из Back4app, чтобы отобразить их на таблице лидеров:
Dart
Future<List<ParseObject>> fetchHighScores() async {
  final query = QueryBuilder<ParseObject>(ParseObject('GameScore'))
    ..orderByDescending('score')
    ..setLimit(10);

  final response = await query.query();
  if (response.success && response.results != null) {
    return response.results as List<ParseObject>;
  } else {
    print('Failed to fetch high scores');
    return [];
  }
}
Future<List<ParseObject>> fetchHighScores() async {
  final query = QueryBuilder<ParseObject>(ParseObject('GameScore'))
    ..orderByDescending('score')
    ..setLimit(10);

  final response = await query.query();
  if (response.success && response.results != null) {
    return response.results as List<ParseObject>;
  } else {
    print('Failed to fetch high scores');
    return [];
  }
}
﻿
 3. Отобразить таблицу лидеров: Используйте ListView.builder в виджете Flutter для отображения 10 лучших результатов:
Dart
class LeaderboardScreen extends StatefulWidget {
  @override
  _LeaderboardScreenState createState() => _LeaderboardScreenState();
}

class _LeaderboardScreenState extends State<LeaderboardScreen> {
  List<ParseObject> highScores = [];

  @override
  void initState() {
    super.initState();
    fetchHighScores().then((scores) {
      setState(() {
        highScores = scores;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Leaderboard')),
      body: ListView.builder(
        itemCount: highScores.length,
        itemBuilder: (context, index) {
          final score = highScores[index];
          return ListTile(
            title: Text(score.get<String>('playerId') ?? 'Unknown Player'),
            subtitle: Text('Score: ${score.get<int>('score')}'),
          );
        },
      ),
    );
  }
}
class LeaderboardScreen extends StatefulWidget {
  @override
  _LeaderboardScreenState createState() => _LeaderboardScreenState();
}

class _LeaderboardScreenState extends State<LeaderboardScreen> {
  List<ParseObject> highScores = [];

  @override
  void initState() {
    super.initState();
    fetchHighScores().then((scores) {
      setState(() {
        highScores = scores;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Leaderboard')),
      body: ListView.builder(
        itemCount: highScores.length,
        itemBuilder: (context, index) {
          final score = highScores[index];
          return ListTile(
            title: Text(score.get<String>('playerId') ?? 'Unknown Player'),
            subtitle: Text('Score: ${score.get<int>('score')}'),
          );
        },
      ),
    );
  }
}
﻿
Шаг 5 – Добавление расширенных функций с Flame
Если вы хотите добавить более сложные игровые механики, анимации или взаимодействия, вы можете расширить использование Flame, введя дополнительные компоненты, такие как спрайты, физика и обнаружение столкновений. Flame также поддерживает интеграцию с Firebase, что позволяет добавлять многопользовательские функции, покупки внутри приложения и многое другое.
Заключение
В этом учебном пособии вы узнали, как использовать Flutter и Flame для создания простой многоплатформенной игры и как интегрировать Back4app для управления игровыми данными, такими как профили игроков и высокие результаты. Возможность Flutter развертываться на нескольких платформах из одного кода, в сочетании с надежными бэкенд-сервисами Back4app, делает этот стек мощным для разработки и масштабирования игр.
Создавая простую казуальную игру или более сложный интерактивный опыт, Flutter и Back4app предоставляют инструменты для эффективной разработки, развертывания и управления вашей игрой.
Для получения дополнительной информации ознакомьтесь с документацией Flutter и документацией Back4app. Удачного кодирования!
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Учебное пособие по приложению для бронирования конференц-залов с использованием Back4App, Next.js и Vercel
Как создать приложение AI-ответчика на электронные письма с помощью Flutter и Back4App