Erstellung eines multiplattformfähigen Spiels mit Flutter und Back4app

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 https //www back4app com an eine flutter entwicklungsumgebung ist auf ihrem lokalen rechner eingerichtet folgen sie der flutter installationsanleitung https //flutter dev/docs/get started/install , 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 https //dashboard back4app com/ 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 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 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 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 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 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 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 https //flutter dev/docs und die back4app dokumentation https //www back4app com/docs viel spaß beim programmieren!