Teilen von Daten zwischen Phaser.js und Vue.js mit Vuex / Sudo Null IT News

Ich habe viel Zeit verloren, als ich versuchte, eine Lösung zu finden – wie man zwischen vue.js und Phaser kommuniziert. Diese Frage interessiert mich, weil. alles, was nicht mit der Spielmechanik zu tun hat, lässt sich viel bequemer und schneller außerhalb der Game-Engine erledigen, zum Beispiel: Autorisierung und Ausgabe von Spielstatistiken.

Da ich einige Erfahrung mit Vue.js habe, habe ich mich entschieden, es für diesen Zweck zu verwenden.

Da Phaser als eigenständige Anwendung ausgeführt wird, können Sie keine Informationen einspeisen oder daraus abrufen, was ein wenig Vorstellungskraft erfordert.

Ich konnte nicht finden, wie man eine Variable durch den Initialisierungsprozess des Spiels an Phaser weitergibt oder wie man Vue von dort aus erreicht. Es scheint, dass beide Tools große Communities haben, aber ich habe nur viele ähnliche Fragen in Foren oder unter YouTube-Videos gefunden – und alle sind entweder unbeantwortet oder enthalten nicht funktionierende oder unvollständige Antworten. Ich habe mich entschieden, diesen kurzen Artikel zu schreiben, weil ich hoffe, anderen Enthusiasten zu helfen, die ganz am Anfang ihrer Reise stehen.

Um Phaser als Ganzes in Vue auszuführen, habe ich das Projekt verwendet –Ionen-Phaser(Artikel).

Weitere Schritt-für-Schritt-Anleitungen:

  1. Wir erstellen ein leeres Projekt. (Fangen wir bei Null an, damit wir auf derselben Seite sind)

vue my-awesome-project erstellen cd my-awesome-project Garn hinzufügen phaser vuex @ion-phaser/core

  1. Phaser einrichten

Sie müssen main.js zwei Zeilen hinzufügen

import {defineCustomElements as defineIonPhaser} from ‘@ion-phaser/core/loader’ defineIonPhaser(window);

Sie müssen auch die Asset-Ladekonfiguration in der Datei festlegen /vue.config.js.

  1. Erstellen Sie eine Speicherdatei – vuex.

Platzieren Sie es in – /src/store/index.js

Wir verbinden es mit der Vue-Anwendung:

// /src/main.js import store from ‘./store’ …. …. createApp(App) .use(store) .mount(‘#app’);

  1. Lassen Sie uns Spiellogik hinzufügen:

Ich habe zum Beispiel genommen Code von der offiziellen Phaser-Website.

Wir verbinden und konfigurieren das Spiel in der Vue-Komponente – /src/game/Game.vue

Achten Sie in dieser Datei auf die Zeilen 44-51. Hier hören wir auf Änderungen im Zustand der Zählvariablen.

Wir werden den Wert selbst innerhalb der Spiellogik ändern. Wir vergeben Punkte für jeden gesammelten Stern)

Lassen Sie uns den Code des Spiellevels in die Datei einfügen – /src/game/scenes/PlayScene.js

Die Datei ist ziemlich lang und enthält nur eine angepasste Kopie des Codes, also betrachten wir nur die Passage, die der Autor hinzugefügt hat:

Store aus “@/store” importieren; /*********/ collectStar(player, star) { star.disableBody(true, true); store commit(‘inkrement’); }

Die erste Zeile fügt vuex in den Spielcode ein.

In Zeile 6 rufen wir die mutating-Methode auf – increment. Einen Stern gesammelt – einen Punkt hinzugefügt.

  1. Lassen Sie uns testen, was wir codiert haben.

Wir starten die Anwendung:

Garn dienen

Auf dem Bildschirm sollten wir das folgende Bild sehen:

Der Spielercharakter, der seinen Kopf auf die Plattform schlägt, lässt die Sterne erscheinen, nachdem er 5 gesammelt hat – eine Nachricht über den Gewinn wird mit Vue.js angezeigt.

Zusammenfassen. Der Artikel behandelte Folgendes:

  • Phaser-Integration in Vue.js

  • Verbinden und Konfigurieren des Vuex-Stores

  • Zustandsaustausch zwischen Vue.js und Phaser in beide Richtungen.

Link zum Quellcode-Repository.

PS: Meine Hauptsprache ist PHP, aber für die allgemeine Entwicklung habe ich in letzter Zeit serverseitiges Javascript gelernt. Die unterhaltsamste Art zu lernen schien mir – ein Multiplayer-Netzwerkspiel zu erstellen. Wenn Sie sich auch für dieses Thema interessieren, freue ich mich auf ein gemeinsames Chatten und Coden 🙂

Similar Posts

Leave a Reply

Your email address will not be published.