So erstellen Sie Fliesen in Ihrem HTML5 Spiel
Eine Kachel-basierte Welt ist eine Technik, die in HTML5-Spielen verwendete interessante flexible Hintergründe ohne große Speicherkosten zu bieten. Die Grundidee ist es, eine Anzahl von kleinen Bildern zu nehmen und sie in Kombination verwenden, um ein komplettes Hintergrundbild zu bauen.
Typischerweise werden Sie eine Kachel Objekt bauen, die eine Reihe von kleinen enthält (32 x 32 Pixel) Bilder. Jede Kachel Objekt kann jedes der Bilder auf Befehl anzuzeigen. Dieses Schema hat eine Reihe interessanter Vorteile:
Der Speicherbedarf kann sehr klein sein. Jedes Bild in den Speicher geladen nur einmal, so können Sie eine sehr große Welt mit einem geringen Speicherbedarf erstellen.
Die Karte ist dynamisch. Das Bild in jeder Kachel angezeigt wird, kann zur Laufzeit geändert werden.
Fliesen können Gameplay Effekte haben. Sie können Fliesen verwenden, um interessante taktische Situationen zu schaffen, wie Wasser, die nicht überschritten werden können, oder die Berge, die einen Vorteil zu einem Verteidiger geben.
Karten sind einfach Arrays von ganzen Zahlen. So speichern Sie eine Kachel-basierte Karte, brauchen Sie nicht die Fliesen speichern überhaupt. Stattdessen halten Sie einfach den Überblick über die Kachel-Staaten.
Karten können viel größer als der Bildschirm sein. Eine Fliese Karte kann eine beliebige zweidimensionale Array von ganzen Zahlen sein.
ein tileset Scrollen ist einfach. Es ist einfach, große Scrollen Welten mit einem Plattensystem zu machen, da die Anzeige von den Daten getrennt ist. Die Fliesen sich selten bewegen.
Fliesen sind für mehrere Spielarten geeignet. Fliesen sind für Rollenspiele sowie Brettspiele, taktische Spiele, und Side-Scrolling-Plattform-Spiele häufig verwendet.
Wie ein Tile-Objekt erstellen
Das Tile-Objekt ist die Grundlage der Kachel-basierten Karten. Hier ist Code für einen einfachen Fliese Prototyp:
Der bedeutendste Teil einer Kachel ist seine Multi-State-Natur. Es hat mehrere Staaten. Jeder Zustand zeigt ein anderes Bild. Hier ist, wie es zu schreiben:
Bereiten Sie Ihre Bilder.
Die sichtbaren Teile der Fliese-basierten System sind die verschiedenen Bilder. Bauen oder erhalten (mit den erforderlichen Berechtigungen, natürlich) einige Fliesen, die Sie verwenden können.
Bauen Sie Konstanten für die Staaten.
Der einfachste Weg, mit Staaten zu arbeiten, ist Konstanten für sie zu vergeben. Konstanten hat den Vorteil, durch die Menschen und einfach ganze Zahlen auf den Computer leicht lesbar zu sein.
Erstellen Sie ein Standard-Sprite.
Die Fliese ist nach wie vor im Wesentlichen ein Sprit. Es ist normalerweise nicht bewegen, so dass man seine Geschwindigkeit auf 0 verwenden Sie einen der Sprite-Bilder einstellen können Sie als Standard möchten.
Vergeben Sie einen Standardzustand.
Das Staatseigentum ist der wichtigste Aspekt einer Fliese. Es zeigt an, welcher Zustand der Fliese zur Zeit angezeigt wird. Der Wert Staat sollte immer eine des Zustands Konstanten sein.
Erstellen Sie ein Array von Bildern.
Jede Kachel wird der Zugriff auf alle möglichen Bilder haben. Speichern sie in einem Array. Stellen Sie sicher, dass das Array, um Linien mit den konstanten Werten.
Legen Sie eine Zeile und Spalte.
Fliesen sind in der Regel in einem zweidimensionalen Raster platziert, so kann es sehr nützlich sein, die aktuelle Kachel der Zeile und Spalte zu verfolgen.
Fügen Sie eine setState () -Methode.
Diese Methode ermöglicht es Ihnen, auf einfache Weise eine Fliese zu einem der Zustandswerte zu ändern. Verwenden Sie eine Konstante der Zustand erkannt wird durch Ihre Fliesen zu gewährleisten. Der Staat Eigenschaft modifiziert, um den aktuellen Status zu reflektieren, und das Bild wird ebenfalls geändert, so dass das richtige Bild wird auf dem nächsten Update angezeigt werden soll.
Geben Sie den Datenabruf-Techniken.
Diese Funktionen geben die Zeile, Spalte und den aktuellen Zustand der Fliese.
Lassen Sie ein Bearbeitungsverhalten.
Die checkMouse () -Methode bestimmt, ob die Platte angeklickt wurde. Wenn ja, wird der Zustand erhöht und der neue Zustand angezeigt wird.
Wie ein Spiel Karte von Fliesen bauen
Jede Fliese ist ein mächtiges Werkzeug, aber die wirkliche Macht der Kachel-basierte Struktur ist, wie Fliesen kombiniert, um eine vollständige Karte zu erstellen. Die tileset ist eine zweidimensionale Anordnung von Kachel-Objekten. Wie die meisten zweidimensionalen Arrays, wird es normalerweise durch ein Paar von verschachtelten Schleifen verwaltet. Hier ist der Code für die tileset einrichten:
Es gibt nur ein paar Punkte hier im Auge zu behalten:
Die tileset ist ein Array. Jedes Mitglied des tileset Array ist tatsächlich eine Reihe. Erstellen einer Anordnung von Länge ROWS.
Schritt durch jede Zeile. Verwenden for-Schleife einen Standard durch die alle Zeilen zu treten.
Jede Reihe ist ein Array mit der Länge COLS. Ein zweidimensionales Array ist eigentlich ein Array von Arrays. Stellen eine Anordnung von Länge COLS für jede Zeile.
Schritt die Spalten durch. Machen Sie eine for-Schleife, die einmal pro Spalte geschieht. Sie haben nun zwei Zählvariablen (Zeile und Spalte), die zusammen die Position jeder Kachel in der zweidimensionalen Struktur beschreiben.
Erstellen Sie eine neue Fliese. Verwenden Sie einfach die Fliesen Konstruktor eine neue Fliesen zu bauen.
Stellen Sie die Position der Fliese. Sie können die Zeile und Spalte durch die Breite und Höhe der Zelle multiplizieren, um eine grobe Platzierung zu bestimmen.
Ordnen Sie die Zeilen- und Spaltendaten an den Sprite. die Zeile und Spalte Daten zu Eigenschaften des Sprites einfach kopieren.