Comment construire un jeu de course sans fin avancé en utilisant Flutter, le Casual Games Toolkit et Back4app

50min
Introduction
Les jeux occasionnels sont populaires pour leur simplicité et leur gameplay engageant, captivant souvent un large public avec des mécaniques faciles à apprendre. Dans ce tutoriel avancé, nous allons développer un jeu de course sans fin entièrement fonctionnel en utilisant l'outil de développement de jeux occasionnels de Flutter. Nous allons intégrer Back4app pour gérer le backend du jeu, stockant des données utilisateur telles que les meilleurs scores, les profils de joueurs et les réalisations. Nous aborderons également des sujets avancés tels que la gestion d'état, l'optimisation des performances et les stratégies de déploiement. À la fin de ce tutoriel, vous aurez un jeu de course sans fin poli prêt à être déployé à la fois sur Android et iOS, complet avec persistance des données et fonctionnalités améliorées.
Prérequis
Avant de commencer, assurez-vous d'avoir ce qui suit :
Environnement de développement Flutter: Installé et configuré. Suivez le guide d'installation officiel de Flutter si vous ne l'avez pas encore configuré.
Connaissances intermédiaires en Flutter: Familiarité avec les widgets Flutter, la gestion d'état et la programmation asynchrone.
Compte Back4app: Inscrivez-vous pour un compte gratuit sur Back4app.
Compréhension de Back4app: Connaissances de base sur la création de projets et la gestion des données. Référez-vous au guide de démarrage de Back4app.
Compte GitHub: Pour cloner des dépôts et gérer le contrôle de version.
Expérience avec les bibliothèques de gestion d'état: Telles que Provider ou Bloc.
Familiarité avec les tests et le déploiement: Compréhension de base de l'écriture de tests et du déploiement d'applications Flutter.
﻿
Étape 1 – Configuration du backend Back4app
1.1 Créer un nouveau projet sur Back4app
Connectez-vous à votre compte Back4app.
Cliquez sur "Créer une nouvelle application" et nommez-la "Jeu de course sans fin avancé".
1.2 Configurer les classes pour les données utilisateur
Nous allons créer des classes pour Utilisateur, Score, et Réussite.
Classe Utilisateur
Champs:
nom d'utilisateur (String)
mot de passe (String)
email (String)
photo de profil (Fichier)
Classe Score
Champs:
utilisateur (Pointeur vers Utilisateur)
meilleur score (Nombre)
niveau (Nombre)
Classe Réussite
Champs:
utilisateur (Pointeur vers l'utilisateur)
nomDeL'accomplissement (Chaîne)
dateAccomplie (Date)
1.3 Configurer la sécurité et les autorisations
Définir les autorisations au niveau de la classe pour sécuriser les données des utilisateurs.
S'assurer que seuls les utilisateurs authentifiés peuvent lire et écrire leurs propres données.
1.4 Ajouter des données d'exemple
Remplir les classes avec des données d'exemple pour tester l'intégration plus tard.
﻿
Étape 2 – Clonage et configuration du modèle Endless Runner
2.1 Cloner le dépôt du kit d'outils de jeux occasionnels Flutter
Bash
git clone https://github.com/flutter/casual-games.git
git clone https://github.com/flutter/casual-games.git
﻿
2.2 Naviguer vers le modèle Endless Runner
Bash
cd casual-games/templates/endless_runner
cd casual-games/templates/endless_runner
﻿
2.3 Ouvrir le projet dans votre IDE
Utiliser Visual Studio Code, Android Studio ou tout IDE préféré.
S'assurer que les plugins Flutter et Dart sont installés.
2.4 Mettre à jour les dépendances
Ouvrir pubspec.yaml et mettre à jour les dépendances vers les dernières versions.
Exécuter:
Bash
flutter pub get
flutter pub get
﻿
﻿
Étape 3 – Améliorer le jeu avec des fonctionnalités avancées
3.1 Implémenter l'authentification des utilisateurs
Nous allons permettre aux joueurs de s'inscrire, de se connecter et de gérer leurs profils.
3.1.1 Ajouter le SDK de Parse Server
Dans pubspec.yaml:
YAML
dependencies:
  parse_server_sdk_flutter: ^3.1.0
dependencies:
  parse_server_sdk_flutter: ^3.1.0
﻿
Exécuter:
Bash
flutter pub get
flutter pub get
﻿
3.1.2 Configurer le service d'authentification
Créer 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 Créer des écrans d'authentification
Écran d'inscription: lib/screens/signup_screen.dart
Écran de connexion: lib/screens/login_screen.dart
Utilisez les widgets Flutter pour créer des formulaires pour la saisie des utilisateurs.
3.2 Améliorer l'UI/UX
Implémentez des animations personnalisées en utilisant AnimationController.
Ajoutez un thème personnalisé dans lib/theme.dart.
3.3 Ajouter des réalisations et des classements
Créez des composants UI pour afficher les réalisations.
Implémentez un écran de classement pour afficher les meilleurs scores au niveau mondial.
﻿
Étape 4 – Intégration de Back4app avec le jeu
4.1 Initialiser Parse dans 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 Stocker les identifiants de manière sécurisée
Utilisez flutter_dotenv pour gérer les variables d'environnement.
Dans pubspec.yaml:
YAML
dependencies:
  flutter_dotenv: ^5.0.2
dependencies:
  flutter_dotenv: ^5.0.2
﻿
Créez un .env fichier (ajoutez-le à .gitignore):
Text
APP_ID=YOUR_APP_ID
CLIENT_KEY=YOUR_CLIENT_KEY
APP_ID=YOUR_APP_ID
CLIENT_KEY=YOUR_CLIENT_KEY
﻿
Mettez à jour 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());
}
﻿
Étape 5 – Mise en œuvre de la gestion d'état
5.1 Choisissez une solution de gestion d'état
Nous utiliserons Provider pour la simplicité.
5.1.1 Ajouter la dépendance Provider
Dans pubspec.yaml:
YAML
dependencies:
  provider: ^6.0.0
dependencies:
  provider: ^6.0.0
﻿
Exécutez :
Bash
flutter pub get
flutter pub get
﻿
5.2 Créer la gestion d'état du jeu
5.2.1 Créer la classe d'état du jeu
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 Fournir l'état du jeu
Dans 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
Consommer l'état du jeu dans les widgets**
Sur votre écran de jeu :
Dart
int score = context.watch<GameState>().score;
int score = context.watch<GameState>().score;
﻿
Étape 6 – Optimisation des performances
6.1 Performance du jeu
Gestion des sprites: Utilisez des feuilles de sprites pour réduire l'utilisation de la mémoire.
Optimisation du taux de rafraîchissement: Limitez le taux de rafraîchissement pour équilibrer performances et autonomie.
6.2 Optimisation du réseau
Mise en cache des données: Implémentez des mécanismes de mise en cache pour réduire les appels réseau.
Requêtes groupées: Utilisez des opérations groupées lors de la communication avec le backend.
6.3 Profilage du code
Utilisez les DevTools de Flutter pour profiler l'application.
Identifiez et corrigez les goulets d'étranglement de performance.
Étape 7 – Gestion robuste des erreurs et tests
7.1 Gestion des erreurs
Blocs Try-Catch: Enveloppez les appels asynchrones pour gérer les exceptions.
Dart
try {
  var result = await someAsyncFunction();
} catch (e) {
  // Handle error
}
try {
  var result = await someAsyncFunction();
} catch (e) {
  // Handle error
}
﻿
Retour d'information utilisateur: Affichez des messages conviviaux lorsque des erreurs se produisent.
7.2 Journalisation
Utilisez le logging package pour enregistrer les erreurs et les événements importants.
Dans pubspec.yaml:
YAML
dependencies:
  logging: ^1.0.2
dependencies:
  logging: ^1.0.2
﻿
7.3 Tests
7.3.1 Tests Unitaires
Écrivez des tests pour vos modèles et services.
Exemple de test dans 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 Tests d'Intégration
Testez l'interface utilisateur et les interactions de l'application.
Utilisez le framework de tests d'intégration de Flutter.
Étape 8 – Déploiement du Jeu
8.1 Préparation au Déploiement
Icônes d'Application et Écrans de Chargement: Personnalisez pour le branding.
Identifiants de Paquet d'Application: Définissez des identifiants uniques pour Android et iOS.
8.2 Construire des Versions de Release
Android
Mettez à jour android/app/build.gradle avec vos configurations de signature.
Exécutez :
Bash
flutter build apk --release
flutter build apk --release
﻿
iOS
Ouvrez ios/Runner.xcworkspace dans Xcode.
Configurez la signature et les capacités.
Exécutez:
Bash
flutter build ios --release
flutter build ios --release
﻿
8.3 Soumission à l'App Store
Google Play Store: Suivez le guide officiel.
Apple App Store: Suivez le guide officiel.
Conclusion
Dans ce tutoriel avancé, nous avons construit un jeu de course sans fin riche en fonctionnalités en utilisant le Casual Games Toolkit de Flutter et intégré Back4app pour les services backend. Nous avons couvert:
Authentification des utilisateurs: Permettre aux joueurs de s'inscrire, de se connecter et de gérer leurs profils.
Gestion d'état: Utiliser Provider pour une gestion d'état efficace.
Optimisation des performances: Améliorer les performances du jeu et du réseau.
Gestion des erreurs et tests: Mettre en œuvre une gestion des erreurs robuste et écrire des tests.
Déploiement: Préparer et soumettre l'application aux magasins d'applications.
Cette approche complète vous dote des compétences nécessaires pour développer des applications Flutter de qualité professionnelle avec des intégrations backend fiables. Vous pouvez également étendre le jeu en ajoutant plus de fonctionnalités, telles que :
Partage social: Permettre aux joueurs de partager leurs réalisations sur les réseaux sociaux.
Achats in-app: Monétiser le jeu avec des articles ou des améliorations achetables.
Support multijoueur: Mettre en œuvre une fonctionnalité multijoueur en temps réel ou au tour par tour.
Pour plus d'informations sur Flutter et l'intégration de Back4app, consultez :
﻿Documentation Flutter﻿
﻿Guide Flutter Back4app﻿
﻿Guides Parse Server﻿
Bonne programmation et développement de jeux !
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Construire une application Flutter avec OverlayPortal et intégration de Back4app
Comment visualiser des données dans Flutter avec fl_chart et Back4App