Natürlich wird der grafische Bereich nicht von einem Tag auf den anderen erstellt, und die Menge an Ressourcen, die wir dafür benötigen, kann hoch sein. Allerdings können wir mit den grundlegendsten Ressourcen beginnen, um zu verstehen, wie ein Videospiel funktioniert.
Zum Glück ist Cocos2d-JS ein tadelloser Umgang mit Ressourcen oder grafischen Assets, der uns einige Methoden und Engines zur Verfügung stellt, mit denen wir unser Leben leichter machen und uns nur darum sorgen, dass unser Spiel optimal aussieht für unsere zukünftigen Nutzer möglich.
Anforderungen
– Para este tutorial tenemos dos tipos de requerimientos, los técnicos y los de aplicación, entre los técnicos necesitamos en primer lugar haber descargado Cocos2d-JS desde su página oficial y por supuesto tenerlo disponible en nuestro sistema. 1 – Für dieses Tutorial gibt es zwei Arten von Anforderungen: die Techniker und die Anwendungstechniker. Unter den Technikern müssen wir zuerst Cocos2d-JS von der offiziellen Website herunterladen und es natürlich in unserem System verfügbar machen.
– Requerimos un servidor web estilo Apache , ya que el framework no va a cargar directamente si hacemos el llamado desde el navegador por motivos de seguridad ya que se ejecutan muchas peticiones. 2 – Wir benötigen einen Webserver im Apache- Stil, da das Framework aus Sicherheitsgründen nicht direkt geladen wird, wenn der Aufruf vom Browser aus erfolgt, da viele Anforderungen ausgeführt werden.
– En el aspecto aplicación, necesitamos haber cumplido o por lo menos leer el tutorial de los primeros pasos con Cocos2d-JS que se publicó en una ocasión para poder construir la plantilla base del juego, ya que el código que ofreceremos en el tutorial tiene como pre requisito que tengamos una plantilla base. 3 – Im Hinblick auf die Anwendung müssen wir das Tutorial der ersten Schritte mit Cocos2d-JS , das bei einer Gelegenheit veröffentlicht wurde, erfüllt oder zumindest gelesen haben, um in der Lage zu sein, das Basis-Template des Spiels zu erstellen, da der Code, den wir im Tutorial anbieten werden, hat Voraussetzung ist, dass wir eine Basisvorlage haben.
– Por último debemos tener acceso a Internet para poder descargar las imágenes que deseemos para cumplir con los objetivos de los ejemplos. 4 – Schließlich müssen wir über einen Internetzugang verfügen, um die Bilder herunterladen zu können, die den Zielen der Beispiele entsprechen sollen.
Vorbereitung unserer Bewerbung
Als Erstes müssen wir uns darauf vorbereiten, wo wir die Grafikressourcen erhalten. In unserer Datei project.json müssen wir angeben, dass wir eine neue JavaScript- Datei mit dem Namen cargaassets.js benötigen , die die Kontrolle übernimmt von allen Bildern, die wir in unserem Spiel verwenden werden. Der Code unserer project.json- Datei sollte folgendermaßen aussehen:
{ "debugMode": 0, "showFPS": false, "frameRate": 60, "id": "gameCanvas", "renderMode": 0, "engineDir": "cocos2d-html5 /", "modules": ["cocos2d"], "jsList": [ "src / cargaassets.js" "src / gamescript.js" ] }
Wir sehen dann, dass dies zu einem neuen Bedarf führt. Wir müssen jetzt die Datei cargaassets.js erstellen. Diese Datei ist sehr wichtig, denn wenn unsere Konfigurationsdatei sie enthält, wird sie alles richtig handhaben, was wir brauchen. Es sollte gehen Im src- Ordner legen wir alles ab, was mit der Logik unseres Spiels zu tun hat und einen Code wie den folgenden haben muss:
var gameResources = [ "assets / target.png" ];
Wenn wir uns den Code ansehen, den wir sagen, dass wir aus einem Ordner namens ” assets” eine Datei namens ” mario.png” laden müssen , wird diese Datei ein Bild sein, das wir in unser Spiel integrieren wollen, mit dem Namen, den wir nur wollen, dass es mit der Datei übereinstimmen muss, z Verweisen Sie auf das ausgewählte Bild, das 128 x 128 Pixel misst, wodurch es klein und einfach zu handhaben ist.
Jetzt müssen wir noch zwei Schritte ausführen , um unser Spiel zu starten. Erstens müssen wir in der Datei main.js , die wir aus unserem Beispiel des vorherigen Tutorials haben müssen, angeben, dass ein Vorladen der Ressource durchgeführt werden muss. Dazu verwenden wir die Vorlademethode der LoaderScene- Klasse, so dass unser Code wie folgt aussieht:
cc.game.onStart = function () { cc.view.setDesignResolutionSize (320, 480, cc.ResolutionPolicy.SHOW_ALL); cc.LoaderScene.preload (gameResources, function () { cc.director.runScene (neues gameScene ()); }, this); }; cc.game.run ();
Wir sehen dann, wie innerhalb des Rückrufs des Preloaders, dass wir den wahren Ruf der Szene machen, die wir im Moment zeigen werden. Der zweite Schritt, damit unser Spiel funktioniert, ist, dass wir jetzt alle erforderlichen Ressourcen in unser Dateiskript einfügen müssen, um das Bild anzuzeigen. Dazu müssen wir den folgenden Code verwenden:
var gameScene = cc.Scene.extend ({ onEnter: function () { this._super (); var gameLayer = neues Spiel (); gameLayer.init (); this.addChild (gameLayer); } }); var game = cc.Layer.extend ({ init: function () { this._super (); var target = cc.Sprite.create ("assets / target.png"); this.addChild (target, 0); } });
Hier erstellen wir eine neue Szene unseres Spiels, in der wir eine Ebene erstellen, die unsere Ressourcen enthält, und dafür müssen wir diese Ebene im unteren Teil erstellen. Dies wird erreicht, indem wir ein Objekt namens Spiel erstellen, in dem wir angeben, dass dies erforderlich ist Laden und erstellen Sie das Sprite mit dem Bild, das wir in unser Projekt heruntergeladen haben.
Sobald wir den gesamten Vorgang abgeschlossen haben, können wir unser Spiel im Browser starten und den Pfad unseres Servers eingeben, auf dem wir unser Projekt speichern. Je nach ausgewähltem Bild sehen wir etwas Ähnliches:
Wir sehen, wie schüchtern unser Bild am Ende des Bildschirms erscheint. Dies ist eine sehr wichtige erste Errungenschaft, die wir erreicht haben. Obwohl wir eine gute Errungenschaft sind, können wir uns damit nicht zufrieden geben. Deshalb müssen wir jetzt unser Bild von besser positionieren Weg Dafür verwenden wir die setPosition- Methode, wie wir im folgenden Code sehen:
target.setPosition (160, 240);
Uns ist aufgefallen, dass wir einige Koordinaten übergeben haben, die unser Bild an einer Stelle auf dem Bildschirm positionieren sollen. Wir müssen diese Zeile in unserer gamescript.js- Datei in dem von uns erstellten Spielobjekt platzieren, wobei der Code am Ende so aussehen sollte:
var gameScene = cc.Scene.extend ({ onEnter: function () { this._super (); var gameLayer = neues Spiel (); gameLayer.init (); this.addChild (gameLayer); } }); var game = cc.Layer.extend ({ init: function () { this._super (); var target = cc.Sprite.create ("assets / target.png"); this.addChild (target, 0); target.setPosition (160, 240); } });
Anschließend aktualisieren wir unseren Browser, um die vorgenommenen Änderungen zu sehen:
Wie wir sehen können, wird unser Bild vollständig auf dem Bildschirm unseres Spiels angezeigt.
Entfernen Sie das Bild
Da wir wissen, wie man ein Bild hinzufügt, ist es an der Zeit zu lernen, wie man es entfernt. Dazu unterstützen wir die removeChild- Methode und entfernen den untergeordneten Knoten, der das Bild enthält. Wir werden jedoch nicht nur diese Aktion ausführen, sondern auch die Hintergrundfarbe ändern Dadurch erzielen wir einen zusätzlichen Effekt und verwenden andere Techniken unseres Frameworks.
Um dieses neue Ziel zu erreichen, müssen wir erneut in der Datei gamescript.js arbeiten , da dies sehr wichtig ist und der Code, den wir darin haben sollten, der folgende sein sollte:
var gameScene = cc.Scene.extend ({ onEnter: function () { this._super (); var gameLayer = neues Spiel (); gameLayer.init (); this.addChild (gameLayer); } }); var Mantel; var game = cc.Layer.extend ({ init: function () { this._super (); layerFund = cc.LayerColor.create (neue Farbe (40, 40, 40, 555), 320, 480); this.addChild (Hintergrundebene); var target = cc.Sprite.create ("assets / target.png"); capaFondo.addChild (Ziel, 0); target.setPosition (160, 240); setTimeout (function () { capaFondo.removeChild (Ziel); }, 3000); } });
Diese Änderung ist ein bisschen komplexer, aber lassen Sie uns erklären, was getan wurde. Wir beginnen mit der Definition einer Variablen namens fondoFondo und ihr Name lässt uns bereits verstehen, was sie bedeutet. Sie ist das Kontrollobjekt des Hintergrundbilds. Wir erstellen eine neue Farbe innerhalb des Spielobjekts und fügen sie schließlich unserem Bild hinzu.
Am Ende unseres Objekts erstellen wir eine Funktion namens setTimeout . Sie ruft die zu Beginn erwähnte removeChild- Methode auf. Dort haben wir unser Zielobjekt übergeben , das das Bild für die Assets oder Ressourcen enthält. Außerdem haben wir einen zweiten Parameter übergeben Bei einer Zahl von 3000 , die 3 Sekunden lang in Millisekunden angegeben ist, werden wir beim erneuten Starten des Spiels feststellen, dass der Hintergrund des Spiels anders ist und dass das Bild nach 3 Sekunden vom Bildschirm verschwindet. Mal sehen, wie das aussieht:
Auf der linken Seite sehen wir den Anfangszustand unseres Spiels, dann auf der rechten Seite, wie es nach Ablauf von 3 Sekunden ist, wo wir sehen, dass das Bild nicht da ist, aber unser Hintergrund der gleiche bleibt und damit das andere Ziel des Tutorials erfüllen, das zu entfernen war bilder.
Nachdem wir dieses Tutorial beendet haben, können wir bereits zwei sehr wichtige Aktionen ausführen, Bilder unseres Spiels hinzufügen und entfernen. Damit können wir eine grafische Basis aufbauen, die das Gameplay unserer Anwendung begleitet. Natürlich müssen die Bilder einen hohen Qualitätsstandard haben und für Videospiele konzipiert sein, aber wenn wir gerade erst anfangen, sollten wir uns darüber keine Gedanken machen, wir müssen nur üben und verstehen, wie unsere Logik funktionieren soll, sobald wir erreichen, dass die Verschönerung des Spiels ein Erfolg wird Ich arbeite viel einfacher.