Första steget med Cocos2d-JS

Videospel är för närvarande en av de viktigaste komponenterna i den digitala ekonomin, varje år investeras miljarder dollar i design, utveckling och underhåll av videospel, och samtidigt mottas ett större belopp av de människor som konsumerar denna typ av innehåll.
Det är väldigt enkelt att tro att tv -spel bara är för barn eller för människor som är i den världen, men verkligheten är annorlunda, inte alla spel är barns, och inte alla människor måste vara fans för att njuta av ett bra spel, det finns tusentals av fall men två exempel kan vara Godis kross och den Sims, den första var en revolution inom området spel på sociala och mobila nätverk, som genererade mycket pengar dagligen, och den andra, mycket äldre, var en revolution inom PC -spel eftersom det inkluderade många människor som aldrig tänkt på att ta en intresse för videospel.

FÖRSTORA

All denna introduktion leder oss till ett verktyg som underlättar skapandet av videospel, som det är Cocos2d-JS, vilket inte är annat än ett ramverk som gör att vi kan skapa enkla tvådimensionella spel för alla typer av enheter som stöder JavaScript Y HTML5.
Tack vare det faktum att denna ram är helt gjord i JavaScript, användningskraven är inte så svåra att uppfylla, låt oss se vad vi behöver för att denna handledning ska utvecklas projekt med Cocos2d-JS:
TextredigerareVi behöver ett verktyg som gör att vi kan skriva koden för våra applikationer, för närvarande finns det en SDI officer vad är han Cocos Code IDE men det är bara tillgängligt för Windows Y MAC. Naturligtvis kan vi använda redigeraren för våra preferenser så ovanstående IDE är det första förslaget, i fallet med denna handledning är redaktören som används Sublim text i version 2, men det är inte nödvändigt.
En webbserverPå grund av de olika delarna av ramverket behöver vi en webbserver för att bygga våra applikationer, vanligtvis en miljö Apache det kommer att tjäna oss som det kan vara XAMPP, LAMPA eller WAMP, även om vi har omfattande kunskap om serverkonfiguration, kan vi använda en server som Nginx för att visa vårt innehåll, men det krävs inte.
Webbläsare med HTML5 -stödI vårt fall kommer vi att använda Firefox Developer Edition för dess fördelar för webbutveckling, men om vi har en föredragen webbläsare kan vi fortsätta använda den utan problem.
Det första vi måste göra är att ladda ner de nödvändiga filerna för att kunna använda de tillgängliga resurserna, för detta kan vi komma åt den officiella webbplatsen och göra motsvarande nedladdning, först måste vi välja den senaste versionen, särskilt i vårt fall det är 3.5Fler revideringar kan dock komma ut. Låt oss se hur nedladdningsområdet ser ut:

FÖRSTORA

Vi kan se att vi har andra produkter från företaget som ansvarar för ramverket, till exempel SDI och ett utvecklingsverktygssats, men vi är bara intresserade för tillfället Cocos2d-JS, som vi kan se andra i listan över produkter. Det är viktigt att notera att urladdningen är mer än 350 MB så vi måste förbereda ett utrymme för den här filen men vi ska inte vara rädda eftersom den här nedladdningen innehåller en stor mängd material, så den riktiga motorn är inte så tung.
När vi har ramverket på vår dator måste vi packa upp filen och in i mappen ramar vi ska hitta mappen cocos2d-html5 och vi ska kopiera det till katalogen där vi ska starta vårt projekt, som i detta fall kommer att kallas första spelet, det bör inledningsvis se ut så här:

Sedan inom vårt projekt måste vi skapa en mapp som heter src och ytterligare tre filer; de index.html som är huvudbehållaren i vår applikation och är filen som kommer att anropas i webbläsaren från webbservern. Filen main.js som kommer att innehålla all vår kod JavaScript motsvarar logiken i vårt spel, och slutligen filen projekt.json som innehåller konfigurationsparametrarna så att vårt spel kan fungera korrekt. Låt oss se hur vår slutliga struktur ska se ut:

När vi väl har vår första inställning är det dags att skapa vårt spel, naturligtvis är ett spel komplext och det vi kommer att ha kommer att ha en mycket grundläggande funktionalitet bara genom att visa oss ett meddelande på skärmen, det är inte något som tävlar med spelen på marknaden men det är en början för att se hur saker fungerar i ramarna.
I vårt arkiv index.html vi måste inkludera biblioteket CCBoot av Cocos2d-JS, måste vi också inkludera vår fil main.js, och slutligen inom vår kropp vi måste inkludera en etikett duk som är ansvarig för att ta emot informationen i exemplet vi skapar, låt oss se hur källkoden i vårt exempel ser ut:

 Vårt första spel 

Eftersom vi har gjort det första steget nu går vi till filen main.js, denna fil brukar inte ha hård spellogik, dess funktionalitet är oftast att fungera som en konfigurationsfil för att indikera några parametrar för motorn och för att kunna inkludera den sanna logiken i projektet, i den kommer vi att placera följande kod:

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

Här har vi helt enkelt definierat vad som kommer att hända när spelet startar, de två raderna i huvudfunktionen är att indikera upplösningen och scenen att det ska börja och slutligen i den sista raden anger vi att det ska starta spelet. Koden verkar lite komplicerad i början, men lite efter lite kommer vi att förstå och med det kommer komplexiteten att minska.
Nu ska vi konfigurera vårt projekt, för detta kommer vi att ändra filen projekt.json, där vi ska definiera motorn, antalet bildrutor per sekund i spelet, vilket är dess behållare, och listan över filer som innehåller logiken i vårt spel, kommer vi att se det senare i nästa steg. Låt oss nu se vad vi initialt ska placera i filen:

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

Det är mycket viktigt att innehållet i den här filen är en JSON giltig, eftersom vår ansökan annars inte startar.
När detta är gjort är det dags att införliva logiken för vårt första exempel, för detta går vi till mappen src av vårt projekt, där vi ska skapa filen gamescript.js, om vi är observatörer kommer vi att inse att detta är filen som vi definierar i projekt.json och vi börjar se hur bitarna börjar passa ihop.
Inom den här nya filen ska vi skapa scenen i vårt spel, med det här kommer vi att starta det, naturligtvis har vi inget grafiskt att visa så vi kommer helt enkelt att skriva ut något på konsolen JavaScript, låt oss se koden som vi måste inkludera:

 var gameScene = cc.Scene.extend ({onEnter: function () {this._super (); console.log ("Vårt spel är inte roligt, men det fungerar =)"); }});

Nu när allt är på plats måste vi ringa vår projektmapp från webbläsaren och öppna utvecklarkonsolen eller något tillägg som gör att vi kan se konsolen JavaScript för att se resultatet av allt vårt arbete:

FÖRSTORA

Som vi kan se har vårt första försök varit framgångsrikt, vi har redan en definierad bas att arbeta på och vi har tagit våra första steg med denna ram.
Varför göra 2D -spel?På en separat anteckning kanske många undrar vad som är fördelen med att göra ett spel i 2 dimensioner idag, och svaret är väldigt enkelt: för att de är roliga och de tillåter oss att utnyttja möjligheten att göra spel i miljöer med låg prestanda , som kan föra oss närmare en stor massa potentiella spelare som inte har en konsol men som med rätt ord och handlingar kan köpa vårt spel eller om det är en gratis modell att vara en del av vårt community.
Med detta har vi avslutat denna handledning och vi kan säga att generationen av lekfullt innehåll är ett av de områden med den största tillväxten och konkurrensen idag, som fortfarande förväntas fortsätta att växa, särskilt på mobila enheter, och det är en sådan förväntning att en stor av videospel som Nintendo kommer att dabble i dessa plattformar, så om vi är intresserade av en bit av denna kaka, verktyg som t.ex. Cocos2d-JS De kommer att hjälpa oss att komma in på marknaden på ett enklare sätt.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng