Pirmie soļi ar Cocos2d-JS

Videospēles šobrīd ir viena no vissvarīgākajām digitālās ekonomikas sastāvdaļām, ik gadu miljardi dolāru tiek ieguldīti videospēļu projektēšanā, izstrādē un uzturēšanā, un tajā pašā laikā lielāku summu saņem cilvēki, kas patērē šo veidu. no satura.
Ir ļoti vienkārši domāt, ka videospēles ir paredzētas tikai bērniem vai cilvēkiem, kuri atrodas šajā pasaulē, taču realitāte ir atšķirīga, ne visas spēles ir bērnu spēles, un ne visiem cilvēkiem ir jābūt faniem, lai izbaudītu labu spēli. gadījumu, bet var būt divi piemēri Konfekšu sasmalcināšana un SimsPirmā bija revolūcija spēļu jomā sociālajos un mobilajos tīklos, katru dienu radot daudz naudas, un otrā, daudz vecāka, bija revolūcija datorspēlēs, jo tajā bija iekļauti daudzi cilvēki, kuri nekad nedomāja par interese par videospēlēm.

PALIELINĀT

Viss šis ievads noved mūs pie rīka, kas atvieglo videospēļu izveidi Cocos2d-JS, kas ir nekas vairāk kā ietvars, kas ļauj mums izveidot vienkāršas 2-dimensiju spēles jebkura veida ierīcēm, kuras atbalsta JavaScript Y HTML5.
Pateicoties tam, ka šī sistēma ir pilnībā izveidota JavaScript, lietošanas prasības nav tik grūti izpildāmas, redzēsim, kas mums nepieciešams, lai šī apmācība izstrādātu projektus Cocos2d-JS:
Teksta redaktorsMums ir nepieciešams rīks, kas ļauj ierakstīt mūsu lietojumprogrammu kodu, pašlaik ir SDI virsnieks, kas viņš ir Kokosa kods IDE tomēr tas ir pieejams tikai Windows Y MAC. Protams, mēs varam izmantot mūsu izvēles redaktoru, tāpēc iepriekš minētais IDE ir pirmais ieteikums, šīs apmācības gadījumā izmantotais redaktors ir Cildens teksts 2. versijā, bet tas nav būtiski.
Tīmekļa serverisSakarā ar dažādām sistēmas daļām mums ir nepieciešams tīmekļa serveris, lai izveidotu mūsu lietojumprogrammas, parasti vide Apache tas mums kalpos tā, kā tas var būt XAMPP, LAMPA vai WAMP, pat ja mums ir plašas zināšanas par servera konfigurāciju, mēs varam izmantot tādu serveri kā Nginx lai sniegtu mūsu saturu, bet tas nav obligāti.
Pārlūkprogramma ar HTML5 atbalstuMūsu gadījumā mēs izmantosim Firefox izstrādātāju izdevums par tās priekšrocībām tīmekļa izstrādē, bet, ja mums ir vēlamais pārlūks, mēs varam turpināt to izmantot bez problēmām.
Pirmā lieta, kas mums jādara, ir lejupielādēt nepieciešamos failus, lai varētu izmantot pieejamos resursus, tāpēc mēs varam piekļūt oficiālajai vietnei un veikt atbilstošu lejupielādi, sākotnēji mums jāizvēlas visjaunākā versija, jo īpaši mūsu gadījumā tas ir 3.5Tomēr var nākt klajā ar vairākām izmaiņām. Apskatīsim, kā izskatās lejupielādes apgabals:

PALIELINĀT

Mēs redzam, ka mums ir citi produkti no uzņēmuma, kas ir atbildīgs par ietvaru, piemēram, SDI un izstrādes rīku komplekts, tomēr mūs tas interesē tikai šobrīd Cocos2d-JS, ko mēs varam redzēt otro produktu sarakstā. Ir svarīgi atzīmēt, ka izlāde ir vairāk nekā 350 MB tāpēc mums ir jāsagatavo vieta šim failam, taču mums nevajadzētu baidīties, jo šī lejupielāde ietver lielu materiālu daudzumu, tāpēc īstais dzinējs nav tik smags.
Kad mūsu datorā ir ietvars, mums ir jāizpako fails un jāievieto mapē ietvari mēs atradīsim mapi cocos2d-html5 un mēs to nokopēsim direktorijā, kurā mēs sāksim savu projektu, kas šajā gadījumā tiks saukts pirmā spēle, sākotnēji tam vajadzētu izskatīties šādi:

Tad mūsu projekta ietvaros mums ir jāizveido mape ar nosaukumu src un trīs papildu faili; index.html kas ir mūsu lietojumprogrammas galvenais konteiners un fails, kas tiks izsaukts pārlūkprogrammā no tīmekļa servera. Fails main.js kurā būs viss mūsu kods JavaScript kas atbilst mūsu spēles loģikai, un visbeidzot fails project.json kas saturēs konfigurācijas parametrus, lai mūsu spēle varētu darboties pareizi. Apskatīsim, kādai vajadzētu izskatīties mūsu galīgajai struktūrai:

Pēc sākotnējās iestatīšanas ir pienācis laiks izveidot savu spēli, protams, spēle ir sarežģīta, un mūsu radītajam būs ļoti vienkārša funkcionalitāte, tikai parādot mums ziņojumu ekrānā, tas nav kaut kas tāds, kas konkurē ar spēles tirgū, bet tas ir sākums, lai redzētu, kā lietas darbojas sistēmā.
Mūsu arhīvā index.html mums ir jāiekļauj bibliotēka CCBoot no Cocos2d-JS, mums ir jāiekļauj arī mūsu fails main.jsun visbeidzot mūsu iekšienē ķermenis mums ir jāiekļauj etiķete audekls kas ir atbildīgs par mūsu izveidotā piemēra informācijas saņemšanu, redzēsim, kā izskatās mūsu piemēra avota kods:

 Mūsu pirmā spēle 

Tā kā pirmais solis ir paveikts, mēs pāriesim pie faila main.js, šim failam parasti nav stingras spēles loģikas, tā funkcionalitāte lielākoties ir kalpošana kā konfigurācijas fails, lai norādītu dzinējam dažus parametrus un spētu projektā iekļaut patieso loģiku, tajā mēs ievietosim šāds kods:

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

Šeit mēs vienkārši esam definējuši, kas notiks, kad spēle sāksies. Divas galvenās funkcijas rindas norāda uz izšķirtspēju un ainu, kas tai jāsāk, un visbeidzot pēdējā rindā mēs norādām, ka tai jāsāk spēle. Kods sākumā šķiet mazliet sarežģīts, bet pamazām mēs sapratīsim un līdz ar to sarežģītība samazināsies.
Tagad mēs konfigurēsim savu projektu, šim nolūkam mēs mainīsim failu project.json, kurā mēs definēsim dzinēju, spēles kadru skaitu sekundē, kas ir tās konteiners, un failu sarakstu, kas satur mūsu spēles loģiku, mēs redzēsim pēdējo nākamajā solī. Pagaidām redzēsim, ko sākotnēji ievietosim failā:

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

Ir ļoti svarīgi, lai šī faila saturs būtu JSON derīgs, jo pretējā gadījumā mūsu pieteikums netiks startēts.
Kad tas ir izdarīts, ir pienācis laiks iekļaut mūsu pirmā piemēra loģiku, šim nolūkam dodoties uz mapi src no mūsu projekta, kur mēs gatavojamies izveidot failu gamescript.js, ja mēs esam novērotāji, mēs sapratīsim, ka tas ir fails, ko mēs definējam sadaļā project.json un mēs sākam redzēt, kā gabali sāk saderēt kopā.
Šajā jaunajā failā mēs izveidosim savas spēles ainu, ar to mēs to sāksim, protams, mums nav nekā grafiska, ko parādīt, tāpēc mēs vienkārši kaut ko izdrukāsim konsolē JavaScript, redzēsim kodu, kas mums jāiekļauj:

 var gameScene = cc.Scene.extend ({onEnter: function () {this._super (); console.log ("Mūsu spēle nav jautra, bet tā darbojas =)"); }});

Tagad, kad viss ir savās vietās, mums ir jāizsauc sava projekta mape no pārlūkprogrammas un jāatver izstrādātāja konsole vai kāds papildinājums, kas ļauj mums redzēt konsoli JavaScript lai redzētu visa mūsu darba rezultātu:

PALIELINĀT

Kā redzam, mūsu pirmais mēģinājums ir bijis veiksmīgs, mums jau ir noteikta bāze, pie kuras strādāt, un esam spēruši pirmos soļus, izmantojot šo ietvaru.
Kāpēc veidot 2D spēles?Uz atsevišķu piezīmi daudziem var rasties jautājums, kāda ir priekšrocība, ja mūsdienās tiek veidota spēle divās dimensijās, un atbilde ir ļoti vienkārša: jo tās ir jautras un ļauj mums izmantot iespēju veidot spēles zemas veiktspējas vidē. , kas var mūs tuvināt lielai potenciālo spēlētāju masai, kuriem nav konsoles, bet kuri ar pareiziem vārdiem un darbībām var iegādāties mūsu spēli vai ja tas ir bezmaksas modelis, lai kļūtu par daļu no mūsu kopienas.
Ar to mēs esam pabeiguši šo pamācību un varam teikt, ka rotaļīga satura ģenerēšana ir viena no jomām ar vislielāko izaugsmi un konkurenci mūsdienās, un joprojām tiek prognozēts, ka tā turpinās augt, īpaši mobilajās ierīcēs, un ir tādas cerības, ka liela no tādām videospēlēm kā Nintendo gatavojas ielīst šajās platformās, tādēļ, ja mūs interesē šīs kūkas gabals, tādi rīki kā Cocos2d-JS Tie palīdzēs mums vieglāk iekļūt tirgū.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu