Share
In diesem Tutorial helfe ich Ihnen, Ebenen für jedes Spielgenre zu erstellen und das Entwerfen von Ebenen wesentlich zu vereinfachen. Sie werden lernen, wie Sie Ihre erste Kachel-Map-Engine für Ihre zukünftigen Projekte erstellen. Ich werde Haxe mit OpenFL verwenden, aber Sie sollten in jeder Sprache mitmachen können.
Folgendes werden wir behandeln:
Vielleicht bekommen Sie auch einen guten Start in eine neue Spielidee!
Natürlich hat Wikipedia eine genaue Definition dessen, was ein Spiel ist, das auf Kacheln basiert, aber um den Grundgedanken zu verstehen, gibt es nur ein paar Dinge, die Sie wissen müssen:
Um noch grundlegender zu werden, sage ich es so:
Ein auf Kacheln basierendes Spiel legt Kacheln an, um jedes Level zu erstellen.
In Bezug auf die gängigen Fliesentypen - rechteckig und isometrisch - werden in diesem Artikel der Einfachheit halber rechteckige Fliesen verwendet. Wenn Sie sich entschließen, eines Tages isometrische Werte auszuprobieren, müssen Sie mit zusätzlichen Berechnungen arbeiten. (Wenn Sie hier fertig sind, sehen Sie sich diese großartige Einführung in die Erstellung isometrischer Welten an.)
Es gibt einige ziemlich coole Vorteile, die Sie durch die Verwendung eines Kachelmotors erzielen. Der offensichtlichste Vorteil ist, dass Sie nicht für jede Ebene massive Bilder von Hand erstellen müssen. Dies reduziert die Entwicklungszeit und die Dateigrößen. 50 Bilder mit 1280 x 768 Pixeln für ein 50-Level-Spiel und ein Bild mit 100 Kacheln machen einen großen Unterschied.
Ein weiterer Nebeneffekt ist, dass das Auffinden von Objekten auf Ihrer Karte mithilfe von Code etwas einfacher wird. Anstatt Dinge wie die Kollision anhand eines exakten Pixels zu überprüfen, können Sie mit einer schnellen und einfachen Formel feststellen, auf welche Kachel Sie zugreifen müssen. (Ich werde das später noch einmal besprechen.)
Das erste, was Sie benötigen, wenn Sie Ihre Kachelmaschine bauen, ist ein Satz von Kacheln. Sie haben zwei Möglichkeiten: Verwenden Sie die Steine einer anderen Person oder erstellen Sie Ihre eigenen.
Wenn Sie sich dafür entscheiden, bereits gefertigte Kacheln zu verwenden, können Sie frei verfügbare Kunstwerke im gesamten Web finden. Der Nachteil ist, dass die Kunst nicht speziell für Ihr Spiel entwickelt wurde. Auf der anderen Seite, wenn Sie nur Prototypen erstellen oder versuchen, ein neues Konzept zu erlernen, werden freie Kacheln den Trick tun.
Es gibt einige Ressourcen für freie und Open Source-Kunst. Hier sind einige Orte, an denen Sie Ihre Suche starten können:
Diese drei Links sollten Ihnen mehr als genug Platz bieten, um ein paar anständige Kacheln für Ihre Prototypen zu finden. Bevor Sie sich verrückt machen und alles, was Sie finden, packen, stellen Sie sicher, dass Sie wissen, unter welcher Lizenz alles geschützt ist und welche Einschränkungen damit verbunden sind. Bei vielen Lizenzen können Sie die Kunst frei und für die kommerzielle Nutzung verwenden, sie müssen jedoch möglicherweise zugeordnet werden.
Für dieses Tutorial habe ich einige Plättchen aus einem The Open Game Art Bundle für Plattformspieler verwendet. Sie können meine verkleinerten Versionen oder die Originale herunterladen.
Wenn Sie noch nicht den Sprung in die Kunst gemacht haben, für Ihre Spiele Kunst zu machen, kann dies ein wenig einschüchternd sein. Glücklicherweise gibt es einige erstaunliche und einfache Software, die Sie in den Griff bekommt, damit Sie mit dem Üben anfangen können.
Viele Entwickler beginnen mit Pixel-Art für ihre Spiele und hier sind ein paar großartige Werkzeuge für genau das:
Dies sind einige der beliebtesten Programme zum Erstellen von Pixelkunst. Wenn Sie etwas Stärkeres suchen, ist GIMP eine ausgezeichnete Option. Sie können auch Vektorgrafiken mit Inkscape erstellen und einige erstaunliche Tutorials unter 2D Game Art For Programmers verfolgen.
Sobald Sie die Software erworben haben, können Sie mit dem Erstellen Ihrer eigenen Kacheln experimentieren. Da dieses Tutorial Ihnen zeigen soll, wie Sie Ihre Fliesenkarte erstellen Motor Ich werde nicht zu sehr ins Detail gehen, um die Fliesen selbst herzustellen, aber es gibt eine Sache, die man immer im Auge behalten sollte:
Stellen Sie sicher, dass Ihre Fliesen nahtlos zusammenpassen, und fügen Sie einige Variationen hinzu, um sie interessant zu halten.
Wenn Ihre Plättchen beim Zusammenfügen offensichtliche Linien aufweisen, sieht Ihr Spiel nicht besonders schön aus. Stellen Sie sicher, dass Sie sich etwas Zeit nehmen, um ein schönes "Puzzle" aus Kacheln zu erstellen, indem Sie sie nahtlos gestalten und Variationen hinzufügen.
Jetzt haben wir all diese Kunstgegenstände aus dem Weg, wir können in den Code eintauchen, um Ihre neu erworbenen (oder erstellten) Kacheln auf dem Bildschirm zu platzieren.
Beginnen wir mit der grundlegenden Aufgabe, eine einzelne Kachel auf dem Bildschirm anzuzeigen. Stellen Sie sicher, dass Ihre Kacheln alle die gleiche Größe haben und in separaten Bilddateien gespeichert sind (wir werden später mehr über Sprite-Sheets sprechen)..
Sobald Sie die Kacheln in Ihrem Assets-Ordner Ihres Projekts haben, können Sie sehr einfach schreiben Fliese Klasse. Hier ist ein Beispiel in Haxe:
Accentsconagua
import flash.display.Sprite; import flash.display.Bitmap; openfl.Assets importieren; Klasse Tile erweitert Sprite private var image: Bitmap; öffentliche Funktion new () super (); image = new Bitmap (Assets.getBitmapData ("assets / grassLeftBlock.png")); addChild (Bild); Da wir jetzt nur eine einzige Kachel auf dem Bildschirm platzieren, importiert die Klasse das Kachelbild nur von der Vermögenswerte Ordner und fügen Sie ihn als Objekt dem Objekt hinzu. Diese Klasse hängt wahrscheinlich von der verwendeten Programmiersprache ab. Sie sollten jedoch in der Lage sein, eine Anleitung zur Anzeige eines Bildes auf dem Bildschirm zu finden.
Jetzt haben wir eine Fliese Klasse, müssen wir eine Instanz von a erstellen Fliese und füge es unserer Hauptklasse hinzu:
import flash.display.Sprite; import flash.events.Event; import flash.Lib; Klasse Main erweitert Sprite öffentliche Funktion new () super (); var tile = new Tile (); addChild (Kachel); öffentliche statische Funktion main () Lib.current.addChild (new Main ());
Das Main Klasse schafft ein neues Fliese wenn der Konstruktor (der Neu() Funktion, die aufgerufen wird, wenn das Spiel beginnt), wird aufgerufen und der Anzeigeliste hinzugefügt.
Wenn das Spiel läuft, wird die Main() Funktion wird auch aufgerufen und eine neue Main Objekt wird der Bühne hinzugefügt. Ihr Plättchen sollte jetzt ganz oben links auf dem Bildschirm erscheinen. So weit, ist es gut.
Spitze: Wenn das alles keinen Sinn macht - keine Sorge! Es ist nur Standard-Haxe-Code. Der Schlüssel zu verstehen ist, dass dies eine Fliese Objekt und fügt es dem Bildschirm hinzu.
Der nächste Schritt besteht darin, einen Weg zu finden, den gesamten Bildschirm mit Kacheln auszufüllen. Eine der einfachsten Möglichkeiten, dies zu tun, besteht darin, ein Array mit ganzen Zahlen zu füllen, die jeweils a darstellen Fliesen-ID. Anschließend können Sie das Array durchlaufen, um zu entscheiden, welche Kachel angezeigt werden soll und wo sie angezeigt werden soll.
Sie haben die Möglichkeit, ein typisches Array oder ein 2-dimensionales Array zu verwenden. Falls Sie mit 2D-Arrays nicht vertraut sind, handelt es sich im Wesentlichen um ein einzelnes Array, das mit mehreren Arrays gefüllt ist. Die meisten Sprachen bezeichnen dies als nameOfArray [x] [y] woher x und y sind Indizes für den Zugriff auf ein einzelnes Element.
Schon seit x und y auch für Bildschirmkoordinaten verwendet werden, ist die Verwendung möglicherweise sinnvoll x und y als Koordinaten für unsere Fliesen. Der Trick bei 2D-Arrays besteht darin, die Organisation der Ganzzahlen zu verstehen. Möglicherweise müssen Sie das umkehren y und x beim Durchlaufen der Arrays (Beispiel unten).
private var exampleArr = [[0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0]];
Beachten Sie, dass in dieser Implementierung das "0th" -Element im Array selbst ein Array mit fünf Ganzzahlen ist. Dies bedeutet, dass Sie mit auf jedes Element zugreifen y zuerst, dann x. Wenn Sie versuchen, darauf zuzugreifen beispielArr [1] [0], Sie würden auf die zugreifen sechste Fliese.
Wenn Sie nicht genau verstehen, wie 2D-Arrays jetzt funktionieren, machen Sie sich keine Sorgen. In diesem Tutorial werde ich ein normales Array verwenden, um die Dinge einfach zu halten und die Visualisierung zu erleichtern:
private var exampleArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 0, 0];
Das obige Beispiel zeigt, wie ein normales Array etwas einfacher sein kann. Wir können uns genau vorstellen, wo die Kachel sein wird, und alles, was wir tun müssen, ist eine einfache Formel (keine Sorge, es kommt!), Um die Kachel zu erhalten, die wir wollen.
Jetzt schreiben wir etwas Code, um unser Array zu erstellen und es mit einem zu füllen. Die Nummer eins ist die ID, die unsere erste Kachel darstellt.
Zuerst müssen wir eine Variable innerhalb unserer Main-Klasse erstellen, um unser Array aufzunehmen:
private var-karte: Array;
Das sieht vielleicht ein bisschen seltsam aus, also werde ich es für Sie brechen.
Der Variablenname ist map und ich habe ihm einen ganz bestimmten Typ gegeben: Array. Das
Als nächstes müssen wir unseren Code hinzufügen Main Konstruktor der Klasse (Denken Sie daran, dies ist der Neu() Funktion), damit wir eine Instanz unserer Karte erstellen können:
map = neues Array();
Diese Zeile erzeugt ein leeres Array, das wir bald mit unserem Array füllen können, um es auszuprobieren. Lassen Sie uns zunächst einige Werte definieren, die uns bei unserer Mathematik helfen:
public static var TILE_WIDTH = 60; public static var TILE_HEIGHT = 60; public static var SCREEN_WIDTH = 600; public static var SCREEN_HEIGHT = 360;
Ich habe diese Werte gemacht öffentlich statisch weil dies uns von überall in unserem Programm (via Main.Tile_WIDTH und so weiter). Vielleicht haben Sie auch diese Trennung bemerkt BILDSCHIRMBREITE durch TILE_WIDTH gibt uns 10 und teilen SCREEN_HEIGHT durch TILE_HEIGHT gibt uns 6. Diese beiden Zahlen werden verwendet, um zu entscheiden, wie viele Ganzzahlen in unserem Array gespeichert werden sollen.
var w = Std.int (SCREEN_WIDTH / TILE_WIDTH); var h = Std.int (SCREEN_HEIGHT / TILE_HEIGHT); für (i in 0… w * h) map [i] = 1
In diesem Codeblock weisen wir zu 10 und 6 zu w und h, wie ich oben erwähnt habe. Dann müssen wir in eine springen zum Schleife, um ein Array zu erstellen, das passen kann 10 * 6 ganze Zahlen Dadurch werden genügend Kacheln berücksichtigt, um den gesamten Bildschirm auszufüllen.
Jetzt haben wir unsere Basiskarte aufgebaut, aber wie sollen wir den Kacheln sagen, um an ihren richtigen Platz zu gelangen? Dafür müssen wir zurück in die Fliese Klassen und erstellen Sie eine Funktion, die es uns ermöglicht, Kacheln beliebig zu verschieben:
öffentliche Funktion setLoc (x: Int, y: Int) image.x = x * Main.TILE_WIDTH; image.y = y * Main.TILE_HEIGHT;
Wenn wir das anrufen setLoc () Funktion übergeben wir in der x und y Koordinaten entsprechend unserer Kartenklasse (Formel kommt bald, versprochen!). Die Funktion nimmt diese Werte und übersetzt sie in Pixelkoordinaten, indem sie mit multipliziert wird TILE_WIDTH und TILE_HEIGHT, beziehungsweise.
Das einzige, was wir noch tun müssen, um unsere Kacheln auf dem Bildschirm zu sehen, ist, es unseren zu sagen Main Klasse, um die Kacheln zu erstellen und sie basierend auf ihren Positionen auf der Karte zu platzieren. Gehen wir zurück zu Main und implementiere das:
für (i in 0… map.length) var tile = new Tile (); var x = i% w; var y = Math.floor (i / w); tile.setLoc (x, y); addChild (Kachel);
Oh ja! Das ist richtig, wir haben jetzt einen Bildschirm voller Fliesen. Lasst uns zusammenreißen, was oben passiert.
Die Formel, die ich immer wieder erwähne, ist endlich da.
Wir rechnen x indem Sie die Modul (%) von ich und w (was 10 ist, erinnern Sie sich).
Der Modul ist nur der Rest nach der Ganzzahleinteilung: \ (14 \ div 3 = 4 \ text rest 2 \) so \ (14 \ text modulus 3 = 2 \).
Wir benutzen das, weil wir unseren Wert haben wollen x zurücksetzen auf 0 am Anfang jeder Reihe, also zeichnen wir das entsprechende Feld ganz links:
Wie für y, wir nehmen die Fußboden() von i / w (das heißt, wir runden dieses Ergebnis ab), weil wir nur wollen y zu erhöhen, sobald wir das Ende jeder Reihe erreicht haben und eine Ebene nach unten gegangen sind:
Math.floor () beim Teilen von ganzen Zahlen; Haxe behandelt die ganzzahlige Division einfach anders. Wenn Sie eine Sprache verwenden, die ganzzahlige Division hat, können Sie sie einfach verwenden i / w (vorausgesetzt, beide sind ganze Zahlen). Zum Schluss möchte ich noch etwas über das Scrollen von Ebenen erwähnen. Normalerweise erstellen Sie keine Ebenen, die perfekt in Ihr Ansichtsfenster passen. Ihre Karten sind wahrscheinlich viel größer als der Bildschirm, und Sie möchten nicht weiter Bilder zeichnen, die der Player nicht sehen kann. Mit ein paar schnellen und einfachen Berechnungen sollten Sie in der Lage sein zu berechnen, welche Kacheln auf dem Bildschirm angezeigt werden sollen und welche Kacheln, um das Zeichnen zu vermeiden.
Zum Beispiel: Ihre Bildschirmgröße beträgt 500x500, Ihre Kacheln sind 100x100 und Ihre Weltgröße ist 1000x1000. Sie müssen lediglich eine kurze Überprüfung durchführen, bevor Sie Kacheln zeichnen, um herauszufinden, welche Kacheln auf dem Bildschirm angezeigt werden. Wenn Sie die Position Ihres Ansichtsfensters verwenden (beispielsweise 400 x 500), müssen Sie nur Kacheln aus den Zeilen 4 bis 9 und den Spalten 5 bis 10 zeichnen. Sie können diese Zahlen erhalten, indem Sie die Position durch die Kachelgröße teilen und diese Werte dann mit dem Bildschirm verschieben Größe geteilt durch die Fliesengröße. Einfach.
Es sieht vielleicht noch nicht nach viel aus, da alle Fliesen gleich sind, aber das Fundament ist fast da. Jetzt müssen nur noch verschiedene Arten von Kacheln erstellt und unsere Karte so gestaltet werden, dass sie sich aneinander reihen und etwas Schönes schaffen.
Okay, wir haben jetzt eine Karte, die voll ist und den Bildschirm abdeckt. An diesem Punkt sollten Sie mehr als einen Fliesentyp haben, was bedeutet, dass wir unseren ändern müssen Fliese Konstruktor, um das zu berücksichtigen:
öffentliche Funktion new (id: Int) super (); switch (id) Fall 1: Bild = neue Bitmap (Assets.getBitmapData ("assets / grassLeftBlock.png")); Fall 2: Bild = neue Bitmap (Assets.getBitmapData ("assets / grassCenterBlock.png")); Fall 3: image = new Bitmap (Assets.getBitmapData ("assets / grassRightBlock.png")); Fall 4: image = new Bitmap (Assets.getBitmapData ("assets / goldBlock.png")); Fall 5: image = new Bitmap (Assets.getBitmapData ("assets / globe.png")); Fall 6: Bild = neue Bitmap (Assets.getBitmapData ("assets / mushroom.png")); addChild (Bild); Da ich sechs verschiedene Karten für meine Karte verwendet habe, brauchte ich eine Schalter Aussage, die die Zahlen eins bis sechs abdeckt. Sie werden feststellen, dass der Konstruktor jetzt eine ganze Zahl als Parameter verwendet, damit wir wissen, welche Art von Kacheln erstellt werden soll.
Nun müssen wir zu unserem zurückkehren Main Konstruktor und fixieren die Fliesenerstellung in unserem zum Schleife:
für (i in 0… map.length) var tile = new Tile (map [i]); var x = i% w; var y = Math.floor (i / w); tile.setLoc (x, y); addChild (Kachel);
Alles, was wir tun mussten, war das Pass karte [i] zum Fliese Konstruktor, damit es wieder funktioniert. Wenn Sie versuchen, zu laufen, ohne eine Ganzzahl an zu übergeben Fliese, Es werden einige Fehler angezeigt.
Fast alles ist vorhanden, aber jetzt brauchen wir eine Möglichkeit, Karten zu entwerfen, anstatt sie nur mit zufälligen Kacheln zu füllen. Entfernen Sie zuerst die zum Schleife in der Main Konstruktor, der jedes Element auf eins setzt. Dann können wir unsere eigene Karte von Hand erstellen:
map = [0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 2, 3, 0, 0, 0, 0, 0, 6 0, 0, 0, 0, 0, 0, 1, 2, 2, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 0, 0, 0, 0, 0, 0, 0, 1, 2, 2, 3];
Wenn Sie das Array wie ich oben formatieren, können Sie leicht sehen, wie unsere Kacheln organisiert werden. Sie können das Array auch einfach als eine lange Reihe von Zahlen eingeben, aber die erste ist schön, weil Sie 10 über und 6 nach unten sehen können.
Wenn Sie versuchen, das Programm jetzt auszuführen, sollten Sie einige Nullzeigerausnahmen erhalten. Das Problem ist, dass wir in unserer und unserer Karte Nullen verwenden Fliese Klasse weiß nicht, was sie mit einer Null anfangen soll. Zuerst korrigieren wir den Konstruktor, indem wir eine Prüfung hinzufügen, bevor wir das untergeordnete Bild hinzufügen:
if (image! = null) addChild (image);
Diese schnelle Überprüfung stellt sicher, dass der NULL keine untergeordneten Elemente hinzugefügt werden Fliese Objekte, die wir schaffen. Die letzte Änderung für diese Klasse ist die setLoc () Funktion. Im Moment versuchen wir das einzustellen x und y Werte für eine Variable, die nicht initialisiert wurde.
Fügen wir noch einen kurzen Check hinzu:
öffentliche Funktion setLoc (x: Int, y: Int) if (image! = null) image.x = x * Main.TILE_WIDTH; image.y = y * Main.TILE_HEIGHT;
Mit diesen beiden einfachen Korrekturen und den oben genannten Plättchen sollten Sie in der Lage sein, das Spiel auszuführen und ein einfaches Plattform-Level zu sehen. Da wir 0 als "Nicht-Kachel" gelassen haben, können wir sie transparent (leer) lassen. Wenn Sie das Level aufpeppen möchten, können Sie einen Hintergrund einfügen, bevor Sie die Plättchen auslegen. Ich habe gerade einen hellblauen Farbverlauf hinzugefügt, um im Hintergrund wie ein Himmel auszusehen.
Das ist so ziemlich alles, was Sie benötigen, um eine einfache Methode zur Bearbeitung Ihrer Level einzurichten. Versuchen Sie ein wenig mit dem Array zu experimentieren und sehen Sie, welche Designs Sie für andere Levels finden können.
Wenn Sie sich erst einmal mit den Grundlagen vertraut gemacht haben, können Sie einige andere Tools in Betracht ziehen, mit denen Sie schnell Ebenen entwerfen und sehen können, wie sie aussehen, bevor Sie sie in das Spiel werfen. Eine Möglichkeit besteht darin, einen eigenen Level-Editor zu erstellen. Die Alternative ist, sich Software zu holen, die kostenlos zur Verfügung steht. Die zwei beliebtesten Werkzeuge sind der Kacheleditor und der Ogmo-Editor. Beides macht die Ebenenbearbeitung durch mehrere Exportoptionen wesentlich einfacher.
zusammenhängende PostsJetzt wissen Sie, was ein Spiel auf Kachelbasis ist, wie Sie einige Kacheln für Ihre Level verwenden können und wie Sie sich die Hände schmutzig machen und den Code für Ihre Engine schreiben. Außerdem können Sie mit einem einfachen Array sogar grundlegende Levelbearbeitungen durchführen . Denken Sie daran, dass dies nur der Anfang ist. Sie können viel experimentieren, um einen noch besseren Motor zu entwickeln.
Ich habe auch die Quelldateien bereitgestellt, die Sie auschecken können. So sieht die endgültige SWF-Datei aus:
Laden Sie die SWF-Datei hier herunter.… Und hier ist wiederum das Array, aus dem es generiert wurde:
map = [0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 2, 3, 0, 0, 0, 0, 0, 6 0, 0, 0, 0, 0, 0, 1, 2, 2, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 0, 0, 0, 0, 0, 0, 0, 1, 2, 2, 3];
Ihre nächste Aufgabe ist es, einige Nachforschungen anzustellen und einige neue Dinge auszuprobieren, um das, was Sie hier gemacht haben, zu verbessern. Sprite-Platten sind eine großartige Möglichkeit, die Leistung zu verbessern und das Leben ein bisschen leichter zu machen. Der Trick besteht darin, einen festen Code zum Lesen von einem Sprite-Sheet zu erhalten, damit Ihr Spiel nicht jedes Bild einzeln lesen muss.
Sie sollten auch anfangen, Ihre künstlerischen Fähigkeiten zu üben, indem Sie einige eigene Kacheln erstellen. Auf diese Weise können Sie die richtige Kunst für Ihre zukünftigen Spiele erhalten.
Hinterlassen Sie wie immer einige Kommentare dazu, wie Ihre Engine für Sie arbeitet - und vielleicht sogar einige Demos, damit wir Ihr nächstes Plättchenspiel ausprobieren können.
