Wie man ein Tile-Based Spiel mit Cocos2D 2
Mmm, lecke Melonen!
In dieser 2-teiligen Tutorial, wir gehen zu decken, wie eine Kachel-basiertes Spiel mit Cocos2D zu machen und dem gefliesten Map-Editor. Wir werden dies tun, indem ein einfaches Kachel-basiertes Spiel schaffen, in dem ein Ninja eine Wüste auf der Suche nach leckerer Wassermelone Dingen erforscht!
In diesem Teil des Tutorials, wir, wie eine Karte mit Ziegeln decken erstellen, wie die Karte, um das Spiel hinzuzufügen, wie die Karte zu blättern, um den Spielern zu folgen, und wie Objektschichten verwenden.
Im zweiten Teil des Tutorials, wir, wie Collidable Bereiche in der Karte zu machen, wie Ziegel-Eigenschaften zu verwenden, wie Sammlerstücke zu machen und die Karte dynamisch ändern und wie Sie sicherstellen, dass Ihr Ninja zu viel isst nicht.
Ok, also lassen Sie uns etwas Spaß mit Fliesen Karten haben!
Erstellen eines Projekts Skeleton
Wir gehen durch die Schaffung eines Skeletts Projekt starten, um sicherzustellen, dass wir alle Dateien haben wir für den Rest des Projekts an der richtigen Stelle benötigen.
Hinweis: Wenn Sie nicht installiert haben cocos2d 2.1 RC0 noch, laden Sie es hier und dann von einem Terminal diese Befehle ausführen:
/Downloads/cocos2d-iphone-2.1-rc0
./install-templates.sh -f -u
Erstellen Sie ein neues Projekt in Xcode mit dem iOS / cocos2d v2.x / cocos2d iOS-Vorlage, und nennen Sie es TileGame. Wählen Sie die Optionen, um das Projekt Universal zu machen und umfassen git-Repository-Setup.
Wir werden ARC in diesem Projekt verwenden, aber standardmäßig wird die Vorlage nicht eingerichtet ARC zu verwenden. Zum Glück, es zu reparieren ist wirklich einfach. Gehen Sie einfach auf Bearbeiten \ Umgestalten \ Konvertieren in Objective-C ARC. Erweitern Sie die Dropdown-Liste und wählen Sie nur die letzten vier Dateien (main.m. AppDelegate.m. HelloWorldLayer.m. Und IntroLayer.m), klicken Sie auf Suchen und die Schritte des Assistenten beenden.
Und das ist es! Aufbau und Betrieb und machen immer noch sicher, dass alles funktioniert OK - Sie die normale Hallo Welt Bildschirm sehen sollte.
Anschließend laden Sie diese Zip-Datei von Ressourcen für das Spiel. Die ZIP-Datei enthält folgende Komponenten:
Sobald Sie die Ressourcen heruntergeladen haben, entpacken und die TileGameResources Ordner „Ressourcen“ Gruppe in Ihrem Projekt ziehen. Stellen Sie sicher, „Copy Elemente in Zielgruppe Ordner (falls erforderlich)“ markiert ist, „Erstellen von Gruppen für alle hinzugefügten Ordner“ ausgewählt ist, und klicken Sie auf Fertig stellen.
Wenn alles gut funktioniert, sollten alle Dateien in Ihrem Projekt aufgeführt werden.
Ihr Projekt soll wie folgt aussehen:
Das war es für heute - Zeit, etwas Spaß zu haben und unsere Karte machen!
Eine Karte mit Fliesen-
Cocos2D unterstützt Karten mit dem Open-Source-Fliese Map Editor erstellt und in TMX-Format gespeichert.
Wenn Sie den obigen Link besuchen, werden Sie sehen, gibt es zwei Versionen von Ziegeln decken - eine geschrieben, mit der Qt-Applikations-Framework und eine mit Java geschrieben. Es gibt zwei Versionen, weil Fliesen geschrieben wurden zum ersten Mal in Java, und sie es Portierung auf Qt über.
Welche Version Sie verwenden, ist weitgehend an Ihnen. In diesem Tutorial decken wir die Qt-Version verwenden, weil das die Hauptentwicklungs für Fliesen- von jetzt an ist, aber einige Leute wie die Java-Version zu verwenden, da nicht alle alten Funktionen haben noch vollständig portiert worden.
Wie auch immer - wenn Sie möchten, folgen, laden Sie die Qt-Version und installieren und die Anwendung ausführen. Go \ Neu in Datei, und füllen Sie den Dialog wie folgt:
(: The Legend of Zelda denken) oder isometrischen (man denke: Disgaea) in der Ausrichtung Abschnitt können Sie zwischen Orthogonal wählen. Wir gehen Orthogonal hier holen.
Weiter erhalten Sie die Kartengröße einzurichten. Beachten Sie, dass diese in Kacheln, nicht Pixel. Wir werden eine kleinere Größe der Karte machen, so wählen 50 x 50 hier. Gekachelt werden Ihnen die gesamte Kartengröße in Pixel, am unteren Rande des neuen Karte Dialogs zeigen. Dies wird durch Multiplikation der Bildfläche (50 Fliesen) durch die Kachelgröße (32 Pixel) in Höhe und Breite berechnet.
Schließlich legen Sie die Fliese Breite und Höhe. Was Sie hier wählen, hängt von der Fliese Set aus, das Künstler machen werden. In diesem Tutorial werden wir einige Beispiele Fliesen zu verwenden, die mit dem Fliesen Editor kommen, die 32 × 32 sind, so dass wählen.
Als nächstes müssen wir die Fliesen-Set hinzufügen, dass wir unsere Karte zeichnen verwenden werden. Klicken Sie auf „Karte“ in der Menüleiste auf „New Tileset ...“, und im Dialog füllen Sie wie folgt vor:
Um das Bild zu erhalten, klicken Sie auf Durchsuchen einfach und navigieren Sie zu Ihrem TileGame / TileGameResources Ordner, und wählen Sie die tmw_desert_spacing.png Datei, die Sie von der Ressource Zip heruntergeladen und Ihrem Projekt hinzugefügt. Es wird automatisch der Name auf den Dateinamen basierend ausfüllen.
Sobald Sie auf OK klicken, sehen Sie die Fliesen im Tilesets Fenster angezeigt. Nun können Sie zeichnen weg! Klicken Sie einfach auf den „Stempel“ Symbol in der Symbolleiste, dann eine Kachel klicken, dann auf eine beliebige Stelle auf der Karte, die Sie möchten, eine Fliese platzieren.
So voran gehen und sich eine Karte zeichnen - sein so kreativ wie Sie möchten! Stellen Sie sicher, zumindest ein paar Gebäude auf der Karte hinzuzufügen, weil wir etwas brauchen, in später kollidieren!
Einige praktische Abkürzungen im Auge zu behalten:
- Sie können in der Tileset Picker um eine Reihe von Fliesen einen Kasten ziehen, mehrere benachbarte Platten gleichzeitig zu legen.
- Sie können die Farbe Schaltfläche in der Symbolleiste den gesamten Hintergrund mit einer Basisplatte zu malen.
- Sie können mit „View \ Vergrößern ...“ vergrößern und verkleinern und „View \ Verkleinern ...“.
- Die „z“ -Taste wird nun die Fliese dreht, wenn eine Karte mit dem Stempelwerkzeug Bearbeitung
Es gibt eine neue Funktion, die Sie haben „Mini-Karte“ vielleicht bemerkt. Dies ist ein tolles Feature, es lassen Sie uns sehen Sie eine (Sie ahnen es) Mini-Karte! Werfen Sie einen Blick auf meinem schlechten Versuch ein Labyrinth in der Unterseite der Mini-Karte unten. Das rote Feld zeigt den Bereich, den Sie im Hauptbearbeitungsfenster.
Halten Sie diese Mini-Karte Ansicht im Kopf, wenn wir zum Blättern im nächsten Abschnitt zu sprechen.
Sobald Sie fertig zeichnen die Karte, klicken Sie doppelt auf die Ebene in Schichten (die wahrscheinlich sagt „Tile Layer 1“ jetzt), und den Namen in „Hintergrund“ ändern. Dann klicken Sie auf „Datei \ Speichern“ und die Datei auf TileGame \ TileGameResources im TileGame Projekt speichern, und benennen Sie die Datei „TileMap.tmx“.
Wir werden später mit Ziegeln gedeckt etwas mehr Dinge zu tun, aber jetzt wollen sie diese Karte in unser Spiel bekommen!
Das Hinzufügen der Fliesen Karte zu unserer Cocos2D Szene
Das erste, was zuerst der rechten Maustaste auf die TileGameResources Gruppe, klicken Sie auf „\ Vorhandene Dateien hinzufügen ...“ und fügen Sie die neue TileMap.tmx Datei, die Sie für Ihr Projekt gerade erstellt haben.
Als nächstes wollen wir Retina Display-Unterstützung deaktivieren, weil wir keine Retina Größe der Technik aufweisen.
Nehmen Sie die folgenden Änderungen an AppDelegate.m:
Aufmachen HelloWorldLayer.h, und ersetzen Sie den Inhalt mit dem folgenden:
Ersetzen Sie den Inhalt der HelloWorldLayer.m mit den folgenden:
Hier machen wir einen Aufruf an die CCTMXTiledMap Datei, das ihn anweist, eine Karte aus der Map-Datei erstellen wir mit Fliesen erstellt.
Einige schnelle Hintergrund auf CCTMXTiledMap. Es ist ein CCNode, so dass man seine Position gesetzt, Maßstab usw. Die Kinder des Knotens der Schichten der Karte sind, und es gibt eine Hilfsfunktion, in dem Sie die oben namentlich aussehen können - was wir hier tun, um den Hintergrund zu erhalten. Jede Schicht ist eine Unterklasse von CCSpriteSheet aus Performance-Gründen - aber das bedeutet auch, dass Sie nur eine tileset pro Schicht haben können.
Also alles, was wir hier tun, ist eine Referenz auf die Fliese Karte speichern und die Hintergrundebene, dann fügen Sie die Fliese Karte, um die Hello World-Schicht.
Und das ist es! Kompilieren und den Code ausführen, und Sie sollen die untere linke Ecke der Karte sehen:
Nicht schlecht! Aber dafür, ein Spiel zu sein, müssen wir drei Dinge: a) ein Spieler, b) ein Ausgangspunkt, um die Spieler zu setzen, und c) unsere Ansicht zu bewegen, so dass wir auf dem Spieler suchen.
Und das ist, wo es schwierig wird. Also lassen Sie uns diese nächste angehen!
Fliesen- Objektebene und Einstellen Tile Map Position
Fliesen- unterstützt zwei Arten von Schichten - Fliesenleger (das ist das, was wir mit bisher gearbeitet haben) und Objektebene.
Objektebene können Sie Kästen um Teile der Karten ziehen Bereiche angeben, wo Dinge passieren könnten. Zum Beispiel könnten Sie einen Bereich machen, wo Monster spawnen, oder einen Bereich, der tödlich zu geben. In unserem Fall werden wir einen Bereich für unseren „Spawn-Punkt“ für unsere Spieler erstellen.
Also gehen Sie in der Menüleiste in Fliesen- und wählen Sie „Layer \ Object Layer hinzufügen ...“, benennen Sie die Ebene „Objekte“, und klicken Sie auf OK. ein Objekt, wählen Sie das Insert Rechteck (R) Element aus der Symbolleiste einzufügen. Ihre aktuelle Schicht wird in der linken unteren Ecke des Bildschirms angezeigt.
Wenn Sie auf der Karte zu zeichnen, werden Sie feststellen, es nicht eine Kachel nicht zeichnen, sondern zieht sie ein Rechteck, das Sie erweitern können mehrere Fliesen oder bewegen zu decken. In der neuesten Version von gekachelten können Sie auch andere Arten von Objektformen zeichnen.
Wir wollen nur eine Kachel wählen, für die Spieler in starten. So wählen irgendwo auf Ihrer Karte und die Kachel klicken. Die Größe der Box ist nicht wirklich wichtig, da wir nur die x verwenden, y-Koordinaten.
Klicken Sie dann rechts das graue Objekt, das Sie gerade hinzugefügt haben, und klicken Sie auf „Objekteigenschaften“. Geben Sie ihm einen Namen „Spawnpoint“ und klicken Sie auf OK:
Angeblich soll, können Sie Lust hier und stellen Sie die Art des Objekts zu einem Cocos2D Klassennamen erhalten, und es wird ein Objekt dieser Art für Sie (wie CCSprite) erstellen, aber ich konnte nicht finden, wo es war, dass in der Quelle zu tun Code. Update: Tyler von GeekAndDad.com wies darauf hin, dass der Code in einer früheren Version von Cocos2D verwendet werden sollte, wurde aber mit ihm auf Fragen vor einiger Zeit entfernt fällig.
Wie auch immer - wir werden nur die Art leer, verlassen, die eine NSMutableDictionary für uns schaffen wird, wo wir die verschiedenen Aspekte des Objekts zugreifen können, einschließlich der x, y-Koordinaten.
Speichern Sie die Karte und gehen Sie zurück zu Xcode. Nehmen Sie die folgenden Änderungen an HelloWorldLayer.m:
Ok wir für eine Sekunde zu stoppen und die wenig über die Objektschicht und Objektgruppen erklären. Zunächst ist zu beachten, dass Sie Objektebene über die objectGroupNamed Methode auf dem CCTMXTiledMap Objekt (statt layerNamed) abgerufen werden. Es gibt ein spezielles CCTMXObjectGroup Objekt.
Wir rufen dann die Methode auf dem objectNamed CCTMXObjectGroup eine NSMutableDictionary zu erhalten eine Reihe von nützlichen Informationen über das Objekt enthält, einschließlich der X- und Y-Koordinaten, die Breite und Höhe. In diesem Fall werden alle wir kümmern uns um die x, y-Koordinaten, so dass wir ziehen diese aus und eingestellt, dass, wenn die Position unserer Spieler Sprite.
Am Ende wollen wir den Blick auf auf dem Schwerpunkt auf, wo der Spieler ist. So, jetzt die folgende neue Methode HelloWorldLayer.m hinzufügen (irgendwo in der Datei jetzt gut ist in Objective-C):
Ok, lassen Sie uns dies auch ein wenig erklären. Stellen Sie sich vor dieser Funktion das Zentrum einer Kamera setzt. Wir ermöglichen es dem Benutzer in jeder x passieren, y hier in der Karte koordinieren - aber wenn man darüber nachdenkt, gibt es einige Punkte, die wir wollen nicht in der Lage sein, zeigen - zum Beispiel erweitern wir nicht auf dem Bildschirm wollen über die Ränder der Karte (wo es nur Leerzeichen sein!)
Nehmen wir zum Beispiel einen Blick auf dieses Diagramm:
Sehen Sie, wie wenn das Zentrum der Kamera kleiner als winSize.width / 2 oder winSize.height / 2, Teil der Ansicht aus dem Bildschirm sein würde? Ebenso müssen wir auch die oberen Grenzen überprüfen, und das ist genau das waht wir hier tun.
Nun, so weit wir haben diese Funktion wurde die Behandlung, als ob es in der Mitte, wo eine Kamera Einstellung gesucht. Aber ... das ist nicht genau das, was wir tun. Es gibt einen Weg in Cocos2D die Kamera eines CCNode zu manipulieren, aber das verwenden, kann die Dinge schwieriger zu machen, als die Lösung, die wir verwenden werden: Statt die gesamte Ebene zu bewegen.
Werfen Sie einen Blick auf dieses Diagramm:
Stellen Sie sich eine große Welt, und wir suchen bei den Koordinaten von 0 bis winSize.height / Breite. Das Zentrum unserer Sicht ist centerOfView, und wir wissen, wo wir das Zentrum sein (actual) wollen. So dass die tatsächliche Lage zu bekommen, um das Zentrum der Ansicht übereinstimmen, alles, was wir tun, ist die Karte nach unten rutschen zu entsprechen!
Dies wird durch Subtrahieren der Ist-Position von der Mitte aus gesehen erreicht, und dann in dieser Position die Hello World Schicht einzustellen.
Puh! Genug der Theorie - läßt es sich in Aktion sehen! Kompilieren und Ausführen des Projekts, und wenn alles gut geht, sollten Sie Ihre Ninja in der Szene sehen, die mit der Ansicht ihm seine Sachen stolzieren zu zeigen, bewegt!
Making the Ninja verschieben
Wir sind für einen guten Start, aber unsere ninja gerade sitzt da! Und das ist nicht sehr ninja-like.
Lassen Sie uns die ninja bewegen einfach machen, indem er in die Richtung bewegt, der Benutzer tippt. Fügen Sie den folgenden Code zu HelloWorldLayer.m:
Zuerst stellen wir unsere Schicht als Touch in der init-Methode aktiviert. Dann überschreiben wir die registerWithTouchDispatcher Methode selbst zu registrieren, um targed Touch-Ereignisse zu behandeln. Dies führt in ccTouchBegan / ccTouchEnded Methoden (singulärer Fall) bezeichnet werden, anstelle von ccTouchesBegan / ccTouchesEnded Methoden (plural Fall).
- „Sie müssen nicht mit NSSets beschäftigen, hat der Disponent die Aufgabe, sie zu spalten. Sie erhalten genau einen UITouch pro Anruf.“
- „Sie können * Anspruch * a UITouch von JA in ccTouchBegan zurück. Updates der beanspruchten berührt werden nur an den Delegierten (n) gesendet, die sie beansprucht wird. Also, wenn Sie einen Zug / beendet / abgebrochen Update erhalten sind Sie sicher, dass es deine Berührung. Dies befreit Sie von vielen Kontrollen zu tun, wenn Multi-Touch zu tun.“
Wie auch immer, in unserer ccTouchEnded Lage, wandeln wir die Ortskoordinaten zu betrachten und dann zu GL wie gewohnt koordiniert. Was neu ist, ist, dass wir [self convertToNodeSpace: touchLocation] nennen.
Dies liegt daran, die Berührungsstelle wird uns Koordinaten in dem der Benutzer innerhalb des Ansichtsfenster geklopft (zB 100.100). Aber wir könnten ein gutes Stück der Karte geblättert haben, so dass es tatsächlich paßt bis zu (800.800) zum Beispiel. So Aufruf dieser Methode gleicht die Berührung auf, wie wir die Schicht bewegt haben.
Wir passen die Spielerposition entsprechend, und dann die Sicht Zentrum der Spieler Position zu sein, die wir bereits im letzten Abschnitt geschrieben!
So kompilieren und das Projekt ausführen und probieren Sie es aus! Sie sollten nun in der Lage sein, um den Bildschirm tippen Sie auf den Ninja zu bewegen.
Wo von hier aus?
Das ist alles für diesen Teil des Tutorials. An diesem Punkt sollten Sie die Grundlagen kennen Karten erstellen und sie in Ihrem Spiel zu importieren.
Hier ist ein Beispielprojekt mit dem Code, den wir bisher entwickelt haben.
Check Next aus Teil 2 des Tutorials. wo wir zeigen, wie Kollisionserkennung in die Karte hinzuzufügen, unsere ninja von glücklich zu Fuß durch die Wände zu verhindern!
