Erstellen Sie eine Kachel-basierte HTML5 Spiel, Kreativ Bloq
Fliesen können für eine Vielzahl von Spielen arbeiten. Dan Neame zeigt Ihnen, wie eine Kachel-basierte HTML5-Spiel erstellen, die auf verschiedenen Browsern laufen.
In diesem Tutorial werde ich Ihnen zeigen, wie Sie 2D-Kachel-basierte Spiele mit HTML5 erstellen können. Mit dem Spielfeld durch eine einfache Karte definiert sind, werden wir schauen in die Herstellung spielbar ‚Agenten‘ auf dem Niveau zu gehen, sehen Sie, wie diese Mittel erweitern in ‚Monster‘ mit Wegfindung und lernen, wie man das Spiel mit verschiedenen auf dem Bildschirm zu machen Arten von Renderer. Vom Desktop-PC auf dem Handy, durch Verantwortlichkeit Aufspaltung in geeigneter Weise können Sie flexible Spiele erstellen, die auf jedes Gerät mit einem Browser arbeiten.
Der Quellcode / Demo für das Tutorial ist hier zu finden. Dazu gehört alles im Tutorial und ermöglicht eine einfache Erweiterung für Ihre eigenen Spiele.
Der 2D-Array zeigt rote Quadrate sind 1s und leeren Quadrate sind 0s
rendering Auswahl
Wir beginnen mit, wie mehrere Canvas-Elemente verwenden, um das Spielfeld zu ziehen, obwohl SVG oder auch DOM-Knoten kann auch für die Darstellung von HTML5-Spielen verwendet werden. die richtige Technologie Die Wahl hängt davon ab, wie Sie das Spiel arbeiten wollen.
Wenn Sie mit Bitmaps arbeiten, dann ist Leinwand in der Regel die beste Wahl, weil es eine einheitliche API bereitstellt, die auch Cross-Browser ausführt. Alle modernen Browser unterstützen es, einschließlich Browser auf mobilen Geräten. Soweit IE geht, nur Versionen 9 und nach oben haben native Unterstützung, obwohl es eine polyfill ist die Unterstützung für IE7 und 8 gehostet auf Google Code Patches ExplorerCanvas genannt. SVG ist besser für Spiele, die Vektorgrafiken verwenden und hat auf die Leinwand Tag ähnliche Browser-Unterstützung.
DOM / CSS am besten für Spiele mit einfacher Animation verwendet. Ein Vorteil, der sowohl SVG und DOM / CSS über Leinwand haben, ist, dass Sie Ereignis-Listener direkt an die gerenderten Elemente binden können. Mit einer Leinwand, müssen Sie berechnen, welches Element angeklickt wird. Glücklicherweise ist es kein Problem für dieses Tutorial, weil das Spiel nicht auf Mausereignisse reagieren muß.
Lassen Sie uns zunächst unserer Ebene einzurichten. Karten können Sie den Spielbereich programmatisch definieren, Wände mit unwalkable Fliesen zu schaffen. Diese können in ihrer einfachsten Form durch 1 und 0 in einem 2D-Array dargestellt werden - hier 0 ist eine begehbare Fliesen und 1 ist eine Wand:
Aus dem obigen Code, können wir sehen, dass das Spiel Raumwand rund um den Rand sowie ein paar Hindernisse in der Mitte hat. Sie können diese Art von Karte als Grundlage für die Kollisionsberechnungen verwenden, sowie für das Spiel auf dem Bildschirm zu machen.
Rendern der Karte
Um Ihre Karte machen Sie ein Renderer Objekt benötigen, die für das Rendern einer Schicht des Spiels verantwortlich ist. mehr Schichten zu verwenden ist einfacher und schneller als eine einzelne Schicht verwendet, da es bedeutet, dass Sie nicht den Hintergrund einen Charakter bewegt jedes Mal neu zu ziehen haben.
Die Render zeigt die Spielfläche auf einem soliden schwarzen Hintergrund
Die Verbesserung des Putzes
Wir haben eine einfache Darstellung unseres Spielbereiches, aber es sieht im Moment ziemlich einfach. Also nächstes werden wir statt Leinwand drawRect bei Verwendung von Bildern suchen. Lassen Sie uns unseren Hintergrund in etwas verwandeln, das Gras mit CSS ähnelt. Dies ist so einfach wie ein Hintergrund-Eigenschaft auf der ersten Schicht aufgebracht wird:
Die Verbesserung der Wiedergabe der Wände bedeutet, wir gehen die Karte zu ändern. Anstatt nur 1s mit den Wänden repräsentieren, können wir 1s, 2s und 3s verwenden, um verschiedene Bilder darstellen.
In der neuen Karte, für 0 ein begehbares Fliese wie zuvor (transparent), stellt 1 eine durchgehende Wand Bild 2 stellt die linke Kante einer Wand, und 3 stellt die rechte Kante einer Wand.
Unter Verwendung von Sprites in einem tileset
Wenn mit dem Leinwand-Tag verwendet, können Blätter Sprite auch die Leistung verbessern. Es ist schneller von einer zwischengespeicherten Leinwand zu probieren, als es aus separaten Bildobjekten zu zeichnen ist.
Um herauszufinden, welcher Teil des Sprites zu wissen, für die verschiedenen Fliesen zu probieren, brauchen wir eine Kachel-Spezifikation, die als Eigenschaft des Renderer definiert werden kann. Die Fliese Spezifikation ist ein Hash der X- und Y-Koordinaten der Grafiken auf dem Sprite-Blatt enthält. Zum Beispiel haben unsere Hintergrund Fliesen die folgende Fliese Spezifikation:
Das Bild für unsere ‚1‘ Fliese ist bei 0,0 in dem Sprite-Blatt, ‚2‘ ist bei 48,0 und ‚3‘ ist bei 24,0 (wie unten in der Abbildung dargestellt). Wir werden ein neues Objekt müssen das Sprite und seine Kachel-Spezifikation zu halten, die wir Tileset nennen werde. Es wird zum Laden des Sprite in ein Bildelement und das Laden der Kachel-Spezifikation JSON über Ajax, sowie das Bereitstellen von Verfahren zuständig sein, die Daten zuzugreifen.
Der Hintergrund Sprite Blatt
Die anderen Verfahren können die gleichen bleiben. Wir müssen nur drawTile ändern, damit es einen Sprit sowie Einzelheiten akzeptiert, wo Probe. Nun, da wir das Sprit aus dem tileset verwenden, das unseren Spielbereiches machen sieht viel schöner.
Herstellung eines Mittels,
Das Spielfeld mit Sprites gerendert statt einfachen Rechtecken
In dem obigen Verfahren wird die Sprites Spieler, Fliesen Beschreibung und Position von dem Spieler Mittel auf die drawTile Methode übergeben. Die getSprite Methode gibt einen Hinweis auf den Sprite-Agenten von seinem tileset. getTileSpec zusammen mit getTileId Rück die Spezifikation für die aktuelle Kachel des Spielers Agenten.
Die Position des Mittels wird als X und Y-Koordinaten gespeichert, die, im Gegensatz zu tile Positionen können Fraktionen sein, für eine gleichmäßige Bewegung um die Karte zu ermöglichen.
Umgang mit Benutzereingaben
Der Spieler-Agent auf dem Spielfeld gezeigt gerendert
Wenn es keine Gamepads und keine Berührung ist, dann wird Joystix für WASD hören oder Tastendruck-Ereignisse Pfeil. Die Leertaste und Eingabe-Tasten fungieren als Feuerknopf.
Die Joystix Quelle wird mit den Dateien für dieses Tutorial gebündelt oder auf GitHub zugegriffen werden.
Kollisions-Management
Wir können unsere Spieler Agent bewegen, aber er geht direkt über alle Wände. Wir werden ein Objekt müssen, die Kollisionserkennung verarbeiten kann. Kollisionserkennung kann kompliziert sein, je nach der Art des Spiels Sie machen. Es gibt viele verschiedene Begrenzungsrahmen und Linienschnittalgorithmen zur Auswahl - und diese kann schwierig sein zu meistern. Zum Glück für Kachel-basierten Spiele, es ist viel einfacher. Wir können nur eine Kachel als begehbare oder unwalkable gesetzt und Bewegung in sie verhindern.
Für unsere CollisionManager müssen wir wissen, was das Spiel Karte aussieht, wo der Spieler ist und wo sie gehen wollen. Er prüft dann, ob die neue Position und begehbar ist, wenn ja, ihre neue Position zurückkehrt. Wenn die Fliese unwalkable ist, gibt die CollisionManager die ursprüngliche Position zurück.
Halten von einem Objekt verwaltet Kollisionen reduziert die Kopplung zwischen der Benutzereingabe und den Spieler, und ermöglicht eine einfachere Erweiterung oder spätere Änderung. die CollisionManager zurückkehren, um ihre neue Stellung anstatt Rückkehr, ob eine Kollision aufgetreten ist oder nicht bedeutet, dass die Agenten müssen nicht darum kümmern, was passiert, wenn sie gegen eine Wand. Alle Agenten müssen wissen, wo sie enden.
Sie werden bemerken, dass das erste, die getPosition Funktion übergebene Argument Isy aufgerufen wird und dass getPosition gibt nur einen einzigen Wert. Dies ermöglicht es uns, die Y- und X-Bewegung getrennt zu behandeln. Wenn der Agent eine Wand trifft dann werden sie an ihr entlang gleiten anstatt sich zu ihm stecken.
Eine 3D-Projektion der getrennten Schichten in dem Sprit-basierte verwendet render
Agenten in Feinde Erweitern
Das nächste, was für unser Spiel zu machen ist, die Feinde. Die Feinde werden Agenten, genau wie unsere Spieler sein, wenn sie nicht auf Benutzereingaben nicht reagiert. Stattdessen wird das Mob Objekt des Agenten Objekt erweitern und eine chooseAction Methode hinzufügen, die Benutzereingaben mit einiger einfachen künstlichen Intelligenz (KI) ersetzt.
Der Mob wird auch einen Verweis auf die Spielerposition in seinem Konstruktor. Die targetAgent ist der Agent, der Mob sollte gehen:
chooseAction nimmt eine Position von dem Feind, der am nächsten zu dem Spieler, mit einer Kappe bedeckt zu einem Maximum von 0,05 +/- Abstand in entweder X oder Y um es zu stoppen zu schnell bewegt. Dies bedeutet, dass der Feind gegenüber dem Spieler an jedem Ticken des Game-Engine laufen wird.
Abgesehen von dieser Änderung, unsere Feinde haben alle die gleichen Methoden und Eigenschaften wie unsere Spieler Mittel und kann auf die gleiche Art und Weise durch unsere CharacterRenderer und CollisionManager behandelt werden. Der einzige Unterschied ist, dass, wenn eine Benutzereingabe definiert, wo der Spieler gehen will, werden wir chooseAction um ausführen müssen die Koordinaten zu erhalten, die definieren, wo der Mob gehen will.
Die Mobs haben ihre eigenen tileset, die die gleichen Sprit als Mittel verwendet, sondern verwenden eine andere Fliese Spezifikation Feindbilder auf dem Sprit zu verweisen, anstatt Spieler.
Der Zeichenblatt Sprite
Mit einer etwas größeren Karte, der Weg unseres Feind nehmen, wenn der Spieler bewegt sich nicht umseitig dargestellt. Beachten Sie, dass es die dreizehnten Kachel durch die Zeit bewegt sich in, wird der Feind hinter der Linie von Bäumen kleben. Jede Drehung, wird es versuchen, in einer geraden Linie auf die Spieler zu bewegen, die durch diesen Punkt, einen Baum ist gerade in.
Wegfindung
Unser Feind ist nicht einer der schärfsten Werkzeuge in der Box im Moment, und geht direkt in die Wände. Es wäre viel besser, wenn er um sie herum, anstatt gehen kann. Um dies zu tun, werden wir brauchen einen Wegfindung Algorithmus zu verwenden.
Wir werden den A * -Algorithmus verwenden, die als sehr genau und ist ziemlich schnell. Zuerst werden wir eine neue Methode, um unsere mob hinzuzufügen: getAStarMovement.
Ein Weg, die durch den einfachen Algorithmus AI
chooseAction verwendet dann getAStarMovement, um zu bestimmen, welche in die Fliese zu bewegen, um den optimalen Weg von A * berechnet zu folgen:
Der A * Algorithmus verwendet wird, mit den Dateien für dieses Tutorial gebündelt. Es basiert auf Matthew Trost ‚A-Star Pathfinding Algorithmus‘.
Der Pfad, die durch den A * -Algorithmus
Abschließend
In diesem Tutorial haben wir eine Kachel-basierte HTML5-Spiel aufgebaut, die auf einer Vielzahl von Browsern laufen. Wir haben kann, wie ein 2D-Array sah in einen Spielbereich gedreht werden, wie wir es mit Feinden und einem Spieler besiedeln können und wie wir diese Mittel in einer Vielzahl von Arten steuern.
Sie müssen nicht nur ein roguelike Spiel machen müssen: Fliesen können für eine Vielzahl von Spielen und der Quellcode arbeiten sollte für viele als eine gute Basis dienen. Habe Spaß!
Dieser Artikel wurde ursprünglich in Netto-Magazin Ausgabe 245 erschienen.