Pirmieji žingsniai naudojant „Cocos2d-JS“

Vaizdo žaidimai šiuo metu yra vienas iš svarbiausių skaitmeninės ekonomikos komponentų, kiekvienais metais į vaizdo žaidimų kūrimą, kūrimą ir priežiūrą investuojama milijardai dolerių, o tuo pačiu metu didesnę sumą gauna žmonės, vartojantys šį tipą. turinio.
Labai paprasta manyti, kad vaizdo žaidimai skirti tik vaikams ar žmonėms, esantiems šiame pasaulyje, tačiau realybė yra kitokia, ne visi žaidimai yra vaikų, ir ne visi žmonės turi būti gerbėjai, kad galėtų mėgautis geru žaidimu, jų yra tūkstančiai. atvejų, tačiau gali būti du pavyzdžiai Saldainių traiškymas ir SimsasPirmasis buvo revoliucija žaidimų socialiniuose ir mobiliuosiuose tinkluose srityje, sukurianti daug pinigų kasdien, o antroji, daug senesnė, buvo kompiuterinių žaidimų revoliucija, nes joje dalyvavo daug žmonių, kurie niekada negalvojo susidomėjimas vaizdo žaidimais.

DIDELIS

Visa ši įžanga mus veda prie įrankio, kuris palengvina vaizdo žaidimų kūrimą Cocos2d-JS, kas yra ne kas kita, kaip sistema, leidžianti sukurti paprastus 2 matmenų žaidimus bet kokio tipo įrenginiams, kurie palaiko „JavaScript“ Y HTML5.
Dėka to, kad ši sistema yra visiškai sukurta „JavaScript“, naudojimo reikalavimus nėra taip sunku įvykdyti, pažiūrėkime, ko mums reikia šiai pamokai kuriant projektus Cocos2d-JS:
Teksto redaktoriusMums reikalingas įrankis, leidžiantis parašyti savo programų kodą, šiuo metu yra SDI pareigūnas, kas jis Kokoso kodas IDE tačiau ji prieinama tik „Windows“ Y MAC. Žinoma, galime naudoti savo pageidavimų redaktorių, todėl aukščiau pateiktas IDE yra pirmasis pasiūlymas, šios pamokos atveju naudojamas redaktorius Aukščiausias tekstas 2 versijoje, tačiau tai nėra būtina.
Žiniatinklio serverisDėl skirtingų sistemos dalių mums reikia žiniatinklio serverio, kad sukurtume programas, paprastai aplinką Apache jis tarnaus mums taip, kaip gali būti XAMPP, ŠVIESA arba WAMP, net jei turime daug žinių apie serverio konfigūraciją, galime naudoti tokį serverį Nginx teikti mūsų turinį, bet tai nėra privaloma.
Naršyklė su HTML5 palaikymuMūsų atveju mes naudosime „Firefox“ kūrėjų leidimas naudą žiniatinklio kūrimui, tačiau jei turime pageidaujamą naršyklę, galime ir toliau ją naudoti be problemų.
Pirmas dalykas, kurį turime padaryti, yra atsisiųsti reikiamus failus, kad galėtume naudotis turimais ištekliais, kad galėtume pasiekti oficialią svetainę ir atitinkamai atsisiųsti, iš pradžių turime pasirinkti naujausią versiją, ypač mūsų atveju tai yra 3.5Tačiau gali būti išleista daugiau peržiūrų. Pažiūrėkime, kaip atrodo atsisiuntimo sritis:

DIDELIS

Matome, kad turime kitų bendrovės, atsakingos už sistemą, produktų, tokių kaip SDI ir kūrimo įrankių rinkinį, tačiau šiuo metu mus domina tik tai Cocos2d-JS, kurį galime pamatyti antroje vietoje produktų sąraše. Svarbu pažymėti, kad iškrova yra daugiau nei 350 MB todėl turime paruošti vietą šiam failui, bet neturėtume bijoti, nes į šį atsisiuntimą įtraukta daug medžiagos, todėl tikrasis variklis nėra toks sunkus.
Kai turėsime sistemą savo kompiuteryje, turime išpakuoti failą į aplanką rėmus mes surasime aplanką cocos2d-html5 ir mes ketiname jį nukopijuoti į katalogą, kuriame ketiname pradėti savo projektą, kuris šiuo atveju bus vadinamas pirmas žaidimas, iš pradžių tai turėtų atrodyti taip:

Tada savo projekte turime sukurti aplanką pavadinimu src ir trys papildomi failai; index.html kuris yra pagrindinis mūsų programos konteineris ir yra failas, kuris bus iškviestas naršyklėje iš žiniatinklio serverio. Failas main.js kuriame bus visas mūsų kodas „JavaScript“ atitinkančią mūsų žaidimo logiką, ir galiausiai failą project.json kuriame bus konfigūracijos parametrai, kad mūsų žaidimas galėtų tinkamai veikti. Pažiūrėkime, kaip turėtų atrodyti mūsų galutinė struktūra:

Kai jau turime pradinę sąranką, atėjo laikas sukurti savo žaidimą, žinoma, žaidimas yra sudėtingas ir tai, ką sukursime, turės labai paprastas funkcijas, tiesiog parodydamas mums pranešimą ekrane, tai nėra kažkas, kas konkuruoja su žaidimai rinkoje, tačiau tai yra pradžia pamatyti, kaip viskas veikia sistemoje.
Mūsų archyve index.html turime įtraukti biblioteką CCBoot apie Cocos2d-JS, mes taip pat turime įtraukti savo failą main.jsir pagaliau mūsų viduje kūnas turime įtraukti etiketę drobė kuri yra atsakinga už mūsų sukurto pavyzdžio informacijos gavimą, pažiūrėkime, kaip atrodo mūsų pavyzdžio šaltinio kodas:

 Pirmasis mūsų žaidimas 

Kadangi jau atlikome pirmąjį žingsnį, pereisime prie failo main.js, šis failas paprastai neturi griežtos žaidimo logikos, jo funkcionalumas dažniausiai yra tarnauti kaip konfigūracijos failas, nurodantis varikliui kai kuriuos parametrus ir galintis įtraukti tikrąją logiką į projektą, į jį įdėsime šį kodą:

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

Čia mes tiesiog apibrėžėme, kas nutiks žaidimui prasidėjus, dvi pagrindinės funkcijos eilutės nurodo rezoliuciją ir sceną, kurią ji turėtų pradėti, ir galiausiai paskutinėje eilutėje nurodome, kad ji turėtų pradėti žaidimą. Iš pradžių kodas atrodo šiek tiek sudėtingas, tačiau po truputį mes jį suprasime ir kartu sudėtingumas mažės.
Dabar mes sukonfigūruosime savo projektą, tam mes pakeisime failą project.json, kuriame ketiname apibrėžti variklį, žaidimo kadrų skaičių per sekundę, kuris yra jo sudėtinis rodinys, ir failų, kuriuose yra mūsų žaidimo logika, sąrašą, pastarąjį pamatysime kitame žingsnyje. Dabar pažiūrėkime, ką iš pradžių įdėsime į failą:

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

Labai svarbu, kad šio failo turinys būtų JSONAS galioja, nes kitaip mūsų programa nebus paleista.
Kai tai bus padaryta, atėjo laikas įtraukti pirmojo pavyzdžio logiką, todėl einame į aplanką src mūsų projekto, kuriame ketiname sukurti failą gamescript.js, jei esame stebėtojai, suprasime, kad tai yra failas, kurį apibrėžiame project.json ir mes pradedame matyti, kaip dalys pradeda derėti.
Šiame naujame faile mes sukursime savo žaidimo sceną, pradėsime ją, žinoma, mes neturime nieko grafinio, ką parodyti, todėl tiesiog ką nors spausdinsime konsolėje „JavaScript“, pažiūrėkime kodą, kurį turime įtraukti:

 var gameScene = cc.Scene.extend ({onEnter: function () {this._super (); console.log ("Mūsų žaidimas nėra įdomus, bet jis veikia =)"); }});

Dabar, kai viskas yra savo vietoje, turime paskambinti savo projekto aplankui iš naršyklės ir atidaryti kūrėjo konsolę arba kokį nors priedą, leidžiantį pamatyti konsolę „JavaScript“ Norėdami pamatyti viso mūsų darbo rezultatą:

DIDELIS

Kaip matome, pirmasis mūsų bandymas buvo sėkmingas, mes jau turime apibrėžtą pagrindą, kuriuo turime dirbti, ir mes žengėme pirmuosius žingsnius su šia sistema.
Kodėl kurti 2D žaidimus?Atskiroje pastaboje daugeliui gali kilti klausimas, koks šiandien yra dviejų dimensijų žaidimo kūrimo pranašumas, ir atsakymas yra labai paprastas: nes jie yra įdomūs ir leidžia mums išnaudoti galimybę kurti žaidimus žemo našumo aplinkoje. , kuris gali priartinti mus prie daugybės potencialių žaidėjų, kurie neturi konsolės, bet kurie su tinkamais žodžiais ir veiksmais gali nusipirkti mūsų žaidimą arba jei tai yra nemokamas modelis būti mūsų bendruomenės dalimi.
Baigę šią mokymo programą galime pasakyti, kad žaismingo turinio generavimas šiandien yra viena iš didžiausių augimo ir konkurencijos sričių, kuri, kaip tikimasi, ir toliau augs, ypač mobiliuosiuose įrenginiuose, ir tikimasi, kad didelė tokių vaizdo žaidimų kaip „Nintendo“ ketina pasinerti į šias platformas, taigi, jei mus domina šio pyrago gabalas, įrankiai, tokie kaip Cocos2d-JS Jie padės mums lengviau patekti į rinką.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką