Wie Sie sehen können, hat diese Klasse drei leere Methoden. Diese kommen mit dem Phaser.Szenenklasse. Jede dieser Methoden hat eine andere Funktion, wie unten erläutert
Spielst du Spiele. Duh! . Hmm.. . Mit vielen beweglichen Teilen (im wahrsten Sinne des Wortes) scheint die Spielentwicklung auf Entwickler beschränkt zu sein, die ihre Füße tief in das heilige Wasser von Networking, Mathematik, Grafik und dergleichen eingetaucht sind. . In diesem Artikel werden wir uns schrittweise implementieren, um ein Echtzeit -Multiplayer -Spiel der Space -Invaders zu erhalten (ah, die Nostalgie!) mit Phaser3 und geschickt Echtzeit. Ich habe das letzte Spiel unter https: // space-invaders-multiplayer veranstaltet..com/ damit Sie es ausprobieren können. Auf dem Weg werden wir die Architektur, das Systemdesign und die Vernetzungsprotokolle dahinter verstehen und auch die Vorbehalte sehen. Diese Tutorial -Serie ist in vier Teile unterteilt:
Teil 1: Einführung in Gaming -Konzepte und die Phaser -Bibliothek
Teil 4: Beenden Sie den clientseitigen Code, um das Spiel zu rendern
Eine letzte Sache, bevor wir anfangen. In diesem Artikel wird ein grundlegendes Verständnis von JavaScript und Express/NodeJS angenommen.
Lassen Sie uns Spiele holen!
Teil 1 – Einführung in Gaming -Konzepte und Phaser
Betrachten wir zunächst die Regeln für das Spiel, da es nicht genau mit dem ursprünglichen Retro -Klassiker übereinstimmen wird.
Spielregeln für Multiplayer Space Invaders
Wenn sich ein neuer Spieler anschließt, wird ihm zufällig einen Monster -Avatar aus den drei verfügbaren Sorten zugewiesen.
Jeder Spieler kann seinen Avatar nach links oder rechts mit den Pfeiltasten auf seiner Tastatur bewegen
Jeder Spieler wird seinen eigenen Avatar in Weiß sehen, aber alle anderen werden in einer zufälligen Farbe, die ihnen zugewiesen ist
Wenn sich eine voreingestellte Anzahl von Spielern dem Spiel anschließt, wird ein Schiff gestartet. . Zusammen mit diesem wird sich auch die Geschwindigkeit des Schiffes ändern.
Alle Avatare bewegen sich automatisch mit einem voreingestellten Inkrement während des gesamten Spiels nach unten.
Das Ziel, das Spiel zu gewinnen.
Komponenten eines Echtzeit -Multiplayer -Spiels
Schauen wir uns die einzelnen dieser weiter an.
1. Vermögenswerte
. . In ähnlicher Weise würde jedes Audio, das Sie im Spiel vorstellen und spielen möchten, unter seine Vermögenswerte fallen.
Wenn Sie daran interessiert sind, das Thema Ihres Spiels Super Arcade zu machen, können Sie dieses Pixel -Kunst -Tutorial von Glauber Kotaki folgen, um zu erfahren, wie.
2.
Physik ist das, was uns die Vermögenswerte bewegen und entscheidet, wie unterschiedliche Objekte in unserem Spiel miteinander interagieren. . In ähnlicher Weise könnte dies in unserem Spiel das Computer beinhalten, wohin das Schiff gehen muss, mit welcher Geschwindigkeit, der Aufnahmen von Kugeln, der Kollision dieser Kugelobjekte mit den Avataren der Spieler usw.
All diese Dinge sind im Grunde mathematische Berechnungen im Einklang mit den Konzepten der Physik unter der Motorhaube. Aber so viel Mathematik kann selbst für ein einfaches Spiel von Grund auf von Grund auf selbst zu schreiben sein. .
. Networking
. Es kann super schwierig sein, die Synchronisation zwischen allen Spielern aufrechtzuerhalten, herauszufinden, welcher Spieler gestorben ist und ob alle anderen dieser Behauptung zustimmen.
. Es gibt viele bereits bestehende Designmuster, die uns helfen können, die richtige Weise zu starten. Wir können wählen, wie wir die Spielarchitektur in Bezug auf die Mechanik des jeweiligen Spiels sein sollen. .
.
Verwenden Sie Phaser 3, um Vermögenswerte hinzuzufügen und die Physik zu aktivieren
Phaser ist ein Open-Sourcing-Leinwand und ein WebGL-Rendering-JavaScript-Framework für HTML5. Wir werden Phaser 3 verwenden, um das Spiel zu bauen. Der Grund, warum ich die Version ausdrücklich erwähne, ist, dass zwischen Phaser 2 und 3 viele Bruchänderungen enthalten, einschließlich der Syntax. Wenn Sie dem Spiel in Zukunft selbst einige coole neue Funktionen hinzufügen möchten, sollten Sie wissen, was/wo Sie aussehen sollen.
. .
Es gibt eine wirklich gute Video -Tutorial -Serie für Phaser, die ich empfehlen würde, wenn Sie zum ersten Mal mit Phaser 3 arbeiten.
In der TL; DR -Version von IT mit Phaser3 können wir ein Konfigurationsobjekt angeben, das die Informationen über die Leinwand und das Spiel selbst enthält, einschließlich der Größe der Leinwand, ihrer Stilattribute, verschiedenen Szenen, die in unserem Gameplay enthalten sind (Kurz gesagt), Art der Physik -Engine (wie Phaser viele) usw.
Anschließend bestehen wir das Konfigurationsobjekt, um ein neues Spiel zu starten.
Dies klingt vielleicht ein bisschen verwirrend, da Sie noch keinen Code gesehen haben. Lass uns das als nächstes machen.
Gehen wir vorerst direkt zum Spielbildschirm. Wir werden uns später um die Start- und Ranglistenseiten kümmern. . . . . Um die Dinge organisiert zu halten, speichern wir alle unsere HTML-Dateien in einem Ordner namens Ansichten und alle clientseitigen JavaScript-Dateien in einem Ordner namens Public . .HTML -Datei mit einem Basis -Skelett:
Wie Sie sehen können, ist alles, was wir hier tun. Sie können das CSS direkt aus dem GitHub -Projekt kopieren
Abgesehen davon haben wir im HTML-Körper eine DIV mit einer ID von Gamecontainer . Hier werden wir unsere Spielcanvas über JavaScript hinzufügen.
..
Wie Sie sehen können, haben wir abgesehen von der Angabe der Größe der Leinwand und ihrer Hintergrundfarbe auch angegeben, wohin diese Leinwand gehen muss (identifiziert von übergeordnetem) und ein Array der Szenen, die wir gerne Teil davon sein möchten Spiel.
. . Wenn Sie ein Spiel spielen, ist es wahrscheinlich eine separate Szene von dem, was Sie zuvor gesehen haben.
Für unser Spiel haben wir eine einzige Szene (identifiziert von Gamescene). Eine Szene in Phaser ist eine Klasse, die den Phaser erweitert.Szenenklasse. Lassen Sie uns dies für unser Spiel definieren. .
Wie Sie sehen können, hat diese Klasse drei leere Methoden. Diese kommen mit dem Phaser.Szenenklasse. Jede dieser Methoden hat eine andere Funktion, wie unten erläutert
Die Voroad () -Methode erhält alle Ressourcen, die wir möglicherweise benötigen, wo immer sie sind.
Die Methode create () wird einmal ausgeführt, wenn das Spiel zum ersten Mal ausgeführt wird. Wir können alle variablen Initialisierungen, Animationsdefinitionen usw. in dieser Methode hinzufügen.
Die update () -Methode wird in einer Schleife kontinuierlich ausgeführt. ..
Lassen Sie uns jetzt einige Vermögenswerte laden. Definieren Sie die vorload () -Methode wie folgt
Ich habe dieses Spiel ursprünglich auf Glitch veranstaltet, das alle Vermögenswerte in seinem Eimer speichert und von einem CDN -Link abgerufen werden kann. .
Wir haben drei Arten von Avataren hinzugefügt, alle in Weiß und drei weiteren Farben. Abgesehen von diesen haben wir auch Vermögenswerte für Schiff, Kugel und natürlich die Explosion hinzugefügt, wenn ein Spieler stirbt.
Wie Sie sehen können, haben wir einen Spritesheet -Asset in Phaser mit diesem geladen.Belastung.
die Kennung
Die Abmessungen der Datei (in Pixeln).
Wir können es auch einfach ein Bild nennen, aber dann können wir die coolen Animationen damit nicht machen, wie Sie in Kürze sehen werden.
P.. Es gibt einen besseren Weg, um die Avatar -Farben zu implementieren. . Ich weiß noch nicht wie, aber ich werde das aktualisieren, wenn ich es herausgefunden habe 🙂
Wenn Sie das Sprite -Blatt “Explosion” inspizieren, werden Sie feststellen, dass es sich um eine Reihe verschiedener Bilder handelt, die nebeneinander platziert sind. .
In der Methode create () definieren wir die Animation für diese Explosion:
… Diese Methode aufnimmt:
Der Schlüssel, den wir später verwenden werden, um diese Animation abzuspielen
Wir werden vorerst nichts in die Methode update () hinzufügen. .
Das war es fürs Erste.
Eine separate Version, die für dieses Tutorial relevant ist.
.
. Meine DMs sind offen 🙂
. Das Spiel spielt in einer prähistorischen, mythischen Welt […]
. .. […]
.
.
. . Aus […]
. . Alles ist viel […]
Unturned ist ein freies Spiel mit dem Zombie-Surdbox Survival Nahkampf- und Shooter-Spiel für PC (Windows, Mac und Linux) im aufstrebenden MMO/Multiplayer-Apokalypse-Überlebensgenre (obwohl Sie auch alleine oder in Coop in PVE spielen können).
Totemori ist ein unterhaltsames und innovatives kostenloses Multiplayer-Brawler-Spiel mit Shared-Screen-Spielen, bei dem Sie Türme bauen, während Sie versuchen, alle anderen zu stürzen. . Spielen Sie gegen Ihre Freunde oder üben Sie gegen Bots, […]
. . . . Bauen Sie Ihre Junkschiffe zu Formen und Größen buchstäblich und kämpfen Sie gegen die Kreationen von […]
. Und es ist jetzt frei zu spielen.
. !
Trove ist ein kostenlos zu spielenes, offenes Action-Abenteuer-Voxel-MMORPG von Trion Worlds für PC (Windows, Mac), Xbox One, PS4 und Nintendo Switch. . Erforschen und Ihren Weg erstellen […]
Erstellen eines Echtzeit -Multiplayer -Browser -Spiels in weniger als einem Tag – Teil 1/4 – Dev -Community, Multiplayer -Gebäude | Freie Spiele
by • Computerspiele • 0 Comments
Freie Spiele
Spielst du Spiele. Duh! . Hmm.. . Mit vielen beweglichen Teilen (im wahrsten Sinne des Wortes) scheint die Spielentwicklung auf Entwickler beschränkt zu sein, die ihre Füße tief in das heilige Wasser von Networking, Mathematik, Grafik und dergleichen eingetaucht sind. . In diesem Artikel werden wir uns schrittweise implementieren, um ein Echtzeit -Multiplayer -Spiel der Space -Invaders zu erhalten (ah, die Nostalgie!) mit Phaser3 und geschickt Echtzeit. Ich habe das letzte Spiel unter https: // space-invaders-multiplayer veranstaltet..com/ damit Sie es ausprobieren können. Auf dem Weg werden wir die Architektur, das Systemdesign und die Vernetzungsprotokolle dahinter verstehen und auch die Vorbehalte sehen. Diese Tutorial -Serie ist in vier Teile unterteilt:
Eine letzte Sache, bevor wir anfangen. In diesem Artikel wird ein grundlegendes Verständnis von JavaScript und Express/NodeJS angenommen.
Lassen Sie uns Spiele holen!
Teil 1 – Einführung in Gaming -Konzepte und Phaser
Betrachten wir zunächst die Regeln für das Spiel, da es nicht genau mit dem ursprünglichen Retro -Klassiker übereinstimmen wird.
Spielregeln für Multiplayer Space Invaders
Komponenten eines Echtzeit -Multiplayer -Spiels
Schauen wir uns die einzelnen dieser weiter an.
1. Vermögenswerte
. . In ähnlicher Weise würde jedes Audio, das Sie im Spiel vorstellen und spielen möchten, unter seine Vermögenswerte fallen.
Wenn Sie daran interessiert sind, das Thema Ihres Spiels Super Arcade zu machen, können Sie dieses Pixel -Kunst -Tutorial von Glauber Kotaki folgen, um zu erfahren, wie.
2.
Physik ist das, was uns die Vermögenswerte bewegen und entscheidet, wie unterschiedliche Objekte in unserem Spiel miteinander interagieren. . In ähnlicher Weise könnte dies in unserem Spiel das Computer beinhalten, wohin das Schiff gehen muss, mit welcher Geschwindigkeit, der Aufnahmen von Kugeln, der Kollision dieser Kugelobjekte mit den Avataren der Spieler usw.
All diese Dinge sind im Grunde mathematische Berechnungen im Einklang mit den Konzepten der Physik unter der Motorhaube. Aber so viel Mathematik kann selbst für ein einfaches Spiel von Grund auf von Grund auf selbst zu schreiben sein. .
. Networking
. Es kann super schwierig sein, die Synchronisation zwischen allen Spielern aufrechtzuerhalten, herauszufinden, welcher Spieler gestorben ist und ob alle anderen dieser Behauptung zustimmen.
. Es gibt viele bereits bestehende Designmuster, die uns helfen können, die richtige Weise zu starten. Wir können wählen, wie wir die Spielarchitektur in Bezug auf die Mechanik des jeweiligen Spiels sein sollen. .
.
Verwenden Sie Phaser 3, um Vermögenswerte hinzuzufügen und die Physik zu aktivieren
Phaser ist ein Open-Sourcing-Leinwand und ein WebGL-Rendering-JavaScript-Framework für HTML5. Wir werden Phaser 3 verwenden, um das Spiel zu bauen. Der Grund, warum ich die Version ausdrücklich erwähne, ist, dass zwischen Phaser 2 und 3 viele Bruchänderungen enthalten, einschließlich der Syntax. Wenn Sie dem Spiel in Zukunft selbst einige coole neue Funktionen hinzufügen möchten, sollten Sie wissen, was/wo Sie aussehen sollen.
. .
Es gibt eine wirklich gute Video -Tutorial -Serie für Phaser, die ich empfehlen würde, wenn Sie zum ersten Mal mit Phaser 3 arbeiten.
In der TL; DR -Version von IT mit Phaser3 können wir ein Konfigurationsobjekt angeben, das die Informationen über die Leinwand und das Spiel selbst enthält, einschließlich der Größe der Leinwand, ihrer Stilattribute, verschiedenen Szenen, die in unserem Gameplay enthalten sind (Kurz gesagt), Art der Physik -Engine (wie Phaser viele) usw.
Anschließend bestehen wir das Konfigurationsobjekt, um ein neues Spiel zu starten.
Dies klingt vielleicht ein bisschen verwirrend, da Sie noch keinen Code gesehen haben. Lass uns das als nächstes machen.
Gehen wir vorerst direkt zum Spielbildschirm. Wir werden uns später um die Start- und Ranglistenseiten kümmern. . . . . Um die Dinge organisiert zu halten, speichern wir alle unsere HTML-Dateien in einem Ordner namens Ansichten und alle clientseitigen JavaScript-Dateien in einem Ordner namens Public . .HTML -Datei mit einem Basis -Skelett:
Wie Sie sehen können, ist alles, was wir hier tun. Sie können das CSS direkt aus dem GitHub -Projekt kopieren
Abgesehen davon haben wir im HTML-Körper eine DIV mit einer ID von Gamecontainer . Hier werden wir unsere Spielcanvas über JavaScript hinzufügen.
..
Wie Sie sehen können, haben wir abgesehen von der Angabe der Größe der Leinwand und ihrer Hintergrundfarbe auch angegeben, wohin diese Leinwand gehen muss (identifiziert von übergeordnetem) und ein Array der Szenen, die wir gerne Teil davon sein möchten Spiel.
. . Wenn Sie ein Spiel spielen, ist es wahrscheinlich eine separate Szene von dem, was Sie zuvor gesehen haben.
Für unser Spiel haben wir eine einzige Szene (identifiziert von Gamescene). Eine Szene in Phaser ist eine Klasse, die den Phaser erweitert.Szenenklasse. Lassen Sie uns dies für unser Spiel definieren. .
Wie Sie sehen können, hat diese Klasse drei leere Methoden. Diese kommen mit dem Phaser.Szenenklasse. Jede dieser Methoden hat eine andere Funktion, wie unten erläutert
Lassen Sie uns jetzt einige Vermögenswerte laden. Definieren Sie die vorload () -Methode wie folgt
Ich habe dieses Spiel ursprünglich auf Glitch veranstaltet, das alle Vermögenswerte in seinem Eimer speichert und von einem CDN -Link abgerufen werden kann. .
Wir haben drei Arten von Avataren hinzugefügt, alle in Weiß und drei weiteren Farben. Abgesehen von diesen haben wir auch Vermögenswerte für Schiff, Kugel und natürlich die Explosion hinzugefügt, wenn ein Spieler stirbt.
Wie Sie sehen können, haben wir einen Spritesheet -Asset in Phaser mit diesem geladen.Belastung.
Wir können es auch einfach ein Bild nennen, aber dann können wir die coolen Animationen damit nicht machen, wie Sie in Kürze sehen werden.
P.. Es gibt einen besseren Weg, um die Avatar -Farben zu implementieren. . Ich weiß noch nicht wie, aber ich werde das aktualisieren, wenn ich es herausgefunden habe 🙂
Wenn Sie das Sprite -Blatt “Explosion” inspizieren, werden Sie feststellen, dass es sich um eine Reihe verschiedener Bilder handelt, die nebeneinander platziert sind. .
In der Methode create () definieren wir die Animation für diese Explosion:
… Diese Methode aufnimmt:
Wir werden vorerst nichts in die Methode update () hinzufügen. .
Das war es fürs Erste.
Eine separate Version, die für dieses Tutorial relevant ist.
.
. Meine DMs sind offen 🙂
. Das Spiel spielt in einer prähistorischen, mythischen Welt […]
. .. […]
.
.
. . Aus […]
. . Alles ist viel […]
Unturned ist ein freies Spiel mit dem Zombie-Surdbox Survival Nahkampf- und Shooter-Spiel für PC (Windows, Mac und Linux) im aufstrebenden MMO/Multiplayer-Apokalypse-Überlebensgenre (obwohl Sie auch alleine oder in Coop in PVE spielen können).
Totemori ist ein unterhaltsames und innovatives kostenloses Multiplayer-Brawler-Spiel mit Shared-Screen-Spielen, bei dem Sie Türme bauen, während Sie versuchen, alle anderen zu stürzen. . Spielen Sie gegen Ihre Freunde oder üben Sie gegen Bots, […]
. . . . Bauen Sie Ihre Junkschiffe zu Formen und Größen buchstäblich und kämpfen Sie gegen die Kreationen von […]
. Und es ist jetzt frei zu spielen.
. !
Trove ist ein kostenlos zu spielenes, offenes Action-Abenteuer-Voxel-MMORPG von Trion Worlds für PC (Windows, Mac), Xbox One, PS4 und Nintendo Switch. . Erforschen und Ihren Weg erstellen […]