Flame in Flutter anwenden

Flame in Flutter anwenden

Wer Mobile-Games in Flutter umzusetzen möchte, kann sich der Flame Bibliothek bedienen, die sehr einfach zu nutzen ist und schnelle Ergebnisse liefert. Dieser Artikel zeigt euch, wie ihr Flame zu Flutter hinzufügt und eine kleine Anwendung baut. Vorher solltet ihr natürlich Flutter installieren. Eine Anleitung findet ihr hier. Dieses Beispiel wurde in VisualStudioCode umgesetzt.

1. Projekt erstellen

Zu Beginn erstellen wir eine leeres Projekt mit einem Konsolen-Befehl in einem beliebigen Verzeichnis. Wir geben folgenden Befehl ein:

create flutter_and_flame

Danach öffnen wir das neue Projekt im VSC und führen es aus, indem wir auf das linke Symbol für “Debug” klicken..

..und ein Device auswählen z.B den IOS Simulator. Der Simulator kann rechts neben dem Start-Button ausgewählt werden.

2. Flame zu Dependencies hinzufügen

Danach fügen wir in der pubspec.yaml Flame zu den Dependencies hinzu.

Nach dem Speichern wird Flame automatisch zum Projekt hinzugefügt.

3. Verzeichnis

Dann erstellen wir im Verzeichnis ./lib eine neue Datei mit dem Namen test-game.dart und füllen sie wie folgt:

Das ist unsere Grundlage für das Spiel. Die Methoden haben folgende Aufgaben:

ender(): Zeichnet Objekte z.B. Rechtecke und Texte.

update(): Nach jedem Frame wird diese Methode aufgerufen.

resize(): Bestimmt die Größe des Bildschirms, in dem das Spiel abläuft.

4. Starten des Spiels

In der main.dart definieren wir oberhalb der Klasse eine Methode zum Starten unserer Spiels.

Innerhalb unserer generierten Klasse MyApp reduzieren wir den Code auf einen Button und etwas Style.

Jetzt haben wir eine Flutter-Anwendung gebaut mit einem Start-Button, der beim Drücken zum Flame-Spiel führt.

Jetzt fehlt nur noch das Spiel.

5. Spiel erstellen

Wir fügen dem Spiel ein Rechteck hinzu.

Mit den privaten Variablen bewegen wir das Rechteck. Innerhalb von update() werden die Werte gesetzt.

Nach jedem Frame wird in update() der x- oder y-Parameter vom Rechteck um 1 erhöht oder gesenkt, je nach Fall. Danach sollte nach dem Drücken von Start ein rotes Rechteck zu sehen sein, das sich im Uhrzeigersinn am Rand des Bildschirms bewegt.

Und so haben wir Flame zu unserem Flutter-Projekt hinzugefügt!