Eerste stappen met Cocos2d-JS

Videogames zijn momenteel een van de belangrijkste componenten van de digitale economie, elk jaar worden miljarden dollars geïnvesteerd in het ontwerp, de ontwikkeling en het onderhoud van videogames, en tegelijkertijd wordt een groter bedrag ontvangen door de mensen die dit type consumeren van inhoud.
Het is heel eenvoudig om te denken dat videogames alleen voor kinderen zijn of voor mensen die in die wereld zijn, maar de realiteit is anders, niet alle games zijn voor kinderen, en niet alle mensen moeten fans zijn om van een goede game te genieten, er zijn duizenden van gevallen, maar twee voorbeelden kunnen zijn: Candy crush en de Sims, de eerste was een revolutie op het gebied van games op sociale en mobiele netwerken, die dagelijks veel geld opleverde, en de tweede, veel ouder, was een revolutie in pc-games omdat er veel mensen bij waren die er nooit aan hadden gedacht om een interesse in videogames.

VERGROTEN

Al deze introductie leidt ons naar een tool die het maken van videogames vergemakkelijkt, zoals het is Cocos2d-JS, wat niets meer is dan een raamwerk waarmee we eenvoudige 2-dimensionale games kunnen maken voor elk type apparaat dat ondersteuning biedt voor JavaScript Y HTML5.
Dankzij het feit dat dit frame volledig is gemaakt in JavaScript, de gebruiksvereisten zijn niet zo moeilijk om te voldoen, laten we eens kijken wat we nodig hebben voor deze tutorial om projecten mee te ontwikkelen Cocos2d-JS:
TeksteditorWe hebben een tool nodig waarmee we de code voor onze applicaties kunnen schrijven, momenteel is er een SDI officier wat is hij? Cocos-code IDE het is echter alleen beschikbaar voor: ramen Y MAC. Natuurlijk kunnen we de editor van onze voorkeur gebruiken, dus de bovenstaande IDE is de eerste suggestie, in het geval van deze tutorial is de gebruikte editor Sublieme tekst in versie 2, maar het is niet essentieel.
Een webserverVanwege de verschillende delen van het framework hebben we een webserver nodig om onze applicaties te bouwen, meestal een omgeving Apache het zal ons dienen zoals het kan zijn XAMPP, LAMP of WAMP, zelfs als we uitgebreide kennis hebben van serverconfiguratie, kunnen we een server gebruiken zoals Nginx om onze inhoud te dienen, maar het is niet vereist.
Browser met HTML5-ondersteuningIn ons geval zullen we gebruiken Firefox-ontwikkelaarseditie vanwege de voordelen voor webontwikkeling, maar als we een voorkeursbrowser hebben, kunnen we deze zonder problemen blijven gebruiken.
Het eerste dat we moeten doen, is de benodigde bestanden downloaden om de beschikbare bronnen te kunnen gebruiken, hiervoor hebben we toegang tot de officiële website en kunnen we de bijbehorende download maken, in eerste instantie moeten we de meest recente versie kiezen, met name in ons geval het is de 3.5Er kunnen echter meer revisies uitkomen. Laten we eens kijken hoe het downloadgebied eruit ziet:

VERGROTEN

We kunnen zien dat we andere producten hebben van het bedrijf dat verantwoordelijk is voor het raamwerk, zoals de SDI en een ontwikkelingstoolkit, maar we zijn momenteel alleen geïnteresseerd Cocos2d-JS, die we als tweede in de lijst met producten kunnen zien. Het is belangrijk op te merken dat de ontlading meer is dan 350 MB dus we moeten een ruimte voor dit bestand voorbereiden, maar we moeten niet bang zijn omdat deze download een grote hoeveelheid materiaal bevat, dus de echte motor is niet zo zwaar.
Zodra we het framework op onze computer hebben, moeten we het bestand uitpakken en in de map plaatsen kaders we gaan de map zoeken cocos2d-html5 en we gaan het kopiëren naar de map waar we ons project gaan starten, dat in dit geval zal worden genoemd eerste spel, zou het er in eerste instantie zo uit moeten zien:

Dan moeten we binnen ons project een map maken met de naam src en drie extra bestanden; de index.html wat de hoofdcontainer van onze applicatie is en het bestand is dat in de browser wordt aangeroepen vanaf de webserver. Het bestand main.js die al onze code zal bevatten JavaScript overeenkomend met de logica van ons spel, en tot slot het bestand project.json die de configuratieparameters zal bevatten zodat ons spel correct kan werken. Laten we eens kijken hoe onze uiteindelijke structuur eruit zou moeten zien:

Zodra we onze eerste set-up hebben, is het tijd om onze game te maken, natuurlijk is een game complex en wat we zullen maken, heeft een zeer basisfunctionaliteit door ons een bericht op het scherm te laten zien, het is niet iets dat concurreert met de games op de markt, maar het is een begin om te zien hoe de dingen werken in het kader.
In ons archief index.html we moeten de bibliotheek opnemen CCBoot van Cocos2d-JS, we moeten ook ons ​​bestand opnemen main.js, en tot slot binnen onze lichaam we moeten een label opnemen canvas die verantwoordelijk is voor het ontvangen van de informatie van het voorbeeld dat we maken, laten we eens kijken hoe de broncode van ons voorbeeld eruit ziet:

 Onze eerste wedstrijd 

Omdat we nu de eerste stap hebben gedaan, gaan we naar het bestand main.js, dit bestand bevat meestal geen harde spellogica, de functionaliteit ervan is meestal om te dienen als een configuratiebestand om enkele parameters aan de engine aan te geven en om de echte logica in het project op te nemen, daarin zullen we de volgende code:

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

Hier hebben we eenvoudig gedefinieerd wat er gaat gebeuren als het spel begint, de twee regels in de hoofdfunctie geven de resolutie en de scène aan waarin het moet beginnen en ten slotte geven we in de laatste regel aan dat het het spel moet starten. De code lijkt in het begin wat ingewikkeld, maar beetje bij beetje zullen we het begrijpen en daarmee zal de complexiteit afnemen.
Nu gaan we ons project configureren, hiervoor gaan we het bestand aanpassen project.json, waarin we de engine gaan definiëren, het aantal frames per seconde van de game, wat de container is, en de lijst met bestanden die de logica van onze game bevatten, we zullen de laatste in de volgende stap zien. Laten we nu eens kijken wat we in eerste instantie in het bestand gaan plaatsen:

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

Het is erg belangrijk dat de inhoud van dit bestand a JSON geldig, omdat anders onze applicatie niet start.
Zodra dit is gebeurd, is het tijd om de logica voor ons eerste voorbeeld op te nemen, hiervoor gaan we naar de map src van ons project, waar we het bestand gaan maken gamescript.js, als we waarnemers zijn, zullen we ons realiseren dat dit het bestand is dat we definiëren in de project.json en we beginnen te zien hoe de stukjes in elkaar passen.
Binnen dit nieuwe bestand gaan we de scène van onze game maken, hiermee beginnen we, natuurlijk hebben we niets grafisch om te laten zien, dus we gaan gewoon iets op de console afdrukken JavaScript, laten we de code bekijken die we moeten opnemen:

 var gameScene = cc.Scene.extend ({onEnter: function () {this._super (); console.log ("Ons spel is niet leuk, maar het werkt =)"); }});

Nu alles op zijn plaats is, moeten we onze projectmap vanuit de browser bellen en de ontwikkelaarsconsole of een add-on openen waarmee we de console kunnen zien JavaScript om het resultaat van al ons werk te zien:

VERGROTEN

Zoals we kunnen zien, is onze eerste poging succesvol geweest, hebben we al een gedefinieerde basis om aan te werken en hebben we onze eerste stappen met dit raamwerk gezet.
Waarom 2D-games maken?Los daarvan vragen velen zich misschien af ​​wat het voordeel is om tegenwoordig een game in 2 dimensies te maken, en het antwoord is heel eenvoudig: omdat ze leuk zijn en ze ons in staat stellen de mogelijkheid te benutten om games te maken in omgevingen met lage prestaties , wat ons dichter bij een grote massa potentiële spelers kan brengen die geen console hebben, maar die met de juiste woorden en acties onze game kunnen kopen of als het een gratis model is om deel uit te maken van onze community.
Hiermee hebben we deze tutorial afgerond en kunnen we zeggen dat het genereren van speelse inhoud een van de gebieden is met de grootste groei en concurrentie van vandaag, die naar verwachting nog steeds zal blijven groeien, vooral op mobiele apparaten en het is zo'n verwachting dat een grote van videogames zoals Nintendo gaat zich bezighouden met deze platforms, dus als we geïnteresseerd zijn in een stukje van deze taart, tools zoals: Cocos2d-JS Zij zullen ons helpen om gemakkelijker de markt te betreden.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven