Oktober 2017

Band 32, Nummer 10

Dieser Artikel wurde maschinell übersetzt.

Spieleentwicklung: Multiplayer-Netzwerkphysik für die Webspieleentwicklung

Durch Gary Weiss | Oktober 2017

Web-Spiele haben den shoddy Ruf. Gut geschriebene Spiele sind verfügbar für High-End-Spielekonsolen und für Computer, die mit modernen Grafikprozessoren ausgestattet. Sogar mobile Spiele verfügt über eine lange Möglichkeit seit der kanonische "Schlange." stammen. Aber spielen, wie Rodney Dangerfield angezeigt wird, erhalten Sie keine Respekt voreinander hätten. Dass besagten, aktuelle fortschrittliches moderne Browser Qualität Spiele Erfahrungen an den Browser zu bringen können. Die wichtigste Technologie in dieser Hinsicht ist WebGL, untergebracht Direktzugriff für Hardware accelerated Grafiken.

In diesem Artikel werde ich Web Spiele aus einer bestimmten Sicht untersuchen: Implementierung eines einfachen für mehrere Spieler Netzwerkspeicher physikalische Spiels. In dieser Übung wird untersucht, welche Technologien und 3D-Spielentwicklung-Tools für Aufgaben- und modernen Browsern von Belastungstests für Netzwerke Leistung, Effizienz Berechnung und das Rendering verfügbar sind. In diesem Artikel kann als eine kleine Untersuchung angezeigt werden, die Teil eines viel größeren Designs ist: Kann eine professionelle game Studio tatsächlich ein High-End-Spiel in einem Browser schreiben?

Der Quellcode für das Spiel ist kostenlos erhältlich bit.ly/2toc4h4, und das Spiel ist online auf sprocketleague.lance.gg wiedergegeben werden können.

das Spiel

Das Spiel, das ich werde Modell umfasst Fahrzeuge, um in einem Stadium beitragen. Besteht eine große Kugel in der Stadium, die in die Ziele Ausnahmetext zurückgewiesen werden kann. Dieses Konzept wird durch "Rocket League", eine gängige e-Sport Titel von Psyonix inspiriert. Aus diesem Grund wird das Spiel aus den folgenden Objekten erstellt: ein Bereich (einschließlich der Ziele), Autos und eine Kugel, wie Sie sehen Abbildung 1. Der Player kann Autos vorwärts oder rückwärts zu verschieben und aktivieren die Räder.

Wiedergeben von Fußball in Ihrem Browser Autos

Abbildung 1 Autos Wiedergabe Fußball in Ihrem Browser

Die Architektur des Spiels

Die Implementierung des Spiele verwendet die autorisierenden Server-Modell, bei dem jedem Client Benutzereingaben mit einem zentralen Server weiterleitet. Clients wird nicht für das Netzwerk warten, bevor sie die Eingaben lokal anwenden; Stattdessen werden die Clients durchführen, was häufig als clientseitige Vorhersage bezeichnet wird. Bei dieser Technik können den Client weiter ausgeführt wird, die Spiellogik und Spiel physikalische. Der Catch ist natürlich, wenn Updates für die Positionen und Geschwindigkeitsinformationen vom autorisierenden Server gesendet werden, jeden Client einen eigenen inkrementelle Korrekturen erfolgen muss, damit das Spiel visual benutzerfreundlichkeit behält.

Rendern von Hauptzweck beim Rendering greift auf die GPU. Es sind mehrere Tools, die diesen Slot aufgefüllt werden können, indem die WebGL-Schnittstelle vereinfacht. Babylon.js und Three.js wurden für viele erweiterte Web Spiele verwendet. Für dieses Spiel verwendet ich A-Frame, eine relativ neue Bibliothek, die Ihnen ermöglicht, eine 3D-Szene mit HTML-Elementen zu erstellen. A-Frame definiert neuer HTML-Elemente, die Sie als Bausteine verwenden können. Außerdem erfolgt bei A-Frame gut Modellieren der Objekte, die mithilfe einer Entität-Komponente-System-Entwurfsmusters. Ein weiterer interessanter Vorteil von A-Frame ist, dass es für virtual Reality-Modus (VR), entwickelt wurde damit das Spiel problemlos erfolgen kann in eine VR-Erfahrung.

Physikalische Cannon.js ist ein relativ einfach zu bedienenden physikalische-Datenbankmodul. Er bietet feste Text Mechanismen Collision Detection. Es wurde in JavaScript von Grund auf neu, geschrieben Dies bedeutet, dass die Bibliothek sehr viel kleiner als Transpiled Modulen wie z. B. ammo.js ist.

Objekt-Serialisierung und Netzwerke für den Server Objekt Positionen und Geschwindigkeitsinformationen zu übertragen, Spiel Objekte serialisiert werden müssen. Zu diesem Zweck verwenden ich Lance Gameserver (Lance.gg), ein für mehrere Spieler open-Source-Modul. Spiel Objekte, die die Lance GameObject Basisklasse abgeleitet werden serialisiert und an die Clients weitergeleitet. Erweiterte Spiel Module verwenden UDP-Sockets für eine bessere Leistung, während Lance weiterhin TCP-Sockets verwendet. Dies ist aufgrund der Komplexität der WebRTC für die Client / Server-Kommunikation (im Gegensatz zu Peer-zu-Peer). Dies ist ein Bereich, in denen Web Spiele deutlich hinter andere Plattformen zurückliegen. Allerdings bietet meiner Erfahrung das resultierende Spiel smooth selbst zur Netzwerk-navigationszeiten von 150ms, typisch innerhalb Kontinentales USA und Europa.

Die clientseitige Vorhersage hier ebenfalls ich basieren auf Lance die Extrapolierung der Positionen und Geschwindigkeitsinformationen ausführen. Lance implementiert die clientseitigen Sammlung von Server-Broadcasts, berechnet die erforderlichen Korrekturen für jede Position und die Ausrichtung und die Korrektur inkrementell über den Status der Schleife Rendering anwenden. Position-Korrekturen gelten beim Berechnen der Differenz Vektor und dieser Unterschied in Inkrementen unterteilen. Ausrichtung Korrekturen, gelten im Gegensatz dazu beim Berechnen der Differenz Quaternion. Die Korrektur Quaternion für eine Quaternion Server Qs und eine Client-Quaternion qc wird qΔ Qs o qc-1 =. Dieser Quaternion kann als eine Drehung einer einzelnen Achse dargestellt, und klicken Sie dann in den Schritten zu dieser Achse unterteilt werden.

Die Architektur des Spiele anschließend besteht aus Serverlogik, Client-Logik und gemeinsam verwendeter Logik wie gezeigt in Abbildung 2. Die Logik der Client muss alle Aspekte verarbeiten, die den Benutzer, einschließlich der Auflistung von Eingaben und die Arbeit Rendering umfassen. Ist die Serverlogik im Vergleich einfacher, aber er muss einige autorisierenden Schritte ausführen, z. B. das Akzeptieren von Verbindungen, Spiel Objekte erstellt, und entscheiden, wer bewertet.

Die Architektur von Spielern

Abbildung 2 die Architektur von Spielern

Gemeinsam verwendeter Logik ist die interessantesten Teil der Implementierung und wird in einem separaten Abschnitt erläutert. Es enthält die wichtigsten Spiellogik, muss auf dem autorisierenden Server ausgeführt, aber auch auf jedem Client während des Spiels zwischen Server Broadcasts ausführen muss. Beginnen wir mit der Multiplayer-Spiele und Muttern: die Kommunikationsschicht.

Kommunikation zwischen Client und Server

Ein für mehrere Spieler Spiels mit einem autorisierenden Server erfordert Kommunikationscode. Dieser Code hat viele Aufgaben.  Es muss zu Beginn der Bring-nach-oben der Server, verwalten, die überwachen TCP/IP-Ports für eingehende Daten. Als Nächstes besteht eine handshakevorgangs, wenn ein Client mit dem Server verbindet. Diese Handshake des neuen Clients auf dem Server registriert und stellt eine dedizierte Socket für den Client her. Einige Spiele erfordern möglicherweise eine Authentifizierung oder eine Matchmaking Prozess ist, werden ebenfalls. Die Verbindung durch den Client, und Trennen eines vorhandenen Clients haben Auswirkungen auf das Spiel. Das Spiel muss benachrichtigt werden, damit der Spieler zu einem Team zuweisen und einem neuen Auto für den neuen Client erstellen kann.

Während des Spiels ausgeführt wird, sendet der Server periodische Broadcasts für alle Clients an. Broadcasts beschreiben das Spiel aktuellen Status an. Ein Status umfasst Position, Geschwindigkeit, Ausrichtung (Quaternion) und Angular Geschwindigkeit jedes Spiel-Objekts. Darüber hinaus kann Spiel Objekte auch andere nicht physischen Attribute, z. B. Stärke, Schild Power, Rechtschreibprüfung Timeout usw. enthalten. Hier muss der Server sehr effizient, und senden möglichst wenig Daten wie unbedingt erforderlich ist. Beispielsweise darf kein Objekt, das verschoben oder geändert wurde nicht übermittelt werden. Andererseits, wenn ein neue Player soeben eine Verbindung hergestellt wurde, benötigt diese Player eine vollständige Beschreibung aller Spiel Objekte Bootstrapping spielen Zustand.

Abschließend müssen die Client / Server-Kommunikation ausgeben und Erfassen von Out-of-Band-Ereignisse, die Spiel Ereignisse zu beschreiben, die im Rahmen des normalen Spiel Status nicht entsprechen. Beispielsweise möchte der Server einen bestimmten-Player kommunizieren, dass er eine besondere Auszeichnung erreicht hat. Dieser Mechanismus kann auch verwendet werden, eine Nachricht an alle Beteiligten zu melden.

Hier ist die Implementierung. Auf der Serverseite bringen ich eine ausdrückliche node.js-Server und einem socket.io-Dienst. Der Code in Abbildung 3 konfiguriert den HTTP-Server an Port 3000, initialisiert den Server-Datenbankmodul und die Spiel-Engine-Klassen und leitet Sie alle HTTP-Anforderungen an die Dist Unterverzeichnisses, wo der HTML- und der Anlagen platziert werden. Dies bedeutet, dass die node.js-Server zwei Rollen verfügt. In der ersten Rolle fungiert es als HTML-Server, der HTML Inhalt, einschließlich CSS-Dateien, Bilder, Audio- und dem 3D-Modelle GLTF Format dient. In die zweite Rolle verhält sich der HTTP-Server als einen Gameserver, der an socket.io eingehende Verbindungen akzeptiert. Beachten Sie, dass die bewährte Methode besteht darin, alle statischen Objekte hinter einem Content Delivery Network (CDN) zur leistungsoptimierung zwischenzuspeichern. Diese Konfiguration wird nicht angezeigt, in dem Beispiel in abbildung3, aber die Verwendung eines CDNS deutlich erhöht die Spiele bring-nach-oben-Leistung beim Reduzieren von unnötigen Auslastung von Gameserver. Schließlich wird in der letzten Zeile des Codes das Spiel gestartet.

Abbildung 3 Server Einstiegspunkt

const express = require('express'); 
const socketIO = require('socket.io'); 
 
// Constants 
const PORT = process.env.PORT || 3000; 
const INDEX = path.join(__dirname, './dist/index.html'); 
 
 
// Network servers 
const server = express(); 
const requestHandler = server.listen(PORT, () => console.log(`Listening on ${PORT}`)); 
const io = socketIO(requestHandler); 
 
 
// Get game classes 
const SLServerEngine = require('./src/server/SLServerEngine.js'); 
const SLGameEngine = require('./src/common/SLGameEngine.js'); 
 
 
// Create instances 
const gameEngine = new SLGameEngine({ traceLevel: 0 }); 
const serverEngine = 
  new SLServerEngine(io, gameEngine, { debug: {}, updateRate: 6, timeoutInterval: 20 }); 
 
 
// HTTP routes 
server.get('/', (req, res) => { res.sendFile(INDEX); }); 
server.use('/', express.static(path.join(__dirname, './dist/'))); 
 
// Start the game 
serverEngine.start();

Vom Server wurde gestartet, aber noch nicht, neue Verbindungen zu behandeln. Die Basisklasse ServerEngine deklariert eine Handlermethode für neue Verbindungen OnPlayerConnected und einen entsprechenden OnPlayerDisconnected-Handler aufgerufen. Dies ist der Ort, wo die autorisierenden Server Unterklasse Methoden das Spiele Modul zum Erstellen von einem neuen Auto oder entfernen ein vorhandenes Auto anweisen können. Der Codeausschnitt in Abbildung 4 von der Basisklasse zeigt, wie socket.io verwendet wird, um sicherzustellen, dass diese Ereignishandler werden aufgerufen, wenn ein neue Player eine Verbindung hergestellt hat.

Abbildung 4 Verbindung Handlerimplementierung mit socket.io

class ServerEngine {

  // The server engine constructor registers a listener on new connections
  constructor(io, gameEngine, options) {
      this.connectedPlayers = {};
      io.on('connection', this.onPlayerConnected.bind(this));
  }

  // Handle new player connection
  onPlayerConnected(socket) {
    let that = this;

    // Save player socket and state
    this.connectedPlayers[socket.id] = {
      socket: socket,
      state: 'new'
    };
    let playerId = socket.playerId = ++this.gameEngine.world.playerCount;
 
    // Save player join time, and emit a `playerJoined` event
    socket.joinTime = (new Date()).getTime();
    this.resetIdleTimeout(socket);
    let playerEvent = { id: socket.id, playerId, 
      joinTime: socket.joinTime, disconnectTime: 0 };
    this.gameEngine.emit('playerJoined', playerEvent);
    socket.emit('playerJoined', playerEvent);

    // Ensure a handler is called when the player disconnects
    socket.on('disconnect', function() {
      playerEvent.disconnectTime = (new Date()).getTime();
      that.onPlayerDisconnected(socket.id, playerId);
      that.gameEngine.emit('playerDisconnected', playerEvent);
    });


  }

  // Every server step starts here
  step() {

    // Run the game engine step
    this.gameEngine.step();

    // Broadcast game state to all players
    if (this.gameEngine.world.stepCount % this.options.updateRate === 0) {
      for (let socketId of Object.keys(this.connectedPlayers)) {
        this.connectedPlayers[socketId].socket.emit(
          'worldUpdate', this.serializeUpdate());
      }
    }
  }
}

Wenn ein Player eine Verbindung herstellt, gibt dieser Code das PlayerJoined-Ereignis zweimal aus. Das erste Ereignis wird ausgegeben, in denen andere Teile des Codes Spiel Listener für dieses bestimmte Ereignis registriert haben, der Spiel-Engine-Ereignis-Controller. Das zweite Ereignis wird über den Player Socket gesendet. In diesem Fall kann das Ereignis auf der Clientseite der Socket und dient als Bestätigung erfasst werden, dass der Server diese Spieler das Spiel zugelassen hat.

Beachten Sie das Server-Datenbankmodul Step-Methode – Hier wird das Spiele Status auf allen verbundenen broadcast Player. Diese Übertragung tritt nur in einem festgelegten Intervall. Im Spiel haben ich den Zeitplan konfigurieren, dass 60 Schritte pro Sekunde ausgeführt werden, und eine Übertragung jedes sechsten Schritt beim gesendet oder 10-Mal pro Sekunde.

Nachdem ich die Methoden in der Unterklasse implementieren können, wie speziell für das Spiel gelten. Siehe Abbildung 5, dieser Code behandelt neue Verbindungen von einem neuen Auto erstellen und verknüpfen, Auto auf das blaue Team oder das rote Team. Wenn Sie ein Player Verbindung getrennt wurde, entfernen ich des Players Auto.

Abbildung 5 Server Verbindungsbehandlung

// Game-specific logic for player connections
onPlayerConnected(socket) {
  super.onPlayerConnected(socket);

  let makePlayerCar = (team) => {
    this.gameEngine.makeCar(socket.playerId, team);
  };

  // Handle client restart requests
  socket.on('requestRestart', makePlayerCar);
  socket.on('keepAlive', () => { this.resetIdleTimeout(socket); });
}

// Game-specific logic for player dis-connections
onPlayerDisconnected(socketId, playerId) {
  super.onPlayerDisconnected(socketId, playerId);
  this.gameEngine.removeCar(playerId);
}

Kommunikation kann auch auftreten, Out-of-Band müssen Bedeutung, die ein Ereignis in einigen Fällen zu einem oder mehreren Clients asynchron gesendet werden muss oder die Daten gesendet werden, die nicht Teil der Spiel objektzustände entspricht. Im folgende Beispiel wird gezeigt, wie socket.io auf Serverseite verwendet werden kann: 

// ServerEngine: send the event monsterAttack! with data 
// monsterData = {...} to all players
this.io.sockets.emit('monsterAttack!', monsterData);

// ServerEngine: send events to specific connected players
for (let socketId of Object.keys(this.connectedPlayers)) {
  let player = this.connectedPlayers[socketId];
  let playerId = player.socket.playerId;

  let message = `hello player ${playerId}`;
  player.socket.emit('secret', message);
}

Auf der Clientseite ist es einfach, Überwachen von Ereignissen:

this.socket.on('monsterAttack!', (e) => {
  console.log(`run for your lives! ${e}`);
});

Die Spiellogik

Die grundlegende Spiellogik umfasst die Anwendung von Benutzereingaben in den Zustand "game" entsprechend Abbildung 6. Beispielsweise sollten auf das Benzin drücken eine vorwärts gerichtete Force auf Auto anwenden. Drücken die Bremsen muss ein Force rückwärts gerichtete auf Auto, gehen möglicherweise in umgekehrter Reihenfolge angewendet werden. Aktivieren das Lenkrad gilt eine Angular Geschwindigkeit usw..

Abbildung 6 die GameEngine-Schritt-Methode

// A single Game Engine Step
step() {
  super.step();

  // Car physics
  this.world.forEachObject((id, o) => {
    if (o.class === Car) {
      o.adjustCarMovement();
    }
  });

  // Check if we have a goal
  if (this.ball && this.arena) {

    // Check for ball in Goal 1
    if (this.arena.isObjInGoal1(this.ball)) {
      this.ball.showExplosion();
      this.resetBall();
      this.metaData.teams.red.score++;
    }

    // Check for ball in Goal 2
    if (this.arena.isObjInGoal2(this.ball)) {
      this.ball.showExplosion();
      this.resetBall();
      this.metaData.teams.blue.score++;
    }
  }
}

Diese Vorgänge werden als Aufrufe an das Modul physikalische im Laufe der Zeit implementiert. Eine interessante Verzerrung besteht darin, dass ein Auto richtigen physischen erzwingt Zuweisen einer schlechten Spiele. Wenn Sie den richtigen physischen erzwingt anwenden, so wie sie in der realen Welt funktionieren, die Behandlung und die Kontrolle über das Fahrzeug nicht "fühlen" in die Hände von Player. Die resultierende Spiele Aktion erfolgt zu langsam. Für das Spiel angenehme, ich erforderlich, um eine künstliche Boost angewendet werden soll, wenn das Fahrzeug aus sehr niedrigen Geschwindigkeiten beschleunigt werden andernfalls wurde das Spiele Aktion nur zu langsam.

Schließlich muss die Spiellogik überprüfen Sie, ob die Kugel den Ziel-Beiträgen übergeben, und aktualisieren das Ergebnis.

Die clientseitige Vorhersage

Jede Multiplayer-Spiel weist unterschiedliche Anforderungen für die clientseitige Vorhersage und muss entsprechend konfiguriert werden. Spiel Objekttypen können auch eine bestimmte Konfiguration verwendet. Der folgende Code zeigt eine kleine Teilmenge der Konfiguration für das Spiel. Benutzereingaben sind drei Schritte oder 50 ms, besser Zeitpunkt übereinstimmen, an dem die Eingaben auf dem Server angewendet werden, verzögert. Dies erfolgt durch DelayInputCount auf 3 festlegen. syncOptions.sync ist, "extrapolieren", um die clientseitige Vorhersage; aktivieren festgelegt LocalObjBending ist auf 0,6, gibt an, dass lokal gesteuerten Objekt Positionen von 60 Prozent korrigiert werden sollen, bevor die nächste Server Übertragung geschätzt wird, auf das Eintreffen festgelegt; RemoteObjBending ist auf 80 Prozent höher festgelegt, da diese Objekte wahrscheinlicher erheblich Trennung sind. Zuletzt, legen Sie BendingIncrements 6, gibt an, dass jede Korrektur nicht gleichzeitig vorgenommen werden muss, aber stattdessen über 6 Verarbeitungsschleife-Schritten:

const options = {
  delayInputCount: 3,
  syncOptions: {
    sync: 'extrapolate',
    localObjBending: 0.6,
    remoteObjBending: 0.8,
    bendingIncrements: 6
  }
};

Die Kugel verfügt über einen eigenen Geschwindigkeit umgebrochener Parameter (nicht dargestellt) auf 0 (null) festgelegt. Dies ist daran, dass wenn ein Team Bewertungen, ruft die Kugel Teleported zurück in die Mitte des Felds ab, und jeder Versuch, die resultierenden Geschwindigkeit Biegen zu unerwünschten visuelle Effekte führt.

Die clientseitige Vorhersage Logik selbst ist zu groß für hier enthalten, damit ich sie als allgemeine Pseudocode in angezeigt Abbildung 7. Es ist der geheime Besonderheiten von, die ein Multiplayer-Spiel möglich macht. Der erste Schritt die letzten Übertragung des Server-scans und überprüft, ob neue Objekte erstellt wurden. Vorhandene Objekte ihren aktuellen Status Denken Sie daran, bevor sie mit den Serverstatus synchronisiert sind. Der zweite Schritt ist die Reenactment-Phase, in der die Spiellogik für alle Schritte führt erneut, die seit der Schritt beschrieben, die in die Übertragung aufgetreten sind. Eingaben müssen erneut angewendet werden, und das Spiel-Engine Schritt im Reenactment-Modus ausgeführt wird. Im dritten Schritt wird jedes Objekt zeichnet die erforderlichen Korrekturen und in den gespeicherten Zustand zurückgesetzt. Schließlich können Objekte, die zum Löschen markiert sind im letzten Schritt entfernt werden.

Abbildung 7 vereinfacht die clientseitige Vorhersage Pseudocode

applySync(lastSync):

  // Step 1: sync to all server objects in the broadcast
  for each obj in lastSync.objects
    localObj = getLocalObj(obj.id)
    if localObj
      localObj.rememberState()
      localObj.syncTo(obj)
    else
      addLocalObj(obj)

  // Step 2: re-enactment using latest state information
  for step = lastSync.serverStep; step < clientStep; step++
    processInputsForStep(step)
    gameEngine.step(reenactment=true)

  // Step 3: record bending and revert
  for each obj in world.obects
     obj.bendToCurrentState()
     obj.revertToRememberedState()

  // Step 4: remove destroyed objects
  for each obj in world.obects
    objSyncEvents = lastSync.getEvents(obj.id)
    for each event in objSyncEvents
      if event.name == ‘objectDestroy’
        gameEngine.removeObjectFromWorld(obj.id)

In den Details aufs

Es ist viel Arbeit in dieses Spiel als auf den ersten Blick angezeigt wird. Ich noch nicht berührt Kamera Bewegung Auto Unterschiede in der Eingabe zwischen mobilen Geräten und Desktops (auf mobilen Geräten, die Car-Verschiebung durch das Gerät kippen gesteuert wird) und Themen wie Matchmaking nachverfolgen und Debuggen. Alle diese Themen sind nicht Bestandteil dieses Artikels. Allerdings ist es wichtig zu erwähnen, dass einige dieser erhebliche Road Beulen in Web-Spiele gelten. Beispielsweise kann ein Spiel, das Web ausführen, auf dem Desktop oder auf einem Tablet-PC oder auf einem mobilen Gerät – manchmal eine GPU ist verfügbar, und manchmal ist es nicht, während die Wahrscheinlichkeit gering Netzwerke Bandbreite zunimmt.

Eine weitere Herausforderung ist noch den Workflow, der zum Generieren von kompatibel 3D-Modelle aus vorhandenen Standards erforderlich. Die 3D-Spielentwicklung-Toolsets für Web-Plattformen nicht als ausgereifte wie ihre Gegenstücke auf anderen Plattformen. Zuletzt, Web-Spiele lokalen Speicher im gleichen Sinne haben, das andere Plattformen bieten. Daher muss darauf geachtet werden Bestand frugally geladen. In diesem Bereich ein beeindruckender Erfolg ist die online-Spiels "Städten Galaxy" (bit.ly/2uf3iWB).

Diese Probleme stellt eine neue Herausforderung dar Spiel Entwickler auf die Web-Plattform. Es gibt jedoch einige bedeutende Vorteile für die Web-Plattform, die erwähnt werden muss. Die Debugumgebung in Browsern ist sehr komplexen. Der dynamischen Natur der Webprogrammierung führt zu sehr schnellen Prototyping und der kontinuierlichen Bereitstellung des Patches. Die Web-Entwickler-Community ist wesentlich größer.

Der wichtigste Vorteil für Web-Spiele ist wahrscheinlich die Möglichkeit, die sie gestartet werden. Ein Spiel, das Web zugegriffen werden kann, indem Sie einfach auf einen Weblink und erfordert nicht das Herunterladen von der Gesamtmenge der spielressourcen auf dem Clientgerät vorab vor dem Beginn. Durch Herunterladen von Anlagen nur, wenn sie benötigt werden, die Erfahrung des Spiels kann innerhalb von Sekunden, statt Minuten starten und möglichst offlinesupport auch genutzt werden, um die nachfolgenden Spiel zu verbessern.

Besucher der NBA-Website anmelden kann z. B. sind Wiedergabe Basketballspiels für Player aus, auf der ganzen Welt, mit der rechten Maustaste im Browser.

Web-Technologien für die 3D-Spielentwicklung

In den vergangenen Jahren stattgefunden hat erhebliche Fortschritte im Browser Möglichkeit. Der primäre vorabversandmitteilung ist die Entwicklung von WebGL, direkten Zugriff auf die GPU-Funktionalität im Browser gebracht wurde. WebGL ist eine Schnittstelle, die sehr niedrigen Stufe, weshalb Entwickler in der Regel auf höherer Ebene Schnittstellen von Bibliotheken wie Babylon.js, three.js und A-Frame, um komplexe Szenen zu erstellen.

Andere aktuellen webtechnologien sind WebAudio, die erweiterte audio Funktionen bietet: Media Source Extensions (MSE), der video Zugriff zu optimieren und können in Echtzeit video Manipulation; und WebVR, die relativ neu und stellt eine Schnittstelle für virtuelle Realität (VR) Hardware einschließlich VR Kopfhörer und VR-Controller. WebVR zusammen mit WebAudio verwendet wird, ist es möglich, Ambisonic 3D audio Erfahrungen in einer Web-driven VR Szene zu implementieren.

Auch die JavaScript-Sprache wurde auf nützliche Weise mit den neuesten ECMA-262 aktualisiert 6. Edition. Das JavaScript-Ökosystem ist breit, viele Frameworks für Entwickler bereitstellen. Tatsächlich werden so viele Frameworks und Methoden, die die Fülle manchmal zu Verwirrung führen.

An der Vorderseite Netzwerk zusammen mit der HTTP-Protokoll sind WebSockets und WebRTC beiden Standards, die für Anwendungen verfügbar sind. WebSockets sind einfache bidirektionale Datenströme, während WebRTC einen komplexeren Mechanismus für die Peer-zu-Peer-Kommunikation bereitstellt. Für mehrere Spieler 3D-Spielentwicklung ist Lance.gg eine open Source-Bibliothek, die die Netzwerk- und die Synchronisierung von Spiel Objekten behandelt.

Eine andere interessante Technologie ist WebAssembly, die vor kurzem browserübergreifende übereinstimmend erreicht hat, und wurde das Potenzial für die Übermittlung von eines erheblichen Leistungsvorteil per ausführen kompiliert Binärformat in einem Browser.

Weitere Informationen zu allen diesen Technologien im Web können leicht gefunden werden.

Zusammenfassung

Erstellen ein Multiplayer-Spiel für die Web-Plattform unterscheidet. Im Web ist natürlich auf vielen verschiedenen Geräten weitergeleitet, und dies stellt eine wesentliche Herausforderung für die Entwicklung von Spielen. Das Fehlen von einfachen UDP-Netzwerken im Browser wirkt sich auf mehrere Spieler Antwortzeiten. Allerdings schreiben neuesten Entwicklungen im Web-Technologien es möglich, vorgenommen haben eine Demo für mehrere Spieler physikalische in einen relativ kurzen Zeitraum. Bibliotheken und Workflows in dieser Übung verwendet werden, schnell Fortschritte, und können bereits heute verwendet werden. Zusätzliche Ressourcen und Zeit ist es möglich, ein verbessertes Gaming-Streaming in einem Browser zu entwickeln.

Vielen Dank, dass die Co-Autor des Spiels in dem Artikel Opher Vishnia, behandelt werden soll ein Mitbegründer Lance und multidisziplinär Ersteller 3D-Spielentwicklung, bei der Programmierung, Entwurf und Musik Zusammensetzung.


Gary Weiss ist ein Software-Architekten und Mitbegründer von Lance, die Gruppe, die das open-Source-Projekt Lance.gg entwickelt. Sie erreichen ihn unter garyweiss74@gmail.com

Unser Dank gilt dem folgenden technischen Experten bei Microsoft für die Durchsicht dieses Artikels:  Raanan Weber


Diesen Artikel im MSDN Magazine-Forum diskutieren