Ich wollte schon immer Videospiele machen. Meine allererste Android-App, die mir dabei geholfen hat, meinen ersten Job zu bekommen, war ein einfaches Spiel, das mit Android-Ansichten erstellt wurde. Danach gab es viele Versuche, mithilfe einer Game-Engine ein aufwändigeres Spiel zu erstellen, die jedoch alle am Zeitmangel oder an der Komplexität eines Frameworks scheiterten. Aber als ich zum ersten Mal von der auf Flutter basierenden Flame-Engine hörte, war ich sofort von ihrer Einfachheit und plattformübergreifenden Unterstützung fasziniert und beschloss, ein Spiel damit zu entwickeln. Ich wollte mit etwas Einfachem, aber dennoch Anspruchsvollem beginnen, um ein Gefühl für den Motor zu bekommen. Diese Artikelserie ist meine Reise zum Erlernen von Flame (und Flutter) und zum Erstellen eines einfachen Plattformspiels. Ich werde versuchen, es ziemlich detailliert zu gestalten, sodass es für jeden nützlich sein sollte, der sich gerade erst mit Flame oder Spieleentwicklern im Allgemeinen beschäftigt. Im Laufe von 4 Artikeln werde ich ein 2D-Side-Scrolling-Spiel erstellen, das Folgendes umfasst: Ein Charakter, der rennen und springen kann Eine Kamera, die dem Spieler folgt Scrollende Levelkarte mit Boden und Plattformen Parallaxenhintergrund Münzen, die der Spieler sammeln kann, und HUD, das die Anzahl der Münzen anzeigt Bildschirm gewinnen Im ersten Teil erstellen wir ein neues Flame-Projekt, laden alle Assets, fügen einen Spielercharakter hinzu und bringen ihm das Laufen bei. Projektaufbau Lassen Sie uns zunächst ein neues Projekt erstellen. Das offizielle Tutorial beschreibt alle Schritte dazu hervorragend. Befolgen Sie es also einfach. zum Bare Flame-Spiel Eines muss noch hinzugefügt werden: Wenn Sie die Datei einrichten, können Sie die Bibliotheksversionen auf die neueste verfügbare Version aktualisieren oder sie unverändert lassen, da das Caret-Zeichen (^) vor einer Version sicherstellt, dass Ihre App die neueste Version verwendet -brechende Version. ( ) pubspec.yaml Caret-Syntax Wenn Sie alle Schritte befolgt haben, sollte Ihre Datei so aussehen: main.dart import 'package:flame/game.dart'; import 'package:flutter/widgets.dart'; void main() { final game = FlameGame(); runApp(GameWidget(game: game)); } Vermögenswerte Bevor wir fortfahren, müssen wir die Ressourcen vorbereiten, die für das Spiel verwendet werden. Assets sind Bilder, Animationen, Sounds usw. Für die Zwecke dieser Serie verwenden wir nur Bilder, die in der Spieleentwicklung auch Sprites genannt werden. Der einfachste Weg, ein Plattform-Level zu erstellen, ist die Verwendung von Kachelkarten und Kachel-Sprites. Das bedeutet, dass die Ebene im Grunde ein Raster ist, in dem jede Zelle angibt, welches Objekt, welchen Boden oder welche Plattform sie darstellt. Später, wenn das Spiel läuft, werden die Informationen aus jeder Zelle dem entsprechenden Kachel-Sprite zugeordnet. Mit dieser Technik erstellte Spielgrafiken können sehr aufwändig oder sehr einfach sein. In Super Mario Bros sieht man beispielsweise, dass sich viele Elemente wiederholen. Das liegt daran, dass es für jedes Bodenplättchen im Spielfeld nur ein Bodenbild gibt, das es darstellt. Wir werden den gleichen Ansatz verfolgen und für jedes statische Objekt, das wir haben, ein einzelnes Bild vorbereiten. Wir möchten auch, dass einige der Objekte, wie zum Beispiel der Spielercharakter und die Münzen, animiert werden. Animationen werden normalerweise als eine Reihe von Standbildern gespeichert, die jeweils ein einzelnes Bild darstellen. Bei der Wiedergabe einer Animation werden Einzelbilder nacheinander abgespielt, wodurch die Illusion entsteht, dass sich das Objekt bewegt. Die wichtigste Frage ist nun, woher man das Vermögen bekommt. Natürlich können Sie sie selbst zeichnen oder einen Künstler damit beauftragen. Außerdem gibt es viele großartige Künstler, die Spielressourcen zu Open Source beigetragen haben. Ich werde von verwenden. das Arcade Platformer Assets-Paket GrafxKid Typischerweise gibt es Bildressourcen in zwei Formen: Sprite-Sheets und einzelne Sprites. Ersteres ist ein großes Bild, das alle Spielinhalte in einem enthält. Dann geben die Spieleentwickler die genaue Position des benötigten Sprites an und die Spiel-Engine schneidet es aus dem Blatt. Für dieses Spiel werde ich einzelne Sprites verwenden (mit Ausnahme von Animationen, es ist einfacher, sie als ein Bild beizubehalten), da ich nicht alle im Sprite-Sheet bereitgestellten Elemente benötige. Unabhängig davon, ob Sie Sprites selbst erstellen oder von einem Künstler beziehen, müssen Sie sie möglicherweise in Scheiben schneiden, damit sie besser für die Spiel-Engine geeignet sind. Sie können speziell für diesen Zweck erstellte Tools (z. B. oder einen beliebigen grafischen Editor verwenden. Ich habe Adobe Photoshop verwendet, da die Sprites in diesem Sprite-Sheet einen ungleichen Abstand zwischen ihnen haben, was es für automatische Tools schwierig machte, Bilder zu extrahieren, sodass ich es manuell tun musste. Texture Packer) Möglicherweise möchten Sie auch die Größe der Assets erhöhen, aber wenn es sich nicht um ein Vektorbild handelt, könnte das resultierende Sprite unscharf werden. Eine Problemumgehung, die sich meiner Meinung nach hervorragend für Pixelkunst eignet, besteht darin, die Größenänderungsmethode in Photoshop zu verwenden (oder „Interpolation“ in Gimp auf „Keine“ zu setzen). Wenn Ihr Asset jedoch detaillierter ist, wird es wahrscheinlich nicht funktionieren. Nearest Neighbour (hard edges) Nachdem Sie die Erklärungen aus dem Weg geräumt haben, laden Sie herunter oder bereiten Sie Ihre eigenen vor und fügen Sie sie dem Ordner Ihres Projekts hinzu. die von mir vorbereiteten Assets assets/images Wenn Sie neue Assets hinzufügen, müssen Sie diese wie folgt in der Datei registrieren: pubspec.yaml flutter: assets: - assets/images/ Und der Tipp für die Zukunft: Wenn Sie bereits registrierte Assets aktualisieren, müssen Sie das Spiel neu starten, um die Änderungen zu sehen. Jetzt laden wir die Assets tatsächlich in das Spiel. Ich mag es, alle Asset-Namen an einem Ort zu haben, was für ein kleines Spiel großartig ist, da es einfacher ist, den Überblick über alles zu behalten und es bei Bedarf zu ändern. Erstellen wir also eine neue Datei im Verzeichnis: lib assets.dart const String THE_BOY = "theboy.png"; const String GROUND = "ground.png"; const String PLATFORM = "platform.png"; const String MIST = "mist.png"; const String CLOUDS = "clouds.png"; const String HILLS = "hills.png"; const String COIN = "coin.png"; const String HUD = "hud.png"; const List<String> SPRITES = [THE_BOY, GROUND, PLATFORM, MIST, CLOUDS, HILLS, COIN, HUD]; Und dann erstellen Sie eine weitere Datei, die in Zukunft die gesamte Spiellogik enthalten wird: game.dart import 'package:flame/game.dart'; import 'assets.dart' as Assets; class PlatformerGame extends FlameGame { @override Future<void> onLoad() async { await images.loadAll(Assets.SPRITES); } } ist die Hauptklasse, die unser Spiel repräsentiert. Sie erweitert , die Basisspielklasse, die in der Flame-Engine verwendet wird. Was wiederum erweitert – den Grundbaustein von Flame. Alles in Ihrem Spiel, einschließlich Bilder, Benutzeroberfläche oder Effekte, sind Komponenten. Jede verfügt über eine asynchrone Methode , die bei der Komponenteninitialisierung aufgerufen wird. Normalerweise befindet sich dort die gesamte Komponenten-Setup-Logik. PlatformerGame FlameGame Component Component onLoad Schließlich haben wir unsere zuvor erstellte Datei importiert und hinzugefügt, um explizit anzugeben, woher unsere Assets-Konstanten stammen. Und nutzte die Methode , um alle in der Liste aufgeführten Assets in den Spielbild-Cache zu laden. assets.dart as Assets images.loadAll SPRITES Dann müssen wir unser neues aus erstellen. Ändern Sie die Datei wie folgt: PlatformerGame main.dart import 'package:flame/game.dart'; import 'package:flutter/widgets.dart'; import 'game.dart'; void main() { runApp( const GameWidget<PlatformerGame>.controlled( gameFactory: PlatformerGame.new, ), ); } Alle Vorbereitungen sind abgeschlossen und der spaßige Teil beginnt. Spielercharakter hinzufügen Erstellen Sie einen neuen Ordner und darin eine neue Datei . Dies wird die Komponente sein, die den Spielercharakter repräsentiert: Der Junge. lib/actors/ theboy.dart import '../game.dart'; import '../assets.dart' as Assets; import 'package:flame/components.dart'; class TheBoy extends SpriteAnimationComponent with HasGameRef<PlatformerGame> { TheBoy({ required super.position, // Position on the screen }) : super( size: Vector2.all(48), // Size of the component anchor: Anchor.bottomCenter // ); @override Future<void> onLoad() async { animation = SpriteAnimation.fromFrameData( game.images.fromCache(Assets.THE_BOY), SpriteAnimationData.sequenced( amount: 1, // For now we only need idle animation, so we load only 1 frame textureSize: Vector2.all(20), // Size of a single sprite in the sprite sheet stepTime: 0.12, // Time between frames, since it's a single frame not that important ), ); } } Die Klasse erweitert eine Komponente, die für animierte Sprites verwendet wird und über ein Mixin verfügt, das es uns ermöglicht, auf das Spielobjekt zu verweisen, um Bilder aus dem Spielcache zu laden oder später globale Variablen abzurufen. SpriteAnimationComponent HasGameRef In unserer Methode erstellen wir eine neue aus dem Sprite-Sheet, das wir in der Datei deklariert haben. onLoad SpriteAnimation THE_BOY assets.dart Jetzt fügen wir unseren Spieler zum Spiel hinzu! Kehren Sie zur Datei zurück und fügen Sie am Ende der Methode Folgendes hinzu: game.dart onLoad final theBoy = TheBoy(position: Vector2(size.x / 2, size.y / 2)); add(theBoy); Wenn Sie das Spiel jetzt ausführen, sollten wir The Boy treffen können! Spielerbewegung Zuerst müssen wir die Möglichkeit hinzufügen, The Boy über die Tastatur zu steuern. Fügen wir das Mixin zur Datei hinzu. HasKeyboardHandlerComponents game.dart class PlatformerGame extends FlameGame with HasKeyboardHandlerComponents Als nächstes kehren wir zum Mixin und zurück: theboy.dart KeyboardHandler class TheBoy extends SpriteAnimationComponent with KeyboardHandler, HasGameRef<PlatformerGame> Fügen Sie dann einige neue Klassenvariablen zur Komponente hinzu: TheBoy final double _moveSpeed = 300; // Max player's move speed int _horizontalDirection = 0; // Current direction the player is facing final Vector2 _velocity = Vector2.zero(); // Current player's speed Abschließend überschreiben wir die Methode , die das Abhören von Tastatureingaben ermöglicht: onKeyEvent @override bool onKeyEvent(RawKeyEvent event, Set<LogicalKeyboardKey> keysPressed) { _horizontalDirection = 0; _horizontalDirection += (keysPressed.contains(LogicalKeyboardKey.keyA) || keysPressed.contains(LogicalKeyboardKey.arrowLeft)) ? -1 : 0; _horizontalDirection += (keysPressed.contains(LogicalKeyboardKey.keyD) || keysPressed.contains(LogicalKeyboardKey.arrowRight)) ? 1 : 0; return true; } Jetzt ist gleich 1, wenn sich der Spieler nach rechts bewegt, -1, wenn sich der Spieler nach links bewegt, und 0, wenn sich der Spieler nicht bewegt. Allerdings können wir es noch nicht auf dem Bildschirm sehen, da die Position des Spielers noch nicht verändert ist. Lassen Sie uns das beheben, indem wir die Methode hinzufügen. _horizontalDirection update Jetzt muss ich erklären, was die Spielschleife ist. Im Grunde bedeutet es, dass das Spiel in einer Endlosschleife läuft. In jeder Iteration wird der aktuelle Status in der Methode gerendert und dann ein neuer Status in der Methode berechnet. Der Parameter in der Signatur der Methode ist die Zeit in Millisekunden seit der letzten Statusaktualisierung. Fügen Sie in diesem Sinne Folgendes zu hinzu: render Component's update dt theboy.dart @override void update(double dt) { super.update(dt); _velocity.x = _horizontalDirection * _moveSpeed; position += _velocity * dt; } Für jeden Spielschleifenzyklus aktualisieren wir die horizontale Geschwindigkeit unter Verwendung der aktuellen Richtung und der Höchstgeschwindigkeit. Dann ändern wir die Sprite-Position mit dem aktualisierten Wert multipliziert mit . dt Warum brauchen wir den letzten Teil? Wenn Sie die Position nur mit der Geschwindigkeit aktualisieren, fliegt das Sprite in den Weltraum. Aber können wir einfach den kleineren Geschwindigkeitswert verwenden, fragen Sie sich vielleicht? Das ist möglich, aber die Art und Weise, wie sich der Spieler bewegt, wird je nach Bildrate pro Sekunde (FPS) unterschiedlich sein. Die Anzahl der Frames (oder Spielschleifen) pro Sekunde hängt von der Spielleistung und der Hardware ab, auf der es ausgeführt wird. Je besser die Geräteleistung, desto höher die FPS und desto schneller bewegt sich der Spieler. Um dies zu vermeiden, machen wir die Geschwindigkeit von der Zeit abhängig, die seit dem letzten Frame vergangen ist. Auf diese Weise bewegt sich das Sprite bei jedem FPS ähnlich. Okay, wenn wir das Spiel jetzt ausführen, sollten wir Folgendes sehen: Großartig, jetzt lasst uns den Jungen dazu bringen, sich umzudrehen, wenn er nach links geht. Fügen Sie dies am Ende der Methode hinzu: update if ((_horizontalDirection < 0 && scale.x > 0) || (_horizontalDirection > 0 && scale.x < 0)) { flipHorizontally(); } Ziemlich einfache Logik: Wir prüfen, ob sich die aktuelle Richtung (der Pfeil, den der Benutzer drückt) von der Richtung des Sprites unterscheidet, und drehen dann das Sprite entlang der horizontalen Achse. Fügen wir nun auch eine Laufanimation hinzu. Definieren Sie zunächst zwei neue Klassenvariablen: late final SpriteAnimation _runAnimation; late final SpriteAnimation _idleAnimation; Dann aktualisieren Sie wie folgt: onLoad @override Future<void> onLoad() async { _idleAnimation = SpriteAnimation.fromFrameData( game.images.fromCache(Assets.THE_BOY), SpriteAnimationData.sequenced( amount: 1, textureSize: Vector2.all(20), stepTime: 0.12, ), ); _runAnimation = SpriteAnimation.fromFrameData( game.images.fromCache(Assets.THE_BOY), SpriteAnimationData.sequenced( amount: 4, textureSize: Vector2.all(20), stepTime: 0.12, ), ); animation = _idleAnimation; } Hier haben wir zuvor hinzugefügte Leerlaufanimationen zur Klassenvariablen extrahiert und eine neue Laufanimationsvariable definiert. Als nächstes fügen wir eine neue Methode hinzu: updateAnimation void updateAnimation() { if (_horizontalDirection == 0) { animation = _idleAnimation; } else { animation = _runAnimation; } } Rufen Sie schließlich diese Methode am Ende der Methode auf und führen Sie das Spiel aus. update Abschluss Das war’s für den ersten Teil. Wir haben gelernt, wie man ein Flame-Spiel einrichtet, wo man Assets findet, wie man sie in das Spiel lädt und wie man einen fantastischen animierten Charakter erstellt und ihn auf der Grundlage von Tastatureingaben bewegt. Den Code für diesen Teil finden Sie . auf meinem Github Im nächsten Artikel beschreibe ich, wie man mit Tiled ein Spiellevel erstellt, wie man die Flame-Kamera steuert und wie man einen Parallaxenhintergrund hinzufügt. Bleiben Sie dran! Ressourcen Am Ende jedes Teils füge ich eine Liste großartiger Entwickler und Ressourcen hinzu, von denen ich gelernt habe. GrafxKids Arcade-Plattform-Assets https://opengameart.org/content/arcade-platformer-assets DevKage Flame-Spieleentwicklungsreihe: https://youtu.be/mSPalRqZQS8 Craig Oda-Kanal https://youtu.be/hwQpBuZoV9s Ember Quest-Spiel-Tutorial https://github.com/flame-engine/flame/blob/main/doc/tutorials/platformer/platformer.md Flame Engine-Dokumentation https://docs.flame-engine.org/1.6.0/flame/flame.html
