Flutter Templates
Créer un jeu multiplateforme en utilisant Flutter et Back4app

12min
Introduction
Flutter est un framework open-source polyvalent de Google qui permet aux développeurs de créer des applications compilées nativement pour mobile, web, bureau et appareils embarqués à partir d'une seule base de code. Bien que Flutter soit principalement connu pour le développement d'applications traditionnelles, il est de plus en plus utilisé pour le développement de jeux en raison de ses performances, de son vaste écosystème de packages et de sa fonctionnalité de rechargement à chaud.

Dans ce guide, nous allons vous montrer comment développer un jeu de style Flappy Bird multiplateforme en utilisant Flutter et Flame, un moteur de jeu conçu pour les jeux 2D dans Flutter. De plus, nous connecterons le jeu à Back4App, une plateforme de backend-as-a-service (BaaS), pour stocker les scores des utilisateurs et afficher un tableau des leaders.

À la fin de ce guide, vous aurez une version fonctionnelle du jeu qui fonctionne sur les plateformes mobiles et web, et qui stockera et récupérera les meilleurs scores depuis Back4App.
Prérequis
Pour compléter ce tutoriel, vous aurez besoin de :
Un compte Back4app. Inscrivez-vous pour un compte gratuit sur Back4app.com.
Un environnement de développement Flutter est configuré sur votre machine locale. Suivez le guide d'installation de Flutter si vous ne l'avez pas encore configuré.
Connaissances de base en Dart, widgets Flutter et concepts de développement de jeux.
Étape 1 – Configuration de votre backend Back4app
Créer un projet Back4app: Connectez-vous à votre compte Back4app et créez un nouveau projet.
Créer des classes Parse: Pour ce tutoriel, nous allons configurer un backend simple pour gérer les données liées aux jeux. Dans votre projet Back4app, créez deux classes Parse nommées Joueur et ScoreDeJeu:
Joueur: Stocke les informations du joueur telles que le nom d'utilisateur, le niveau et les réalisations.
ScoreDeJeu: Stocke les scores et les classements du jeu.
Obtenez vos identifiants Back4app: Accédez aux paramètres de votre projet pour récupérer votre ID d'application et votre clé client, dont vous aurez besoin pour connecter votre jeu Flutter à Back4app.
Étape 2 – Configuration de votre projet Flutter
Créer un nouveau projet Flutter: Ouvrez votre terminal ou invite de commande et exécutez:
Ajouter des dépendances: Ouvrez pubspec.yaml et ajoutez les dépendances suivantes:
Initialiser Parse dans votre application: Dans lib/main.dart, importez le SDK Parse et initialisez-le dans la fonction 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(),
    );
  }
}
﻿
Remplacez 'YOUR_BACK4APP_APP_ID' et 'YOUR_BACK4APP_CLIENT_KEY' par vos véritables identifiants Back4app.
Étape 3 – Configuration du jeu avec Flame
Créer la classe de jeu: Flame est un moteur de jeu open-source construit sur Flutter. Il fournit des outils et des API pour créer des jeux 2D. Créez une simple classe de jeu en utilisant 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. Créer l'écran de jeu: Mettez à jour le GameScreen widget pour afficher le jeu :
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. Exécuter le jeu: Vous pouvez maintenant exécuter votre application en utilisant flutter run pour voir votre jeu simple en action. Vous devriez voir un carré bleu représentant le joueur.
Étape 4 – Gestion des données de jeu avec Back4app
Sauvegarde des données du joueur: Ensuite, créons une fonction pour sauvegarder les données du joueur sur Back4app lorsque le joueur monte de niveau ou réalise quelque chose :
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. Récupération des meilleurs scores: Vous pouvez également récupérer les meilleurs scores de votre jeu depuis Back4app pour les afficher sur un tableau des scores :
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 [];
  }
}
﻿
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 [];
  }
}
﻿
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. Afficher le tableau des leaders: Utilisez ListView.builder dans un widget Flutter pour afficher les 10 meilleurs scores :
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')}'),
          );
        },
      ),
    );
  }
}
﻿
Étape 5 – Ajout de fonctionnalités avancées avec Flame
Si vous souhaitez ajouter des mécaniques de jeu plus complexes, des animations ou des interactions, vous pouvez étendre votre utilisation de Flame en introduisant des composants supplémentaires tels que des sprites, de la physique et la détection de collisions. Flame prend également en charge l'intégration avec Firebase, permettant des fonctionnalités multijoueurs, des achats in-app, et plus encore.
Conclusion
Dans ce tutoriel, vous avez appris à utiliser Flutter et Flame pour construire un jeu multiplateforme simple et comment intégrer Back4app pour gérer les données du jeu telles que les profils de joueurs et les scores élevés. La capacité de Flutter à se déployer sur plusieurs plateformes à partir d'une seule base de code, combinée aux services backend robustes de Back4app, en fait une pile puissante pour développer et faire évoluer des jeux.
Que vous créiez un jeu casual simple ou une expérience interactive plus complexe, Flutter et Back4app fournissent les outils pour construire, déployer et gérer votre jeu efficacement.
Pour plus d'informations, consultez la documentation Flutter et la documentation Back4app. Bon codage !
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Tutoriel de réservation de salle de réunion avec Back4App, Next.js et Vercel
Comment créer une application de réponse par e-mail AI avec Flutter et Back4App