So erstellen Sie Fliesen in Ihre HTML5 Spiel

Eine Kachel-basierte Welt ist eine Technik, die in HTML5-Spiele verwendet interessant flexible Hintergründe ohne großen Speicherkosten zu bieten. Die Grundidee ist es, eine Anzahl von kleinen Bildern zu nehmen und sie in Kombination verwenden, um eine vollständige Hintergrundbild zu errichten.

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:

• 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.

• Sie können viele verschiedene Kacheln verwenden. Sie können eine sehr komplexe Welt mit einem der schönen Fliesen-Sets bauen Sie von Websites herunterladen können wie OpenGameArt.org.

• Die Karte ist dynamisch. Das Bild in jeder Kachel angezeigt wird, kann zur Laufzeit geändert werden.

• Fliesen können Gameplay auswirken. Sie können Fliesen verwenden, um interessante taktische Situationen schaffen, wie Wasser, die nicht überschritten werden kann, oder die Berge, die einen Vorteil zu einem Verteidiger geben.

• Karten sind einfach Arrays von ganzen Zahlen. So speichern Sie eine Kachel-basierte Karte, müssen Sie nicht um die Fliesen zu 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 aus 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 zu erstellen

Das Fliese Ziel ist die Grundlage der Kachel-basierte Karten. Hier ist Code für einen einfachen Fliesen Prototyp:

 var GRAS = 0-var DIRT = 1-var Wasser = 2-var NUMSTATES = 3-Funktion Tile () {TTILE = new Sprite (Szene "grass.png", 32, 32) -tTile.setSpeed ​​(0) - tTile.state = GRAS-tTile.images = new Array ( "grass.png", "dirt.png", "water.png") - tTile.row = 0-tTile.col = 0-tTile.setState = function ( Zustand) {this.state = state-this.setImage (this.images [this.state]) -} // end setStatetTile.getRow = function () {return this.row-} // end getRowtTile.getCol = function ( ) {return this.col-} // end getCol-tTile.getState = function () {return this.state-} // end getStatetTile.checkMouse = function () {if (this.isClicked ()) {newState = this .state-newState ++ - if (newState> = NUMSTATES) {newState = 0-} // end ifthis.setState (newState) -} // end if} // end ifreturn tTile-} // end Tile Konstruktor

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:

1. Bereiten Sie Ihre Bilder.

   Die sichtbaren Teile der Kachel-basierten System sind die verschiedenen Bilder. Bauen oder zu erhalten (mit den erforderlichen Berechtigungen, natürlich) einige Fliesen, die Sie verwenden können.

2. Bauen Sie die Konstanten für die Staaten.

   Der einfachste Weg, mit Staaten zu arbeiten, ist Konstanten für sie zu vergeben. Konstanten haben den Vorteil, durch den Menschen und einfachen ganzen Zahlen an den Computer leicht lesbar zu sein.

3. Erstellen Sie ein Standard-Sprite.

   Die Fliese ist nach wie vor im Wesentlichen ein Sprite. Es ist normalerweise nicht bewegen, so dass man seine Geschwindigkeit auf 0. Mit jedem der Sprite-Bilder einstellen können Sie als Standard verwenden möchten.

4. Vergeben Sie einen Standardzustand.

   Das Bundesland Eigentum ist der wichtigste Aspekt einer Fliese. Es zeigt an, welcher Zustand der Fliese zur Zeit anzeigt. Das Bundesland Wert sollte immer einer der staatlichen Konstanten sein.

5. Erstellen Sie ein Array von Bildern.

   Jede Fliese wird der Zugang zu allen möglichen Bilder haben. Lagern Sie sie in einem Array. Stellen Sie sicher, dass das Array, um Linien mit den konstanten Werten.

6. 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.

7. Füge hinzu ein setState () Verfahren.

   Diese Methode ermöglicht es Ihnen, auf einfache Weise eine Fliese zu einem der Zustandswerte ändern. Verwenden Sie eine Konstante der Zustand erkannt wird durch Ihre Fliesen zu gewährleisten. Das Bundesland Eigenschaft wird den aktuellen Zustand, und das Bild wird ebenfalls geändert, so dass das richtige Bild angezeigt auf dem nächsten Update zu modifiziert worden ist.

8. Geben Sie den Datenabruf-Techniken.

   Diese Funktionen geben die Zeile, Spalte und den aktuellen Zustand der Fliese.

9. Lassen Sie ein Bearbeitungsverhalten.

   Das checkMouse () Verfahren bestimmt, ob die Platte angeklickt wurde. Wenn ja, wird der Zustand inkrementiert, und der neue Zustand angezeigt wird.

Wie ein Spiel Karte von Fliesen zu 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. Das 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 Einrichtung der tileset:

 Funktion setupTiles () {tileset = new Array (ROWS) -für (row = 0- Reihe lt; ROWS- Reihe ++) {TRow = new Array (COLS) -für (col = 0- col lt; COLS- col ++) {TRow [col] = new Tile () - xPos = 16 + (32 * col) -yPos = 16 + (32 * Reihe) -tRow [col] .setPosition (xPos, yPos) -tRow [col ] .row = Zeilen TRow [col] .col = Zusammenarbeit} // end col für looptileset [Zeile] = tRow-} // end Zeile für Loop-} // end setupTiles

Es gibt nur ein paar Punkte hier im Auge zu behalten:

• Die tileset ist ein Array. Jedes Mitglied der tileset Array ist eigentlich eine Reihe. Bauen Sie sich ein Array mit der Länge REIHEN.

• Schritt für Schritt durch jede Zeile. Verwenden Sie ein Standard für Schleife zu Schritt durch alle Reihen.

• Jede Zeile ist ein Array mit der Länge COLS. Ein zweidimensionales Array ist eigentlich ein Array von Arrays. Machen Sie ein Array mit der Länge COLS für jede Zeile.

• Schritt die Spalten durch. Mach ein für Schleife, die einmal pro Spalte geschieht. Sie haben nun zwei Zählvariablen (Reihe und col), Die zusammen die Position jeder Kachel in der zweidimensionalen Struktur beschreiben.

• Erstellen Sie eine neue Fliese. Verwenden Sie einfach die Fliese Konstruktor eine neue Fliese zu bauen.

• Stellen Sie die Position der Fliese. Sie können die Zeilen- und Spalten durch die Breite und Höhe der Zelle vermehren eine grobe Platzierung zu bestimmen.

• Ordnen Sie die Zeilen- und Spaltendaten an das Sprite. Kopieren Sie einfach den Reihe und col Daten zu Eigenschaften des Sprites.