So fügen Sie Ihrem Flame-Spiel ein HUD hinzu

Dies ist der letzte Teil meiner vierteiligen Serie, in der ich lerne, wie man ein einfaches Plattformspiel mit der Flame-Engine erstellt. Wir wissen bereits, wie man einen animierten Spielercharakter hinzufügt, den ich „The Boy“ getauft habe, wie man mit dem Tiled-Editor ein scrollbares Spiellevel erstellt und wie man mithilfe der Kollisionserkennung Schwerkraft und Springen hinzufügt (Teile , , ). 1 2 3 In diesem Teil fügen wir Münzen hinzu, die der Charakter sammeln kann, ein HUD, das anzeigt, wie viele Münzen der Spieler hat, und einen Siegesbildschirm, den wir anzeigen, sobald alle Münzen gesammelt sind. Münzen hinzufügen Wir müssen dem Spiel mitteilen, wo Münzen (oder auch andere Spielobjekte) erscheinen sollen. Wie Sie vielleicht schon erraten haben, werden wir den Tiled-Editor verwenden, um eine weitere Objektebene hinzuzufügen, ähnlich wie wir Plattformen hinzugefügt haben, jedoch mit zwei Unterschieden: Mit den Plattformen haben wir Sprite-Bilder in die Level-Daten integriert. Diese Methode ist für Münzen nicht sehr geeignet, da wir das Objekt entfernen möchten, sobald der Spieler es eingesammelt hat. Wir werden also lediglich Spawnpunkte hinzufügen, um zu wissen, wo Münzen im Spiel erscheinen sollen, und das Rendern erfolgt mithilfe von Flame-Komponenten. Für die Plattformen haben wir Rechtecke beliebiger Größe verwendet, aber für die Münzen werden wir Spawnpunkte in der Größe einer Kachel hinzufügen. Wenn Sie jedoch eine Reihe von Münzen nacheinander hinzufügen möchten (Hallo Mario), können Sie dies ganz einfach tun, indem Sie den Spielcode ändern und beim Hinzufügen von Münzobjekten die Größe eines Spawnpunkts berücksichtigen. Für die Zwecke dieser Serie gehen wir jedoch davon aus, dass die Spawn-Punkte der Münzen 1x1 betragen. Öffnen Sie unser Level im Tiled-Editor und erstellen Sie eine neue Objektebene namens Coins. Fügen Sie dann mit dem Rechteck-Werkzeug mehrere Spawnpunkte auf der Karte hinzu, damit wir mithilfe der Spiel-Engine Münzkomponenten hinzufügen können. Mein Level sieht jetzt so aus: Ich sollte hinzufügen, dass unser Spiel ziemlich einfach ist und wir wissen, dass diese leeren Rechtecke im Laufe der Spiellaufzeit in Münzen umgewandelt werden. Wenn wir jedoch weitere Objekttypen hinzufügen möchten, wird es schwierig, diese zu unterscheiden. Glücklicherweise verfügt Tiled dafür über ein Tool namens „Insert Tile“, das für jedes Objekt visuelle Hinweise hinzufügen kann, diese Bilder werden jedoch nicht im Spiel gerendert. Alles klar, speichere das Level und kehre zur IDE zurück. Fügen wir unsere Klasse zum Ordner hinzu. Coin /objects/ class Coin extends SpriteAnimationComponent with HasGameRef { late final SpriteAnimation spinAnimation; late final SpriteAnimation collectAnimation; Coin(Vector2 position) : super(position: position, size: Vector2.all(48)); @override Future onLoad() async { spinAnimation = SpriteAnimation.fromFrameData( game.images.fromCache(Assets.COIN), SpriteAnimationData.sequenced( amount: 4, textureSize: Vector2.all(16), stepTime: 0.12, ), ); collectAnimation = SpriteAnimation.fromFrameData( game.images.fromCache(Assets.COIN), SpriteAnimationData.range( start: 4, end: 7, amount: 8, textureSize: Vector2.all(16), stepTimes: List.filled(4, 0.12), loop: false ), ); animation = spinAnimation; final hitbox = RectangleHitbox() ..collisionType = CollisionType.passive; add(hitbox); return super.onLoad(); } } Wir haben 2 verschiedene Animationen zum Drehen und Sammeln und eine , um später Kollisionen mit dem Spieler zu überprüfen. RectangleHitbox zurück die Methode Kehren Sie als Nächstes zu game.dart und ändern Sie spawnObjects , um unsere Münzen zu erzeugen: final coins = tileMap.getLayer ("Coins"); for (final coin in coins!.objects) { add(Coin(Vector2(coin.x, coin.y))); } Führen Sie das Spiel aus und sehen Sie sich hinzugefügte Münzen an: Jetzt lassen wir sie verschwinden, wenn der Spieler sie einsammelt. zurück die hinzu Kehren Sie zu coin.dart und fügen Sie collect : void collect() { animation = collectAnimation; collectAnimation.onComplete = () => { removeFromParent() }; } Wenn diese Methode aufgerufen wird, schalten wir die Drehanimation auf die Sammelanimation um und entfernen diese Komponente, sobald sie fertig ist, aus dem Spiel. Klasse die Methode Gehen Sie dann zur theboy.dart und überschreiben Sie onCollisionStart : @override void onCollisionStart(Set intersectionPoints, PositionComponent other) { if (other is Coin) { other.collect(); } super.onCollisionStart(intersectionPoints, other); } Der Grund, warum wir anstelle von verwenden, besteht darin, dass der Kollisionsrückruf nur einmal ausgelöst werden soll. onCollisionStart onCollision Bei einer Kollision mit dem Jungen verschwinden jetzt Münzen. Fügen wir die Benutzeroberfläche hinzu, um die Anzahl der gesammelten Münzen zu verfolgen. Hinzufügen des HUD HUD oder Heads-up-Display ist einfach eine Statusleiste, die alle Informationen über das Spiel anzeigt: Trefferpunkte, Munition usw. Wir werden für jede gesammelte Münze ein Münzsymbol anzeigen. Der Einfachheit halber speichere ich die Anzahl der Münzen in einer Variablen, aber für komplexere Schnittstellen sollten Sie die Verwendung eines Pakets in Betracht ziehen, mit dem Sie den Spielstatus auf bequeme Weise aktualisieren und beobachten können. Flame_bloc- Fügen Sie eine neue Klasse hinzu, die HUD-Logik enthalten soll: lib/hud.dart class Hud extends PositionComponent with HasGameRef { Hud() { positionType = PositionType.viewport; } void onCoinsNumberUpdated(int total) { final coin = SpriteComponent.fromImage( game.images.fromCache(Assets.HUD), position: Vector2((50 * total).toDouble(), 50), size: Vector2.all(48)); add(coin); } } Zwei interessante Dinge hier: Wir setzen auf , um unser HUD an der Bildschirmecke festzuhalten. Wenn wir das nicht tun, bewegt sich das HUD aufgrund der Kamerabewegung mit dem Level. positionType PositionType.viewport Die Methode wird jedes Mal aufgerufen, wenn der Spieler die Münze sammelt. Es verwendet , um den Versatz des nächsten Münzsymbols zu berechnen, und fügt dann ein neues Münz-Sprite an der berechneten Position hinzu. onCoinsNumberUpdated total Datei zurück Kehren Sie als Nächstes zur game.dart und fügen Sie neue Klassenvariablen hinzu: int _coins = 0; // Keeps track of collected coins late final Hud hud; // Reference to the HUD, to update it when the player collects a coin Fügen Sie dann die Hud Komponente am Ende der onLoad Methode hinzu: hud = Hud(); add(hud); Und fügen Sie eine neue Methode hinzu: void onCoinCollected() { _coins++; hud.onCoinsNumberUpdated(_coins); } auf Rufen Sie es schließlich über collect -Methode von Coin : void collect() { game.onCoinCollected(); animation = collectAnimation; collectAnimation.onComplete = () => { removeFromParent() }; } Genial, unser HUD zeigt jetzt an, wie viele Münzen wir gesammelt haben! Bildschirm gewinnen Das Letzte, was ich hinzufügen möchte, ist der Gewinnbildschirm, der angezeigt wird, sobald der Spieler alle Münzen gesammelt hat. Fügen Sie der PlatformerGame Klasse eine neue Konstante hinzu: late int _totalCoins; Und weisen Sie ihm die Anzahl der Münzen zu, die wir im Level haben. Fügen Sie diese Zeile am Ende der spawnObjects Methode hinzu: _totalCoins = coins.objects.length; Und fügen Sie dies am Ende der Methode hinzu. onCoinCollected Beachten Sie, dass Sie möglicherweise manuell. import 'package:flutter/material.dart'; if (_coins == _totalCoins) { final text = TextComponent( text: 'U WIN!', textRenderer: TextPaint( style: TextStyle( fontSize: 200, fontWeight: FontWeight.bold, color: Colors.white, ), ), anchor: Anchor.center, position: camera.viewport.effectiveSize / 2, )..positionType = PositionType.viewport; add(text); Future.delayed(Duration(milliseconds: 200), () => { pauseEngine() }); } Hier überprüfe ich, ob der Münzzähler der Anzahl der Münzen im Level entspricht, und füge, wenn ja, oben auf dem Spielbildschirm ein Win-Label hinzu. Unterbrechen Sie dann das Spiel, um die Bewegung des Spielers zu stoppen. Ich habe außerdem eine Verzögerung von 200 ms hinzugefügt, damit das Etikett vor dem Anhalten gerendert wird. Es sollte so aussehen: Und das ist das Spiel! Natürlich sieht es jetzt noch nicht nach einem fertigen Spiel aus, aber nach allem, was ich erklärt habe, sollte es ziemlich einfach sein, weitere Level, Feinde oder andere Sammelgegenstände hinzuzufügen. Zusammenfassung Dieser Teil schließt die Serie ab. Die Flame-Engine hat noch viel mehr zu bieten, was ich nicht behandelt habe, einschließlich der Physik-Engine Forge2D, Partikel, Effekte, Spielmenüs, Audio usw. Aber nach Abschluss dieser Serie habe ich ein Verständnis dafür, wie die Engine ist, und ich Sie haben ein Verständnis dafür, wie man komplexere Spiele erstellt. Flame ist ein leistungsstarkes und dennoch einfach zu verwendendes und zu erlernendes Tool. Es ist modular aufgebaut, sodass andere coole Dinge wie Box2D integriert werden können, und es wird aktiv gepflegt. Einer der größten Vorteile von Flame besteht jedoch darin, dass es auf Flutter aufbaut, was bedeutet, dass es mit etwas zusätzlichem Aufwand Multiplattform-Unterstützung bietet. Da es sich jedoch um eine Flutter-Erweiterung handelt, bestehen alle Flutter-Probleme auch in Flame fort. Beispielsweise besteht seit mehreren Jahren ohne Lösung, und Sie werden ihn möglicherweise auch in dem von uns erstellten Spiel bemerken. Aber insgesamt ist es ein großartiges Tool zum Erstellen von Spielen, das einen Versuch wert ist. der Antialiasing-Fehler von Flutter Weitere Geschichten der Serie: Bringen Sie Ihrem Charakter bei, in Flammen zu laufen Entwerfen Sie Ihr Level in Flame Verwenden Sie die Kollisionserkennung, um Ihren Spielcharakter zum Springen zu bringen Den vollständigen Code für dieses Tutorial finden Sie in meinem Github Ressourcen Am Ende jedes Teils füge ich eine Liste großartiger Entwickler und Ressourcen hinzu, von denen ich gelernt habe. Die Arcade-Plattform-Assets von GrafxKid Dokumentation zum Tiled Editor DevKages Flame-Spieleentwicklungsreihe: https://youtu.be/mSPalRqZQS8 Craig Odas Kanal https://youtu.be/hwQpBuZoV9s Ember Quest-Spielanleitung Flame Engine-Dokumentation