Første trin med Cocos2d-JS

Videospil er i øjeblikket en af ​​de vigtigste komponenter i den digitale økonomi, hvert år investeres milliarder af dollars i design, udvikling og vedligeholdelse af videospil, og samtidig modtages et større beløb af de mennesker, der bruger denne type af indhold.
Det er meget enkelt at tro, at videospil kun er til børn eller til mennesker, der er i den verden, men virkeligheden er en anden, ikke alle spil er børns, og ikke alle mennesker skal være fans for at nyde et godt spil, der er tusinder af sager, men to eksempler kan være Slik ødelæggelse og Sims, den første var en revolution inden for spil på sociale og mobile netværk, der genererede mange penge dagligt, og den anden, meget ældre, var en revolution i pc -spil, da det omfattede mange mennesker, der aldrig havde tænkt på at tage en interesse for videospil.

FORSTØRRE

Hele denne introduktion fører os til et værktøj, der letter oprettelsen af ​​videospil, som det er Cocos2d-JS, som ikke er mere end en ramme, der giver os mulighed for at oprette enkle 2-dimensionelle spil til enhver type enhed, der understøtter JavaScript Y HTML5.
Takket være det faktum, at denne ramme er lavet helt i JavaScript, brugskravene er ikke så svære at opfylde, lad os se, hvad vi har brug for for denne vejledning at udvikle projekter med Cocos2d-JS:
Tekst editorVi har brug for et værktøj, der giver os mulighed for at skrive koden til vores applikationer, i øjeblikket er der en SDI officer hvad er han Cocos Code IDE men det er kun tilgængeligt for Windows Y MAC. Selvfølgelig kan vi bruge editoren til vores præference, så ovenstående IDE er det første forslag, i tilfælde af denne vejledning er editoren brugt Sublim tekst i version 2, men det er ikke vigtigt.
En webserverPå grund af de forskellige dele af rammen har vi brug for en webserver til at bygge vores applikationer, generelt et miljø Apache det vil tjene os, som det kan være XAMPP, LAMPE eller WAMP, selvom vi har omfattende viden om serverkonfiguration, kan vi bruge en server som Nginx for at betjene vores indhold, men det er ikke påkrævet.
Browser med HTML5 -understøttelseI vores tilfælde vil vi bruge Firefox Developer Edition for dens fordele for webudvikling, men hvis vi har en foretrukken browser, kan vi fortsætte med at bruge den uden problemer.
Den første ting, vi skal gøre, er at downloade de nødvendige filer for at kunne bruge de ressourcer, der er til rådighed, for dette kan vi få adgang til det officielle websted og foretage den tilsvarende download, i første omgang skal vi vælge den mest aktuelle version, især i vores tilfælde det er 3.5Der kan dog komme flere revisioner. Lad os se, hvordan downloadområdet ser ud:

FORSTØRRE

Vi kan se, at vi har andre produkter fra virksomheden, der står for rammen, f.eks SDI og et udviklingsværktøjskit, men vi er kun interesserede i øjeblikket Cocos2d-JS, som vi kan se andet på listen over produkter. Det er vigtigt at bemærke, at udledningen er mere end 350 MB så vi skal forberede en plads til denne fil, men vi skal ikke være bange, da denne download indeholder en stor mængde materiale, så den rigtige motor ikke er så tung.
Når vi har rammerne på vores computer, skal vi pakke filen ud og ind i mappen rammer vi skal finde mappen cocos2d-html5 og vi skal kopiere det til det bibliotek, hvor vi skal starte vores projekt, som i dette tilfælde vil blive kaldt første spil, det skal i første omgang se sådan ud:

Så inden for vores projekt skal vi oprette en mappe kaldet src og tre yderligere filer; det index.html som er hovedbeholderen i vores applikation og er den fil, der vil blive kaldt i browseren fra webserveren. Filen main.js der vil indeholde al vores kode JavaScript svarende til logikken i vores spil, og endelig filen projekt.json der vil indeholde konfigurationsparametrene, så vores spil kan fungere korrekt. Lad os se, hvordan vores endelige struktur skal se ud:

Når vi har vores første opsætning, er det tid til at oprette vores spil, selvfølgelig er et spil komplekst, og det, vi vil oprette, vil have en meget grundlæggende funktionalitet, bare ved at vise os en besked på skærmen, det er ikke noget, der konkurrerer med spillene på markedet, men det er en start på at se, hvordan tingene fungerer inden for rammerne.
I vores arkiv index.html vi skal inkludere biblioteket CCBoot af Cocos2d-JS, skal vi også inkludere vores fil main.js, og endelig inden for vores legeme vi skal inkludere en etiket lærred som er ansvarlig for at modtage oplysningerne i det eksempel, vi skaber, lad os se, hvordan kildekoden i vores eksempel ser ud:

 Vores første spil 

Da vi har gjort det første trin nu, flytter vi til filen main.js, denne fil bærer normalt ikke logik med hård spil, dens funktionalitet er oftest at fungere som en konfigurationsfil for at angive nogle parametre for motoren og for at kunne inkludere den sande logik i projektet, i den vil vi placere den følgende kode:

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

Her har vi simpelthen defineret, hvad der skal ske, når spillet starter, de to linjer inde i hovedfunktionen er at angive opløsningen og scenen, at det skal starte, og endelig i den sidste linje angiver vi, at det skal starte spillet. Koden virker lidt kompliceret i begyndelsen, men lidt efter lidt vil vi forstå, og med den vil kompleksiteten falde.
Nu skal vi konfigurere vores projekt, til dette skal vi ændre filen projekt.json, hvor vi skal definere motoren, antallet af billeder pr. sekund af spillet, som er dets beholder, og listen over filer, der indeholder vores spils logik, vil vi se sidstnævnte i det næste trin. Lad os nu se, hvad vi oprindeligt vil placere i filen:

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

Det er meget vigtigt, at indholdet i denne fil er en JSON gyldig, da vores ansøgning ellers ikke starter.
Når dette er gjort, er det tid til at inkorporere logikken for vores første eksempel, for dette går vi til mappen src af vores projekt, hvor vi skal oprette filen gamescript.js, hvis vi er observatører, vil vi indse, at dette er den fil, som vi definerer i projekt.json og vi begynder at se, hvordan brikkerne begynder at passe sammen.
Inden for denne nye fil skal vi oprette scenen i vores spil, med dette starter vi det, selvfølgelig har vi ikke noget grafisk at vise, så vi skal simpelthen udskrive noget på konsollen JavaScript, lad os se koden, som vi skal inkludere:

 var gameScene = cc.Scene.extend ({onEnter: function () {this._super (); console.log ("Vores spil er ikke sjovt, men det fungerer =)"); }});

Nu hvor alt er på plads, skal vi kalde vores projektmappe fra browseren og åbne udviklerkonsollen eller en tilføjelse, der giver os mulighed for at se konsollen JavaScript for at se resultatet af alt vores arbejde:

FORSTØRRE

Som vi kan se, har vores første forsøg været vellykket, vi har allerede et defineret grundlag at arbejde på, og vi har taget vores første skridt med denne ramme.
Hvorfor lave 2D -spil?På en separat note kan mange måske undre sig over, hvad der er fordelen ved at lave et spil i 2 dimensioner i dag, og svaret er meget enkelt: fordi de er sjove, og de giver os mulighed for at udnytte muligheden for at lave spil i miljøer med lav ydeevne , som kan bringe os tættere på en stor masse potentielle spillere, der ikke har en konsol, men som med de rigtige ord og handlinger kan købe vores spil, eller hvis det er en gratis model at være en del af vores fællesskab.
Hermed er vi færdige med denne vejledning, og vi kan sige, at generation af legende indhold er et af de områder med den største vækst og konkurrence i dag, som stadig forventes at fortsætte med at vokse især på mobile enheder, og det er sådan en forventning om, at en stor af videospil som Nintendo kommer til at dabbe i disse platforme, så hvis vi er interesseret i et stykke af denne kage, kan værktøjer som f.eks Cocos2d-JS De vil hjælpe os med at komme ind på markedet på en lettere måde.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt