První kroky s Cocos2d-JS

Videohry jsou v současné době jednou z nejdůležitějších součástí digitální ekonomiky, každý rok se investují miliardy dolarů do designu, vývoje a údržby videoher a zároveň lidé, kteří tento typ konzumují, získají větší částku obsahu.
Je velmi jednoduché si myslet, že videohry jsou pouze pro děti nebo pro lidi, kteří jsou v tomto světě, ale realita je jiná, ne všechny hry jsou dětské a ne všichni lidé musí být fanoušky, aby si užili dobrou hru, existují tisíce případů, ale mohou být dva příklady Rozdrcení cukrovinek a Simíci„první byla revolucí v oblasti her na sociálních a mobilních sítích, která generovala spoustu peněz denně, a druhá, mnohem starší, byla revolucí v počítačových hrách, protože zahrnovala mnoho lidí, kteří nikdy nepřemýšleli o tom, zájem o videohry.

ZVĚTŠIT

Celý tento úvod nás přivádí k nástroji, který usnadňuje vytváření videoher tak, jak jsou Cocos2d-JS, což není nic jiného než rámec, který nám umožňuje vytvářet jednoduché 2-dimenzionální hry pro jakýkoli typ zařízení, které podporuje JavaScript Y HTML5.
Díky tomu, že je tento framework celý vyrobený JavaScript, požadavky na použití nejsou tak obtížné splnit, pojďme se podívat, co pro tento tutoriál potřebujeme k vývoji projektů Cocos2d-JS:
Textový editorPotřebujeme nástroj, který nám umožní napsat kód pro naše aplikace, v současné době existuje a SDI strážník, co to je Kokosový kód IDE je však k dispozici pouze pro Okna Y MAC. Samozřejmě můžeme použít editor, který preferujeme, takže výše uvedené IDE je první návrh, v případě tohoto tutoriálu je použitý editor Vznešený text ve verzi 2, ale není to podstatné.
Webový serverVzhledem k různým částem rámce potřebujeme k vytváření našich aplikací webový server, obecně prostředí Apache poslouží nám, jak může XAMPP, SVÍTILNA nebo WAMP, i když máme rozsáhlé znalosti o konfiguraci serveru, můžeme použít server jako Nginx poskytovat náš obsah, ale není to nutné.
Prohlížeč s podporou HTML5V našem případě použijeme Firefox Developer Edition pro jeho výhody pro vývoj webu, ale pokud máme preferovaný prohlížeč, můžeme jej nadále bez problémů používat.
První věc, kterou musíme udělat, je stáhnout si potřebné soubory, abychom mohli využívat dostupné zdroje. Za tímto účelem se můžeme dostat na oficiální webové stránky a provést odpovídající stahování. Nejprve musíme vybrat nejaktuálnější verzi, v našem případě konkrétně to je 3.5Může však vyjít více revizí. Podívejme se, jak vypadá oblast stahování:

ZVĚTŠIT

Vidíme, že za rámec máme další produkty od společnosti, jako například SDI a sadou vývojových nástrojů, která nás však v tuto chvíli zajímá Cocos2d-JS, který můžeme vidět na druhém místě v seznamu produktů. Je důležité si uvědomit, že výboj je více než 350 MB takže musíme připravit prostor pro tento soubor, ale neměli bychom se bát, protože toto stahování obsahuje velké množství materiálu, takže skutečný engine není tak těžký.
Jakmile máme v počítači framework, musíme soubor rozbalit a do složky rámců najdeme složku cocos2d-html5 a zkopírujeme jej do adresáře, kde spustíme náš projekt, který se v tomto případě bude nazývat první hra, zpočátku by to mělo vypadat takto:

Pak v rámci našeho projektu musíme vytvořit složku s názvem src a tři další soubory; index.html což je hlavní kontejner naší aplikace a je to soubor, který bude v prohlížeči volán z webového serveru. Soubor main.js který bude obsahovat veškerý náš kód JavaScript odpovídající logice naší hry a nakonec soubor project.json který bude obsahovat konfigurační parametry, aby naše hra mohla správně fungovat. Podívejme se, jak by měla vypadat naše konečná struktura:

Jakmile budeme mít počáteční nastavení, je čas vytvořit naši hru, samozřejmě hra je složitá a to, co vytvoříme, bude mít velmi základní funkce pouhým zobrazením zprávy na obrazovce, není to něco, s čím by mohla soutěžit hry na trhu, ale je to začátek vidět, jak věci fungují v rámci.
V našem archivu index.html musíme zahrnout knihovnu CCBoot z Cocos2d-JS, musíme také zahrnout náš soubor main.js, a nakonec v rámci našeho tělo musíme zahrnout štítek plátno který je zodpovědný za příjem informací o příkladu, který vytváříme, podívejme se, jak vypadá zdrojový kód našeho příkladu:

 Naše první hra 

Protože máme nyní první krok hotový, přesuneme se do souboru main.js„Tento soubor obvykle nenese tvrdou logiku hry, jeho funkčnost je po většinu času sloužit jako konfigurační soubor pro indikaci některých parametrů enginu a umožnit zahrnutí skutečné logiky do projektu, do kterého umístíme následující kód:

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

Zde jsme jednoduše definovali, co se stane, když hra začne, dva řádky uvnitř hlavní funkce mají indikovat rozlišení a scénu, která by měla začít, a nakonec v posledním řádku naznačujeme, že by měla začít hru. Kód se na začátku zdá trochu komplikovaný, ale kousek po kousku si budeme rozumět a s ním i složitost klesne.
Nyní budeme konfigurovat náš projekt, za tímto účelem upravíme soubor project.json, ve kterém budeme definovat engine, počet snímků za sekundu hry, která je jejím kontejnerem, a seznam souborů, které obsahují logiku naší hry, uvidíme v dalším kroku. Prozatím se podívejme, co do souboru původně umístíme:

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

Je velmi důležité, aby obsah tohoto souboru byl JSON platné, protože jinak se naše aplikace nespustí.
Jakmile to bude hotové, je čas začlenit logiku pro náš první příklad, proto přejdeme do složky src našeho projektu, kde soubor vytvoříme gamescript.jsPokud jsme pozorovatelé, uvědomíme si, že toto je soubor, který definujeme v souboru project.json a začínáme vidět, jak kusy do sebe začínají zapadat.
V rámci tohoto nového souboru vytvoříme scénu naší hry, tím ji spustíme, samozřejmě nemáme nic grafického, co bychom mohli ukázat, takže prostě něco vytiskneme na konzoli JavaScript, podívejme se na kód, který musíme zahrnout:

 var gameScene = cc.Scene.extend ({onEnter: function () {this._super (); console.log ("Naše hra není zábavná, ale funguje =)"); }});

Nyní, když je vše na svém místě, musíme z prohlížeče zavolat do složky našeho projektu a otevřít konzolu pro vývojáře nebo nějaký doplněk, který nám umožní vidět konzolu JavaScript abychom viděli výsledek celé naší práce:

ZVĚTŠIT

Jak vidíme, náš první pokus byl úspěšný, již máme definovanou základnu, na které musíme pracovat, a udělali jsme první kroky s tímto rámcem.
Proč dělat 2D hry?Na druhou stranu, mnozí se možná ptají, jaká je výhoda vytvoření hry ve 2 dimenzích dnes, a odpověď je velmi jednoduchá: protože jsou zábavné a umožňují nám využít možnosti vytváření her v prostředích s nízkým výkonem , což nás může přiblížit velkému množství potenciálních hráčů, kteří nemají konzolu, ale kteří se správnými slovy a akcemi si mohou koupit naši hru nebo je -li to bezplatný model být součástí naší komunity.
Tímto jsme tento tutoriál dokončili a můžeme říci, že generace hravého obsahu je jednou z oblastí s největším růstem a konkurencí dnes, u které se stále očekává, že bude nadále růst, zejména na mobilních zařízeních, a je takové očekávání, že velký podobných videoher Nintendo se bude na těchto platformách fušovat, takže pokud nás bude zajímat kousek tohoto dortu, nástroje jako např Cocos2d-JS Pomohou nám vstoupit na trh jednodušším způsobem.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod