Erstellen Sie Ihr eigenes Webgl-Physik-Spiel

Dieses Projekt wird in verschiedene Teile aufgeteilt. Wir werden eine kurze Einführung in Heroku geben, zeigen, wie Sie Physijs mit drei.js verwenden können, erklären, wie man Socket-Events über Node.js umgehen kann, und wie wir mit den gesendeten Daten umgehen gehen.

• 20 erstaunliche Beispiele für Webgl in Aktion

01. Heroku.

Dieses Projekt wird inhostiert Heroku. , eine Cloud-Plattform, um Ihre Apps zu hosten. Es verfügt über eine Vielzahl von unterstützten Sprachen wie Rubin, Java, PHP und Python. Wir werden node.js verwenden.

Melden Sie sich für ein Konto an und wählen Sie Node.js. Für dieses Projekt können wir den Basisserver verwenden, der kostenlos ist. Nach der Registrierung kommen Sie zu Ihrem Dashboard, in dem Sie Ihre App erstellen können. Dies wird eine Subdomain bei herokuapp.com erstellen.

Als Bereitstellungsmethode können Sie entweder die Heroku-Befehlszeilenschnittstelle (CLI) verwenden, um mit seinem Git-Repository bereitzustellen, oder einen Anschluss an GitHub oder Dropbox aufweisen. Ich habe mich entschieden, mit seinem CLI zu gehen; Dies erfordert eine Installation. Im Gegenzug erhalten Sie eine Vielzahl neuer hilfreicher Tools, eines davon ist live-Debuggen über Ihr Terminal.

Zum Einrichten Ihres Servers empfehle ich den Schritten zu folgen Wie hier beschrieben .

Um bereitzustellen, verwenden Sie Standard-Git-Befehle. Jeder, den Sie verwenden, löst den Build-Server aus und Ihre App wird auf dem Heroku-Server bereitgestellt und dann an Ihrem Subdomain angezeigt.

Sobald der Code bereitgestellt wird, können Sie Ihr Projekt auf [YourProject] .herokuApp.com anzeigen. Verwenden Sie zum Anzeigen der Protokolle den Befehl 'Heroku Logs - Tail' in Ihrem Terminal. Einige der dargestellten Dinge ist das, was dem Client serviert wird - er zeigt die Socket-Verbindungen, und wenn Sie Ihren Code debugieren möchten, können Sie auch die Konsole.log verwenden, um an das Terminal auszugeben.

02. Bauen Sie die Physik-Szene auf

Wir werden das beliebteste verwenden Webgl. Rahmen, drei.js. , um eine 3D-Szene aufzubauen, die ein Objekt enthält, auf dem wir die Physik anbringen werden. Die Physik-Bibliothek der Wahl ist Physijs , ein Plug-In für drei.js. Als Erweiterung zu drei.js verwendet Physijs dieselbe Codierungskonvention, wodurch es leichter zu bedienen ist, wenn Sie bereits mit drei.js vertraut sind.

Das erste ist der Billardtisch. Wir benutzen die Physijs HeightFieldMesh. , weil dieses Mesh die Höhe von der Planungsometrie las. So wechselt es sich im Wesentlichen um das Drei -Js-Objekt.

 VAR-Tischgeometrie = neue drei.Bleisgeometrie (650, 500, 10, 10);
var tischmannial = physijs.creatematerial (
  Neue drei.meshphongmaterial ({
    Glanziness: 1,
    Farbe: 0xB00000,
    Emisssiv: 0x111111,
    Seite: drei.Doubleside.
  }),
  .8, // Reibung
  .4 // Restitution.
);
Tabelle = NEUES physijs.hightfieldmesh (Tischgeometrie, Tablemateriale, 0); 

So HeightFieldMesh. Erfordert eine Geometrie, aber auch ein Physijs-Material. Wir fügen dem drei.js Material zwei neue Funktionen hinzu. Das sind das Reibung und Restitution Variablen. Reibung ist der Widerstand, der das Objekt macht, und die Rückerstattung bezieht sich auf die "Bräunung". Diese beiden Variablen definieren, wie echt die Physik in Ihrer Szene fühlt.

Für die erstellten Poolbällchen wollen wir sie nicht zu hüpfen lassen, also halten Sie die Anzahl niedrig. Wie drei.js hat Physijs auch eine Reihe von Grundformen, um das ursprüngliche Netz umzugehen. Spheruliert das umwickeln Spheregeometrie wird der Kugelphysik geben. Bei der Initialisierung der Szene rufen wir an Buildball (8) , was die folgende Funktion auslöst ...

 VAR Buildball = Funktion (Nummernball) {
 VAR Balltexture = neue drei.text ();
 VAR Ballindex = Kugel. Length; 

Fügen Sie die Textur hinzu:

 balltexture = drei.imageutils.loadTexture ('Textures /' + nummerball + '_ball.jpg', Funktion (Bild) {
     balltexture.image = Bild;
  }); 

Erstellen Sie das physijs-fähige Material mit einigen angemessenen Reibungs- und Bounce-Eigenschaften:

 Var Ballmaterial = physijs.creatematerial (
    neues drei.malshlambertmaterial ({
      Karte: Balltextur,
      Glanziness: 10,
      Farbe: 0xdddddd,
      Emisssiv: 0x111111,
      Seite: Drei.Frontside.
    }),
    .6, // Reibung
    .5 // Restitution.
  ); 

Textur-Mapping:

 Ballmaterial.map.wraps = ballmaterial.map.wrpapt = drei.Repeatwalken;
  Ballmaterial.Map.Repeat.Set (1, 1);
 Erstellen Sie das physik-fähige Sphateremesh und starten Sie es in der Luft:

  ball [ballindex] = new physijs.spheremesh (
    Neue drei.Spheregeometrie (25, 25, 25),
    Ballmaterial,
    100
  );
  // y Versatz zur Spitze der Leinwand
  Ball [Ballindex] .Position.Y = 500;
  // Schatten
  Kugel [Ballindex] .Receiweshadow = wahr;
  Ball [Ballindex] .castshadow = wahr;
  // den Ball deiner Leinwand hinzufügen
  Szene.de (Ball [Ballindex]);
};

Wir fügen Textur aus einer .jpg-Datei hinzu. Erstellen Sie das Material und verwenden Sie das für die Spheruliert So erstellen Sie das Objekt, auf das wir senkrecht auf die Oberseite legen, damit er auf den Bildschirm fällt.

03. Sockelanschluss.

Für die Kommunikation zwischen dem Server und dem Client verwenden wir Socket.IO. . Dies ist eine der zuverlässigsten Bibliotheken für Node.js. Es ist auf der WebSockets-API aufgebaut.

Jetzt ist Physik für die Maschen aktiviert, die wir benötigen, um das Spiel interaktiv zu machen. Das Eingabegerät, das wir verwenden, ist das mobile Gerät. Der Mobilfunkbrowser ist der Controller, der Daten bereitstellt vom Beschleunigungsmesser und dem Gyroskop auf den Desktop, an dem Sie das Spiel sehen werden.

Zunächst muss eine Verbindung zwischen dem Mobilfunkbrowser und dem Desktop-Browser vorgenommen werden. Jedes Mal, wenn ein Browser mit unserer Node.js-App verbunden ist, müssen wir eine neue Verbindung herstellen. Eine Clientseitenverbindung wird unter Verwendung der folgenden Schritte eingerichtet:

 VAR-Sockel = io.connect (); 

Zum Senden von Nachrichten verwenden Sie die emittieren Funktion:

 Socket.EMIT ('Ereignisname', Daten); 

Und zum Empfangen Sie die Verwendung der .auf() Funktion:

 socket.on ('Ereignisname', Funktion () {}); 

03.1. Einrichten des Desktop-Spiels

Wenn wir uns auf einem Desktop befinden, senden wir unsere Buchsen ein Gerät aus, das unserem Server erzählt hat. Der Desktop ist das Spiel mit der folgenden Codezeile:

 VAR-Sockel = io.connect ();
// Bei der ersten Willkommensnachricht, antworten Sie mit 'Game' Gerätetyp
Socket.on ('Willkommen', Funktion (Daten) {
  Socket.EMIT ("Gerät", {"Typ": "Game"});
}); 

Der Server gibt uns einen eindeutigen Schlüssel- / Spielcode zurück vom Krypto erzeugt . Dies wird dem Desktop angezeigt.

 // Erstellen Sie einen Code
var gamecode = crypto.randombytes (3) .tostring ('hex'). Substring (0, 4). Tolowercase ();
// Sicherstellung der Einzigartigkeit.
während (Gamecode in SocketCodes) {
  gamecode = crypto.randombytes (3) .tostring ('hex'). Substring (0, 4). Tolowercase ();
}
// speichern Sie den Gamecode - & gt; Socket Association.
socketcodes [gamecode] = io.sockets.sockets [socket.id];
socket.gamecode = gamecode 

Sagen Sie den Game-Client, um zu initialisieren und dem Spielcode dem Benutzer anzuzeigen ...

 Socket.EMIT ("Initialize", Gamecode); 

03.2. Controller mit dem Spiel anschließen

So verbinden Sie das mobile Gerät mit dem Spiel, verwenden wir ein Formular, um den GAME-Code vom Desktop-Bildschirm einzureichen. Im Formular Senden senden wir den Game-Code zur Authentifizierung an den Server.

 Socket.EMIT ("Gerät", {"Typ": "Controller", "Gamecode": Gamecode}); 

Der Server prüft, ob der GAME-Code gültig ist und die Verbindung mit dem Desktop-Spiel eingerichtet ist

 Wenn (Gerät.Gamecode in SocketCodes) {
  // Speichern Sie den Gamecode für Controller-Befehle
  socket.gamecode = geräte.gamecode.
  // Initialisieren Sie den Controller
  socket.emit ("verbunden", {});
  // Starte das Spiel
  SocketCodes [device.gamecode] .emit ("angeschlossen", {});
} 

Sobald die Verbindung eingestellt ist, geben wir dann den 8-Ball einen kleinen Druck von X und Z mit dem folgenden Befehl ...

 Kugel 
 .SetlinearVelocity (neue drei.vector3 (30, 0, 30)); 

04. Daten senden.

Nachdem die Verbindung hergestellt ist, möchten wir den Gyro- und Beschleunigungsmesser-Variablen an das Spiel senden. Mit dem verwendeten fenster.devicemotion. und das fenster.deviceorientation. Ereignisse, wir haben die Daten, die wir benötigen, um die gleichen Kippbewegungen unseres Telefons an den Billardtisch zu emulieren. Ich habe ausgewählt, ein Intervall von 100ms zu verwenden, um diese Werte auszusenden.

 SetInterval (Funktion () {
  Socket.EMIT ('Gyro senden', [Math.Rund (Roty), Math.Rund (Rotx), AY, AX]);
}, Intervalltime); 

Auf der Clientseite lösen wir die Latenzzeit durch, indem wir die eingehenden Werte vom Server auf die Neigung des Billardtabellens trennen. Zum Tweening verwenden wir Tweenmax. .

 // Umgang mit ankommenden Gyro-Daten
Socket.on ('New Gyro', Funktion (Daten) {
  VAR DEGY = Daten 
 & lt; 0 Math.abs (Daten 
): -Data 
;
  TweenMax.to (Tabelle.Rotation, 0.3, {
    x: degtorad (DEGY - 90),
    y: degtorad (data 
),
    Leichtigkeit: linear.Esone,
    onupdate: function () {
        Tabelle .__ DirtyRotation = wahr;
    }
  });
}); 

05. Zusätzliche Ereignisse

Um es etwas mehr Interaktivität zu geben, habe ich ein paar zusätzliche Ereignisse hinzugefügt, mit der der Benutzer zu spielen ist. Wir werden dem Benutzer die Option geben, zusätzliche Bälle neben dem 8-Ball hinzuzufügen, indem Sie die Nummern auf der Tastatur verwenden.

Ein anderer ist, den Tisch nach oben zu springen. Dafür können Sie die Leertaste treffen. Wir fügen aber auch ein TAP-Ereignis auf dem Controller-Gerät hinzu. Dadurch wird ein Ereignis an den Billardtisch gesendet, der den Tisch aufersteht und die Bälle sendet.

Zuerst müssen wir die Tastaturereignisse fangen ...

 // Kugeln / Slam-Tabelle auf der Leertaste erstellen
document.addeventListener ('Keydown', Funktion (E) {
  if (e.keycode == 49) {// Schlüssel: 1
    Buildball (1);
  } else if (e.keycode == 50) {// Schlüssel: 1
    Buildball (2);
  } else if (e.keycode == 51) {// Schlüssel: 1
    Buildball (3);
  } else if (e.keycode == 32) {// Schlüssel: Spacebar
    hoffbar ();
  }
}); 

Das Buildball Funktion ist die gleiche Funktion, die wir zur Erstellung der Kugel 8-Kugel verwendet haben. Wir verwenden nur verschiedene Texturen, die die Kugel einwickeln werden. Zum Drücken der Tabelle geben wir mit diesem Code eine Aufwärtsbewegung entlang der Y-Achse ...

 table.setlinearVelocity (neue drei.vector3 (0, 500, 0)); 

Fazit

Wenn Sie ein Konzept für ein Spiel oder irgendetwas anderes haben, ist es völlig wahrscheinlich, dass es Bibliotheken gibt, die Ihr Leben leichter machen könnten. Dies ist eine Demo, die zeigt, wie dies funktionieren kann. Wir hoffen, dass dies Ihnen helfen wird, kreative Ideen zu füllen oder Ihnen bei Ihrem aktuellen Projekt zu helfen. Sehen Sie ein lives Beispiel für das Spiel Hier oder finden es weiter Github .

Dieser Artikel wurde ursprünglich in Ausgabe 300 von veröffentlicht Netz Das weltweit größte Magazin für professionelle Webdesigner und Entwickler. Ausgabe 300 kaufen oder Abonnieren Sie hier .

Zum Thema passende Artikel:

• Beginnen Sie mit dem Webgl mit drei.js
• 20 JavaScript-Tools, um Ihren Geist zu blasen
• Erstellen Sie interaktive 3D-Visuals mit drei.js