Първи стъпки с Cocos2d-JS

Видеоигрите понастоящем са един от най -важните компоненти на дигиталната икономика, всяка година милиарди долари се инвестират в проектирането, разработването и поддръжката на видеоигри и в същото време хората, които консумират този вид, получават по -голяма сума на съдържание.
Много е лесно да се мисли, че видеоигрите са само за деца или за хора, които са в този свят, но реалността е различна, не всички игри са детски и не всички хора трябва да са фенове, за да се насладят на добра игра, има хиляди случаи, но могат да бъдат два примера Бонбони смачкване и Sims, първата беше революция в областта на игрите в социалните и мобилните мрежи, генерираща много пари ежедневно, а втората, много по -стара, беше революция в компютърните игри, тъй като включваше много хора, които никога не са мислили да вземат интерес към видео игри.

Увеличете

Цялото това въведение ни води до инструмент, който улеснява създаването на видеоигри, каквито са Cocos2d-JS, което не е нищо повече от рамка, която ни позволява да създаваме прости двуизмерни игри за всеки тип устройство, което поддържа JavaScript Y HTML5.
Благодарение на факта, че тази рамка е направена изцяло в JavaScript, изискванията за използване не са толкова трудни за изпълнение, нека видим какво ни е необходимо за този урок за разработване на проекти Cocos2d-JS:
Текстов редакторНуждаем се от инструмент, който ни позволява да напишем кода за нашите приложения, в момента има SDI офицер какъв е IDE на кокосов код той обаче е достъпен само за Windows Y MAC. Разбира се, можем да използваме редактора по наше предпочитание, така че горната IDE е първото предложение, в случая на този урок използваният редактор е Възвишен текст във версия 2, но това не е от съществено значение.
Уеб сървърПоради различните части на рамката се нуждаем от уеб сървър за изграждане на нашите приложения, обикновено среда Apache ще ни служи както може XAMPP, ЛАМПА или WAMP, дори и да имаме обширни познания в конфигурацията на сървъра, можем да използваме сървър като Nginx за обслужване на нашето съдържание, но не е задължително.
Браузър с поддръжка на HTML5В нашия случай ще използваме Firefox Developer Edition за неговите ползи за уеб разработката, но ако имаме предпочитан браузър, можем да продължим да го използваме без проблеми.
Първото нещо, което трябва да направим, е да изтеглим необходимите файлове, за да можем да използваме наличните ресурси, за това можем да получим достъп до официалния уебсайт и да извършим съответното изтегляне, първоначално трябва да изберем най -актуалната версия, в нашия случай в частност това е 3.5Възможно е обаче да излязат още ревизии. Нека да видим как изглежда областта за изтегляне:

Увеличете

Можем да видим, че имаме други продукти от компанията, отговаряща за рамката, като например SDI и набор от инструменти за разработка, но ние се интересуваме само в момента Cocos2d-JS, което можем да видим второ в списъка с продукти. Важно е да се отбележи, че изхвърлянето е повече от 350 MB така че трябва да подготвим място за този файл, но не трябва да се плашим, тъй като това изтегляне включва голямо количество материал, така че истинският двигател не е толкова тежък.
След като имаме рамката на нашия компютър, трябва да разархивираме файла и в папката рамки ще намерим папката cocos2d-html5 и ще го копираме в директорията, където ще стартираме нашия проект, който в този случай ще бъде извикан първа игра, първоначално трябва да изглежда така:

След това в рамките на нашия проект трябва да създадем папка, наречена src и три допълнителни файла; на index.html който е основният контейнер на нашето приложение и е файлът, който ще бъде извикан в браузъра от уеб сървъра. Файлът main.js който ще съдържа целия ни код JavaScript съответстващи на логиката на нашата игра и накрая файлът project.json който ще съдържа конфигурационните параметри, за да може нашата игра да работи правилно. Нека да видим как трябва да изглежда нашата окончателна структура:

След като имаме първоначалната си настройка, е време да създадем нашата игра, разбира се, че играта е сложна и това, което ще създадем, ще има много основна функционалност, само като ни покаже съобщение на екрана, това не е нещо, което се конкурира с игрите на пазара, но това е начало да се види как работят нещата в рамката.
В нашия архив index.html трябва да включим библиотеката CCBoot на Cocos2d-JS, ние също трябва да включим нашия файл main.js, и накрая в рамките на нашите тяло трябва да включим етикет платно който е отговорен за получаване на информацията от примера, който създаваме, нека да видим как изглежда изходният код на нашия пример:

 Първата ни игра 

Тъй като сега сме направили първата стъпка, ще преминем към файла main.js, този файл обикновено не носи твърда логика на играта, неговата функционалност през повечето време е да служи като конфигурационен файл, който да посочва някои параметри на двигателя и да може да включи истинската логика в проекта, в него ще поставим следния код:

 cc.game.onStart = function () {cc.view.setDesignResolutionSize (320, 480, cc.ResolutionPolicy.SHOW_ALL); cc.director.runScene (нова играScene ()); }; cc.game.run ();

Тук просто сме дефинирали какво ще се случи, когато играта започне, двата реда вътре в основната функция трябва да посочат разделителната способност и сцената, която трябва да започне и накрая в последния ред посочваме, че трябва да започне играта. Кодът изглежда малко сложен в началото, но малко по малко ще разберем и с него сложността ще намалее.
Сега ще конфигурираме нашия проект, за това ще променим файла project.json, в който ще дефинираме двигателя, броя на кадрите в секунда на играта, който е нейният контейнер и списъка с файлове, които съдържат логиката на нашата игра, ще видим последния в следващата стъпка. Засега нека видим какво първоначално ще поставим във файла:

 {"debugMode": 0, "showFPS": false, "frameRate": 60, "id": "gameCanvas", "renderMode": 0, "engineDir": "cocos2d-html5 /", "модули": [" cocos2d "]," jsList ": [" src / gamescript.js "]}

Много е важно съдържанието на този файл да е JSON валиден, тъй като в противен случай нашето приложение няма да стартира.
След като това е направено, е време да включим логиката за първия ни пример, за това отиваме в папката src от нашия проект, където ще създадем файла gamescript.js, ако сме наблюдатели, ще осъзнаем, че това е файлът, който дефинираме в project.json и започваме да виждаме как парчетата започват да си пасват.
В този нов файл ще създадем сцената на нашата игра, с това ще я стартираме, разбира се, че нямаме нищо графично за показване, така че просто ще отпечатаме нещо на конзолата JavaScript, нека видим кода, който трябва да включим:

 var gameScene = cc.Scene.extend ({onEnter: function () {this._super (); console.log ("Нашата игра не е забавна, но работи =)"); }});

Сега, когато всичко е на място, трябва да извикаме папката на проекта си от браузъра и да отворим конзолата за програмисти или някаква добавка, която ни позволява да видим конзолата JavaScript за да видим резултата от цялата ни работа:

Увеличете

Както виждаме, първият ни опит беше успешен, вече имаме определена база за работа и направихме първите си стъпки с тази рамка.
Защо да правите 2D игри?Отделно, мнозина може би се чудят какво е предимството да се направи игра в 2 измерения днес, а отговорът е много прост: защото са забавни и ни позволяват да използваме възможността да правим игри в нископроизводителни среди , което може да ни доближи до голяма маса потенциални играчи, които нямат конзола, но които с правилните думи и действия могат да купят нашата игра или ако това е безплатен модел, за да бъдете част от нашата общност.
С това завършихме този урок и можем да кажем, че генерирането на игриво съдържание е една от областите с най -голям растеж и конкуренция днес, която все още се очаква да продължи да расте, особено на мобилни устройства, и е такова очакване, че голям на видео игри като Nintendo ще се занимава с тези платформи, така че ако се интересуваме от парче от тази торта, инструменти като Cocos2d-JS Те ще ни помогнат да влезем по -лесно на пазара.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка