Erste Schritte mit Cocos2d-JS

Videospiele sind derzeit einer der wichtigsten Bestandteile der digitalen Wirtschaft, jedes Jahr werden Milliarden von Dollar in Design, Entwicklung und Wartung von Videospielen investiert und gleichzeitig kommt ein größerer Betrag an die Menschen, die diese Art konsumieren von Inhalten.
Es ist sehr einfach zu glauben, dass Videospiele nur für Kinder oder für Menschen gedacht sind, die in dieser Welt sind, aber die Realität sieht anders aus, nicht alle Spiele sind Kinder und nicht alle Menschen müssen Fans sein, um ein gutes Spiel zu genießen, es gibt Tausende von Fällen, aber zwei Beispiele können sein Candy Crush und das Sims, die erste war eine Revolution im Bereich der Spiele in sozialen und mobilen Netzwerken, die täglich viel Geld generierte, und die zweite, viel ältere, war eine Revolution bei PC-Spielen, da sie viele Menschen umfasste, die nie daran dachten, ein Interesse an Videospielen.

VERGRÖSSERN

All diese Einführung führt uns zu einem Tool, das die Erstellung von Videospielen erleichtert, so wie es ist Cocos2d-JS, das nichts anderes als ein Framework ist, das es uns ermöglicht, einfache 2-dimensionale Spiele für jede Art von Gerät zu erstellen, das unterstützt JavaScript Ja HTML5.
Dank der Tatsache, dass dieser Rahmen vollständig in JavaScript, die Nutzungsanforderungen sind nicht so schwer zu erfüllen, mal sehen, was wir für dieses Tutorial benötigen, um Projekte zu entwickeln Cocos2d-JS:
TexteditorWir brauchen ein Tool, mit dem wir den Code für unsere Anwendungen schreiben können, derzeit gibt es ein SDI Offizier was ist er? Cocos-Code-IDE es ist jedoch nur verfügbar für Fenster Ja MAC. Natürlich können wir den Editor unserer Wahl verwenden, daher ist die obige IDE der erste Vorschlag, im Fall dieses Tutorials ist der verwendete Editor Erhabener Text in Version 2, aber es ist nicht unbedingt erforderlich.
Ein WebserverAufgrund der verschiedenen Teile des Frameworks benötigen wir einen Webserver, um unsere Anwendungen zu erstellen, im Allgemeinen eine Umgebung Apache es wird uns dienen, wie es sein kann XAMPP, LAMPE oder WAMP, auch wenn wir umfangreiche Kenntnisse in der Serverkonfiguration haben, können wir einen Server wie Nginx um unsere Inhalte bereitzustellen, ist jedoch nicht erforderlich.
Browser mit HTML5-UnterstützungIn unserem Fall verwenden wir Firefox-Entwickler-Edition für seine Vorteile für die Webentwicklung, aber wenn wir einen bevorzugten Browser haben, können wir ihn problemlos weiter verwenden.
Das erste, was wir tun müssen, ist die notwendigen Dateien herunterzuladen, um die verfügbaren Ressourcen nutzen zu können. Dazu können wir auf die offizielle Website zugreifen und den entsprechenden Download durchführen. Zunächst müssen wir die aktuellste Version auswählen, insbesondere in unserem Fall es ist der 3.5Es können jedoch weitere Überarbeitungen herauskommen. Mal sehen, wie der Download-Bereich aussieht:

VERGRÖSSERN

Wir können sehen, dass wir andere Produkte des für das Framework verantwortlichen Unternehmens haben, wie z SDI und ein Entwicklungs-Toolkit, aber wir sind derzeit nur interessiert Cocos2d-JS, die wir an zweiter Stelle in der Produktliste sehen können. Es ist wichtig zu beachten, dass die Entladung mehr als 350 MB Wir müssen also einen Platz für diese Datei vorbereiten, aber wir sollten uns nicht erschrecken, da dieser Download eine große Menge an Material enthält, sodass die eigentliche Engine nicht so schwer ist.
Sobald wir das Framework auf unserem Computer haben, müssen wir die Datei entpacken und in den Ordner Rahmen Wir werden den Ordner suchen cocos2d-html5 und wir werden es in das Verzeichnis kopieren, in dem wir unser Projekt starten werden, das in diesem Fall aufgerufen wird erstes Spiel, sollte es zunächst so aussehen:

Dann müssen wir in unserem Projekt einen Ordner namens . erstellen src und drei zusätzliche Dateien; das index.html Dies ist der Hauptcontainer unserer Anwendung und die Datei, die im Browser vom Webserver aufgerufen wird. Die Datei main.js das wird unseren ganzen Code enthalten JavaScript entsprechend der Logik unseres Spiels, und schließlich die Datei project.json die die Konfigurationsparameter enthält, damit unser Spiel korrekt funktionieren kann. Sehen wir uns an, wie unsere endgültige Struktur aussehen sollte:

Sobald wir unser anfängliches Setup haben, ist es an der Zeit, unser Spiel zu erstellen. Natürlich ist ein Spiel komplex und das, was wir erstellen, wird eine sehr grundlegende Funktionalität haben, indem wir nur eine Nachricht auf dem Bildschirm anzeigen die Spiele auf dem Markt, aber es ist ein Anfang zu sehen, wie die Dinge im Rahmen funktionieren.
In unserem Archiv index.html wir müssen die Bibliothek einbeziehen CCBoot von Cocos2d-JS, wir müssen auch unsere Datei einschließen main.js, und schließlich in unserem Karosserie Wir müssen ein Etikett hinzufügen Segeltuch die für den Empfang der Informationen des von uns erstellten Beispiels verantwortlich ist, sehen wir uns an, wie der Quellcode unseres Beispiels aussieht:

 Unser erstes Spiel 

Da wir jetzt den ersten Schritt getan haben, werden wir zur Datei wechseln main.jsDiese Datei trägt nicht in der Regel harte Spiellogik, deren Funktionalität die meiste Zeit ist als Konfigurationsdatei zu dienen einige Parameter an den Motor, um anzuzeigen, und wir im Rahmen des Projektes wird Platz in sie in der Lage sind, die wahre Logik zu sein, die folgender Code:

 cc.game.onStart = function () {cc.view.setDesignResolutionSize (320, 480, cc.ResolutionPolicy.SHOW_ALL); cc.director.runScene (neue gameScene()); }; cc.game.run();

Hier haben wir einfach definiert, was passieren wird, wenn das Spiel startet, die beiden Zeilen innerhalb der Hauptfunktion geben die Auflösung und die Szene an, die es starten soll, und schließlich geben wir in der letzten Zeile an, dass das Spiel gestartet werden soll. Der Code erscheint am Anfang etwas kompliziert, aber nach und nach werden wir verstehen und damit wird die Komplexität abnehmen.
Jetzt werden wir unser Projekt konfigurieren, dafür werden wir die Datei ändern project.json, in dem wir die Engine, die Anzahl der Frames pro Sekunde des Spiels, die sein Container ist, und die Liste der Dateien, die die Logik unseres Spiels enthalten, definieren werden, werden wir im nächsten Schritt sehen. Sehen wir uns zunächst an, was wir zunächst in die Datei einfügen werden:

 {"debugMode": 0, "showFPS": false, "frameRate": 60, "id": "gameCanvas", "renderMode": 0, "engineDir": "cocos2d-html5 /", "modules": [" cocos2d "]," jsList ": [" src / gamescript.js "]}

Es ist sehr wichtig, dass der Inhalt dieser Datei a JSON gültig, da sonst unsere Anwendung nicht startet.
Sobald dies erledigt ist, ist es an der Zeit, die Logik für unser erstes Beispiel einzubauen, dafür gehen wir in den Ordner src unseres Projekts, wo wir die Datei erstellen werden gamescript.js, wenn wir Beobachter sind, werden wir erkennen, dass dies die Datei ist, die wir im project.json und wir beginnen zu sehen, wie die Teile zusammenpassen.
In dieser neuen Datei werden wir die Szene unseres Spiels erstellen, damit werden wir es starten, natürlich haben wir keine Grafik zu zeigen, also werden wir einfach etwas auf die Konsole drucken JavaScript, sehen wir uns den Code an, den wir einschließen müssen:

 var gameScene = cc.Scene.extend ({onEnter: function () {this._super (); console.log ("Unser Spiel macht keinen Spaß, aber es funktioniert =)"); }});

Nun, da alles an seinem Platz ist, müssen wir unseren Projektordner aus dem Browser aufrufen und die Entwicklerkonsole oder ein Add-On öffnen, mit dem wir die Konsole sehen können JavaScript um das Ergebnis all unserer Arbeit zu sehen:

VERGRÖSSERN

Wie wir sehen, war unser erster Versuch erfolgreich, wir haben bereits eine definierte Basis, an der wir arbeiten können, und wir haben die ersten Schritte mit diesem Framework gemacht.
Warum 2D-Spiele machen?Abgesehen davon fragen sich viele vielleicht, was der Vorteil ist, heute ein Spiel in zwei Dimensionen zu machen, und die Antwort ist sehr einfach: weil sie Spaß machen und es uns ermöglichen, die Möglichkeit zu nutzen, Spiele in Umgebungen mit geringer Leistung zu erstellen , die uns einer großen Masse potenzieller Spieler näher bringen kann, die keine Konsole haben, aber mit den richtigen Worten und Taten unser Spiel kaufen können oder ob es ein kostenloses Modell ist, um Teil unserer Community zu werden.
Damit haben wir dieses Tutorial beendet und können sagen, dass die Generierung von spielerischen Inhalten heute einer der Bereiche mit dem größten Wachstum und Wettbewerb ist, der insbesondere auf mobilen Geräten noch weiter wachsen wird und es wird erwartet, dass eine große von Videospielen wie Nintendo wird sich auf diesen Plattformen versuchen, wenn wir also an einem Stück dieses Kuchens interessiert sind, Tools wie Cocos2d-JS Sie werden uns helfen, leichter in den Markt einzutreten.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben