Flutter Templates
Erstellung eines multiplattformfähigen Spiels mit Flutter und Back4app

11min
Einführung
Flutter ist ein vielseitiges Open-Source-Framework von Google, das Entwicklern ermöglicht, nativ kompilierte Anwendungen für mobile Geräte, das Web, Desktop und eingebettete Geräte aus einer einzigen Codebasis zu erstellen. Obwohl Flutter hauptsächlich für die traditionelle Anwendungsentwicklung bekannt ist, wird es zunehmend für die Spieleentwicklung verwendet, aufgrund seiner Leistung, des umfangreichen Paket-Ökosystems und der Hot-Reload-Funktionalität.

In diesem Leitfaden werden wir durchgehen, wie man ein multiplattformfähiges Flappy Bird-ähnliches Spiel mit Flutter und Flame, einer Spiele-Engine, die für 2D-Spiele in Flutter entwickelt wurde, entwickelt. Darüber hinaus werden wir das Spiel mit Back4App, einer Backend-as-a-Service (BaaS) Plattform, verbinden, um Benutzerscores zu speichern und eine Bestenliste anzuzeigen.

Am Ende dieses Leitfadens werden Sie eine funktionierende Version des Spiels haben, die auf mobilen und Web-Plattformen läuft und die Höchstwerte von Back4App speichert und abruft.
Voraussetzungen
Um dieses Tutorial abzuschließen, benötigen Sie:
Ein Back4app-Konto. Melden Sie sich für ein kostenloses Konto unter Back4app.com an.
Eine Flutter-Entwicklungsumgebung ist auf Ihrem lokalen Rechner eingerichtet. Folgen Sie der Flutter-Installationsanleitung , wenn Sie sie noch nicht eingerichtet haben.
Grundkenntnisse in Dart, Flutter-Widgets und Konzepten der Spieleentwicklung.
Schritt 1 – Einrichten Ihres Back4app-Backends
Erstellen Sie ein Back4app-Projekt: Melden Sie sich bei Ihrem Back4app-Konto an und erstellen Sie ein neues Projekt.
Erstellen Sie Parse-Klassen: Für dieses Tutorial richten wir ein einfaches Backend zur Verwaltung von spielspezifischen Daten ein. Erstellen Sie in Ihrem Back4app-Projekt zwei Parse-Klassen mit den Namen Player und GameScore:
Player: Speichert Spielerinformationen wie Benutzername, Level und Erfolge.
GameScore: Speichert Punktzahlen und Ranglisten für das Spiel.
Holen Sie sich Ihre Back4app-Anmeldeinformationen: Navigieren Sie zu Ihren Projekteinstellungen, um Ihre Anwendungs-ID und Ihren Client-Schlüssel abzurufen, die Sie benötigen, um Ihr Flutter-Spiel mit Back4app zu verbinden.
Schritt 2 – Einrichten Ihres Flutter-Projekts
Erstellen Sie ein neues Flutter-Projekt: Öffnen Sie Ihr Terminal oder Ihre Eingabeaufforderung und führen Sie aus:
Abhängigkeiten hinzufügen: Öffnen Sie pubspec.yaml und fügen Sie die folgenden Abhängigkeiten hinzu:
Initialisieren Sie Parse in Ihrer App: In lib/main.dart, importieren Sie das Parse SDK und initialisieren Sie es in der main-Funktion:
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(),
    );
  }
}
﻿
Ersetzen Sie 'YOUR_BACK4APP_APP_ID' und 'YOUR_BACK4APP_CLIENT_KEY' durch Ihre tatsächlichen Back4app-Anmeldeinformationen.
Schritt 3 – Einrichten des Spiels mit Flame
Erstellen Sie die Spielklasse: Flame ist eine Open-Source-Spiel-Engine, die auf Flutter basiert. Sie bietet Werkzeuge und APIs zum Erstellen von 2D-Spielen. Erstellen Sie eine einfache Spielklasse mit 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. Erstelle den Spielbildschirm: Aktualisiere das GameScreen-Widget, um das Spiel anzuzeigen:
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. Führe das Spiel aus: Du kannst jetzt deine App mit flutter run ausführen, um dein einfaches Spiel in Aktion zu sehen. Du solltest ein blaues Quadrat sehen, das den Spieler darstellt.
Schritt 4 – Verwaltung von Spieldaten mit Back4app
Spielerdaten speichern: Als nächstes erstellen wir eine Funktion, um die Spieldaten zu Back4app zu speichern, wenn der Spieler aufsteigt oder etwas erreicht:
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. Hochpunkte abrufen: Du kannst auch die Hochpunkte für dein Spiel von Back4app abrufen, um sie auf einer Bestenliste anzuzeigen:
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. Zeige die Bestenliste an: Verwende ListView.builder in einem Flutter-Widget, um die Top 10 Punktzahlen anzuzeigen:
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')}'),
          );
        },
      ),
    );
  }
}
﻿
Schritt 5 – Hinzufügen fortgeschrittener Funktionen mit Flame
Wenn du komplexere Spielmechaniken, Animationen oder Interaktionen hinzufügen möchtest, kannst du deine Nutzung von Flame erweitern, indem du zusätzliche Komponenten wie Sprites, Physik und Kollisionserkennung einführst. Flame unterstützt auch die Integration mit Firebase, was Mehrspielerfunktionen, In-App-Käufe und mehr ermöglicht.
Fazit
In diesem Tutorial hast du gelernt, wie man Flutter und Flame verwendet, um ein einfaches plattformübergreifendes Spiel zu erstellen und wie man Back4app integriert, um Spieldaten wie Spielerprofile und Punktzahlen zu verwalten. Die Fähigkeit von Flutter, von einer einzigen Codebasis auf mehreren Plattformen bereitzustellen, kombiniert mit den robusten Backend-Diensten von Back4app, macht dies zu einem leistungsstarken Stack für die Entwicklung und Skalierung von Spielen.
Ob du ein einfaches Casual-Spiel oder ein komplexeres interaktives Erlebnis erstellst, Flutter und Back4app bieten die Werkzeuge, um dein Spiel effizient zu erstellen, bereitzustellen und zu verwalten.
Für weitere Informationen, schau dir die Flutter-Dokumentation und die Back4app-Dokumentation. Viel Spaß beim Programmieren!
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Tutorial zur Buchung von Besprechungsräumen mit Back4App, Next.js und Vercel
ALS NÄCHSTES
Wie man eine KI-E-Mail-Antwort-App mit Flutter und Back4App erstellt