Første trinn med Cocos2d-JS

Videospill er for tiden en av de viktigste komponentene i den digitale økonomien, hvert år investeres milliarder av dollar i design, utvikling og vedlikehold av videospill, og samtidig mottas et større beløp av menneskene som bruker denne typen av innhold.
Det er veldig enkelt å tro at videospill bare er for barn eller for mennesker som er i den verdenen, men virkeligheten er annerledes, ikke alle spill er barns, og ikke alle mennesker må være fans for å nyte et godt spill, det er tusenvis av saker, men to eksempler kan være Godteriknus og Sims, den første var en revolusjon innen spill på sosiale og mobile nettverk, og genererte mye penger daglig, og den andre, mye eldre, var en revolusjon i PC -spill siden den inkluderte mange mennesker som aldri hadde tenkt på å ta en interesse for videospill.

FORSTØRRE

All denne introduksjonen leder oss til et verktøy som forenkler opprettelsen av videospill, slik det er Cocos2d-JS, som ikke er annet enn et rammeverk som lar oss lage enkle todimensjonale spill for alle typer enheter som støtter JavaScript Y HTML5.
Takket være det faktum at dette rammeverket er laget helt inn JavaScript, brukskravene er ikke så vanskelige å oppfylle, la oss se hva vi krever for denne opplæringen å utvikle prosjekter med Cocos2d-JS:
TekstredigererVi trenger et verktøy som lar oss skrive koden for applikasjonene våre, for øyeblikket er det en SDI offiser hva er han Cocos Code IDE men den er bare tilgjengelig for Windows Y MAC. Selvfølgelig kan vi bruke redaktøren vi foretrekker, så IDE ovenfor er det første forslaget, i tilfelle av denne opplæringen er redaktøren som brukes Sublim tekst i versjon 2, men det er ikke avgjørende.
En webserverPå grunn av de forskjellige delene av rammeverket trenger vi en webserver for å bygge applikasjonene våre, vanligvis et miljø Apache det vil tjene oss som det kan være XAMPP, LAMPE eller WAMP, selv om vi har omfattende kunnskap om serverkonfigurasjon, kan vi bruke en server som Nginx for å tjene innholdet vårt, men det er ikke nødvendig.
Nettleser med HTML5 -støtteI vårt tilfelle vil vi bruke Firefox Developer Edition for fordelene for webutvikling, men hvis vi har en foretrukket nettleser, kan vi fortsette å bruke den uten problemer.
Det første vi må gjøre er å laste ned de nødvendige filene for å kunne bruke ressursene som er tilgjengelige, for dette kan vi få tilgang til det offisielle nettstedet og gjøre den tilsvarende nedlastingen, først må vi velge den nyeste versjonen, spesielt i vårt tilfelle det er den 3.5Imidlertid kan flere revisjoner komme ut. La oss se hvordan nedlastingsområdet ser ut:

FORSTØRRE

Vi kan se at vi har andre produkter fra selskapet som har ansvaret for rammen, for eksempel SDI og et utviklingsverktøysett, men vi er bare interessert for øyeblikket Cocos2d-JS, som vi kan se andre på listen over produkter. Det er viktig å merke seg at utslippet er mer enn 350 MB så vi må forberede et mellomrom for denne filen, men vi skal ikke være redd siden denne nedlastingen inneholder en stor mengde materiale, så den virkelige motoren er ikke så tung.
Når vi har rammeverket på datamaskinen vår, må vi pakke ut filen og inn i mappen rammer vi skal finne mappen cocos2d-html5 og vi skal kopiere det til katalogen der vi skal starte prosjektet vårt, som i dette tilfellet vil bli kalt første kamp, det skal i utgangspunktet se slik ut:

Så i vårt prosjekt må vi lage en mappe som heter src og tre ekstra filer; de index.html som er hovedbeholderen i applikasjonen vår og er filen som vil bli kalt i nettleseren fra webserveren. Filen main.js som vil inneholde all koden vår JavaScript tilsvarer logikken i spillet vårt, og til slutt filen project.json som vil inneholde konfigurasjonsparametrene slik at spillet vårt kan fungere riktig. La oss se hvordan vår endelige struktur skal se ut:

Når vi har det første oppsettet, er det på tide å lage spillet vårt, selvfølgelig er et spill komplekst, og det vi skal lage vil ha en veldig grunnleggende funksjonalitet bare ved å vise oss en melding på skjermen, det er ikke noe som konkurrerer med spillene på markedet, men det er en start for å se hvordan ting fungerer i rammen.
I vårt arkiv index.html vi må inkludere biblioteket CCBoot av Cocos2d-JS, må vi også inkludere filen vår main.js, og til slutt i vår kropp vi må inkludere en etikett lerret som er ansvarlig for å motta informasjonen i eksemplet vi lager, la oss se hvordan kildekoden til eksemplet vårt ser ut:

 Vårt første spill 

Siden vi har gjort det første trinnet nå, går vi til filen main.js, denne filen bærer vanligvis ikke logikk med hardt spill, funksjonaliteten er mesteparten av tiden å fungere som en konfigurasjonsfil for å indikere noen parametere for motoren og for å kunne inkludere den sanne logikken i prosjektet, i den vil vi plassere følgende kode:

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

Her har vi ganske enkelt definert hva som skal skje når spillet starter, de to linjene inne i hovedfunksjonen er å indikere oppløsningen og scenen at det skal starte og til slutt i den siste linjen angir vi at det skal starte spillet. Koden virker litt komplisert i begynnelsen, men litt etter litt vil vi forstå og med den vil kompleksiteten avta.
Nå skal vi konfigurere prosjektet vårt, for dette skal vi endre filen project.json, der vi skal definere motoren, antall bilder per sekund i spillet, som er beholderen, og listen over filer som inneholder logikken i spillet vårt, vil vi se sistnevnte i neste trinn. La oss nå se hva vi først skal plassere i filen:

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

Det er veldig viktig at innholdet i denne filen er en JSON gyldig, siden søknaden vår ellers ikke starter.
Når dette er gjort, er det på tide å inkorporere logikken for vårt første eksempel, for dette går vi til mappen src av prosjektet vårt, der vi skal lage filen gamescript.js, hvis vi er observatører, vil vi innse at dette er filen som vi definerer i project.json og vi begynner å se hvordan brikkene begynner å passe sammen.
I denne nye filen skal vi lage scenen i spillet vårt, med dette starter vi det, selvfølgelig har vi ikke noe grafisk å vise, så vi skal bare skrive ut noe på konsollen JavaScript, la oss se koden som vi må inkludere:

 var gameScene = cc.Scene.extend ({onEnter: function () {this._super (); console.log ("Vårt spill er ikke morsomt, men det fungerer =)"); }});

Nå som alt er på plass må vi ringe prosjektmappen vår fra nettleseren og åpne utviklerkonsollen eller et tillegg som lar oss se konsollen JavaScript for å se resultatet av alt vårt arbeid:

FORSTØRRE

Som vi kan se, har vårt første forsøk vært vellykket, vi har allerede en definert base å jobbe med, og vi har tatt våre første skritt med dette rammeverket.
Hvorfor lage 2D -spill?På en egen note kan mange lure på hva som er fordelen med å lage et spill i to dimensjoner i dag, og svaret er veldig enkelt: fordi de er morsomme, og de lar oss utnytte muligheten til å lage spill i miljøer med lav ytelse , som kan bringe oss nærmere en stor mengde potensielle spillere som ikke har en konsoll, men som med de riktige ordene og handlingene kan kjøpe spillet vårt, eller hvis det er en gratis modell å være en del av fellesskapet vårt.
Med dette har vi fullført denne opplæringen, og vi kan si at generasjonen av lekent innhold er et av områdene med størst vekst og konkurranse i dag, som fortsatt forventes å fortsette å vokse spesielt på mobile enheter, og det er en slik forventning at en stor av videospill som Nintendo kommer til å dabble i disse plattformene, så hvis vi er interessert i et stykke av denne kaken, vil verktøy som f.eks Cocos2d-JS De vil hjelpe oss med å komme inn på markedet på en enklere måte.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng