Share
Die in der Version 2.4.7 von Phaser eingeführten neuen Kamerafunktionen sehen wirklich interessant aus und es lohnt sich, sie auszuprobieren. In diesem Tutorial erfahren Sie, wie einfach es ist, Kameraeffekte in Ihren mit Phaser erstellten HTML5-Spielen anzuwenden.
Hinweis: Wenn Sie eine Einführung in das Phaser-Framework benötigen, können Sie unter Erste Schritte mit Phaser: Erstellen von "Monster Wants Candy" nachsehen, wo der Quellcode aufgeschlüsselt und ausführlich erläutert wird.
Es gibt drei interessante neue Funktionen, die Sie verwenden können: Kamerablitz, Überblenden und Verwackeln. Sie tun genau das, was Sie von ihnen erwarten können. Mal sehen, warum diese sehr nützlich sind und in Ihrem nächsten Entwicklungsprojekt mit Phaser berücksichtigt werden sollten.
Bisher habe ich das Juicy-Plugin verwendet, um solche Funktionalitäten zu erreichen, aber der Quellcode wurde vor langer Zeit aufgegeben und ich musste es selbst verwalten. Da die Funktionen bereits integriert sind und Bestandteil des Phaser-Quellcodes sind, muss ich mich nicht um Kompatibilitätsprobleme oder Aktualisierungen des Frameworks kümmern. Sie sind auch viel einfacher zu implementieren.
Ich verwende das Enclave Phaser Template als Fallstudie - es handelt sich um eine Reihe grundlegender Funktionen, von Zuständen über Audio- und Highscore-Management bis hin zu Tweens und Animationen. Die Vorlage ist Open Source und steht auf GitHub als Teil der Initiative open.enclavegames.com zur Verfügung. So können Sie leicht sehen, wie alles implementiert wurde, einschließlich der neuen Kameraeffekte.
Ok, lass uns zum eigentlichen Implementierungsteil gehen.
Das Blinken der Kamera kann für Treffer oder Aufpralleffekte verwendet werden. Wenn der Spieler beispielsweise von der Kugel des Gegners getroffen wird, kann der Bildschirm für einen kurzen Moment rot werden. Hier ist der Blitzkameraeffekt mit den erläuterten Parametern:
Blitz (Farbe, Dauer, Kraft);
Es füllt den Bildschirm mit der Volltonfarbe und wird über die angegebene Dauer zu Alpha 0 ausgeblendet. Sie können den force-Parameter verwenden, um alle anderen Flash-Effekte zu überschreiben und diese als einziger im aktuellen Moment auszuführen. Die Standardfarbe ist Weiß und der Blitz dauert eine halbe Sekunde (500 Millisekunden):
flash (0xffffff, 500, false);
Das Blinken der Kamera kann für verschiedene Effekte verwendet werden. In der Enclave Phaser-Vorlage wird beim Übergang zu einem neuen Zustand ein nahtloser Übergang vorgenommen, um das Hauptmenü anzuzeigen, nachdem alle Ressourcen geladen wurden. Anstatt alles sofort zu zeigen, können wir den Blitz mit schwarzer Farbe als Basis verwenden:
this.camera.flash (0x000000, 500, false);
Sie wird am Ende der Create-Funktion in der ausgeführt MainMenu.js Datei, die den Menüzustand darstellt. Sie können den Effekt in Aktion auf einem GIF sehen:
Wie Sie sehen, erzielt dies einen schönen, glatten Effekt. Nun geht es weiter zum Kamera-Fade.
Um das Gefühl der Bewegung zwischen Zuständen zu vervollständigen, können Sie mit Fade einen umgekehrten Blitz erzielen und den Zustand glatt ausblenden. Wenn Sie dies richtig machen, kann dies zu einem Ausblendeffekt führen, der wirklich gut aussieht. Hier ist die Theorie:
Verblassen (Farbe, Dauer, Kraft);
Die Parameter sind genau die gleichen wie beim Blitz einer Kamera, außer dass die Standardfarbe nicht weiß ist, sondern schwarz:
Überblenden (0x000000, 500, false);
Es beginnt den Bildschirm von Alpha 0 mit der angegebenen Farbe zu füllen und endet mit einer festen Füllung. Der eigentliche Quellcode aus dem Klicken Sie auf Start Aktion auf der Start-Schaltfläche in der MainMenu.js Datei sieht so aus:
Accentsconagua
clickStart: function () this.camera.fade (0x000000, 200, false); this.time.events.add (200, function () this.game.state.start ('Story');, this); Es blendet den Bildschirm über einen Zeitraum von 200 Millisekunden aus und startet nach der gleichen Zeit einen neuen Status, um beide Aktionen zu synchronisieren. So sieht es in Aktion aus:
Durch das Kombinieren von Flash und Fade wird ein schöner Übergang zwischen den Zuständen erreicht. Nun geht es weiter zum Shake-Effekt.
Eine andere nützliche Phaser-Kameramethode ist Shake. Sie kann für Situationen verwendet werden, in denen ein Spieler beim Durchfliegen des Asteroidenfeldes auf Hindernisse stößt oder eine mächtige Bombe aus dem Inventar verwendet. Es kann ausgeführt werden, wenn mit den auf dem Bildschirm schwebenden Spielobjekten kollidiert wird.
Shake (Intensität, Dauer, Kraft, Richtung, ShakeBounds);
Der erste Parameter legt fest, wie stark die Kamera bewegt wird, und der zweite, wie lange die Verwacklung anhält. Beim dritten geht es darum, den bereits laufenden Shake zu ersetzen, wenn dieser Parameter auf gesetzt ist wahr. Der vierte Parameter steuert das Wackeln horizontal, vertikal oder beides, und der letzte Parameter entscheidet, ob die Kamera außerhalb der Grenzen der Welt wackelt und zeigt, was dort ist. Hier ist das Beispiel mit den Standardwerten:
shake (0,05, 500, wahr, Phaser.Camera.SHAKE_BOTH, wahr);
Es wird die Kamera mit rütteln 0,05 Intensität für eine halbe Sekunde (500 Millisekunden), die Macht Parameter ist auf gesetzt wahr, Die Kamera wird in beide Richtungen und auch außerhalb der Weltgrenzen wackeln. Wenn Sie den Shake nicht anpassen und die Standardparameter beibehalten müssen, können Sie sie einfach in dem Aufruf auslassen. Der oben beschriebene Vorgang funktioniert wie folgt:
Shake();
Und so sieht die tatsächliche Erschütterung im Quellcode der Enclave Phaser-Vorlage aus, wenn die Punkte im hinzugefügt werden Game.js Datei:
this.camera.shake (0.01, 100, true, Phaser.Camera.SHAKE_BOTH, true);
Die letzten drei Parameter sind genau die gleichen wie die Standardparameter. Sie könnten daher weggelassen werden, wurden aber zu Ausbildungszwecken gelassen. Sehen Sie es in Aktion:
In diesem Fall ist die Intensität niedriger als der Standardwert und die Dauer ist kürzer, sodass sie sich etwas schwächer anfühlt, sodass der Spieler nicht zu sehr abgelenkt wird.
Neben den drei oben erläuterten Methoden gibt es auch eine praktische Methode. Sie können alle aktiven Effekte zurücksetzen, und aus der Programmiersicht müssen Sie nicht einmal wissen, ob zur gegebenen Zeit irgendwelche laufen resetFX Methode, die Sie verwenden können.
this.camera.resetFX ();
Sofortige Kameraeffekte werden sofort gelöscht und vom Bildschirm entfernt.
Wenn Sie wissen möchten, ob ein bestimmter Effekt aktiv oder bereits beendet ist, können Sie die vom Framework bereitgestellten Ereignisse verwenden: onFlashComplete, onFadeComplete, und onShakeComplete.
Erinnern Sie sich an das Fade-Beispiel beim Klicken auf die Schaltfläche im Hauptmenü? Dazu wurde eine bestimmte Zeit abgewartet, und dann wurde der Status auf einen neuen Zustand umgestellt. Mit dem können wir es besser machen onFadeComplete Veranstaltung:
clickContinue: function () this.camera.fade (0x000000, 200, false); this.camera.onFadeComplete.add (function () this.game.state.start ('Game');, this); Dieser Weg wurde im nächsten Schritt implementiert, in der Story.js Datei, wenn Sie vom Story-Status zum Spiel wechseln. Sie müssen zugeben, dass es besser aussieht, und der Status wird genau dann gestartet, wenn der Effekt abgeschlossen ist, unabhängig davon, wie lange er anhält.
Wie Sie sehen, sind diese Funktionen sehr leistungsfähig, wenn es darum geht, diesen zusätzlichen "Saft" oder Politur zu Ihren Spielen hinzuzufügen. Sie sind gleichzeitig auch sehr einfach zu bedienen - es ist großartig, sie nativ in Phaser zu implementieren.
Fühlen Sie sich frei, um den Quellcode von Enclave Phaser Template zu erhalten, die Effekte zu implementieren und Links zu Ihren kürzlich aktualisierten Spielen in den Kommentaren mit uns zu teilen!
