Първи стъпки към разработването на игри с Phaser

Пристигането на HTML5 Той промени начина, по който виждаме мрежата, не само ни даде по -добри инструменти за тяхното развитие, но също така ни отвори възможностите да разработваме приложения, които отиват по -далеч, както в случая с видеоигрите.
Предимството да се направи видео игра в HTML5 той е, че е съвместим с почти всяко устройство, което има браузър и което е още по -добре, без да е необходимо да изтегляте или извършвате допълнителни инсталации.
Благодарение на тази нова популярност, рамките за разработване на видео игри се разраснаха, всяка със своите характеристики и предимства, този път ще се концентрираме върху Phaser, причините са няколко и можем да ги видим в следния списък:

• Той има страхотна общност и е активен.
• Той се актуализира периодично.
• Той е безплатен за използване.
• Той има физически инструменти, които улесняват живота ни.

Така че, тъй като виждаме, че има някои интересни предимства, ще го инсталираме, но първо нека видим някои изисквания, които рамката изисква.
1- Нуждаем се от достъп до Интернет, за да можем да изтеглим всички ресурси, които възникват по време на инсталирането на рамката, включително и този.
2- Трябва да сме инсталирали или да можем да инсталираме уеб сървър в този стил ЛАМПА или WAMP или MAMP в зависимост от нашата операционна система, това е така Phaser използва HTML5 и също JavaScript Следователно, поради мерки за сигурност, нашият браузър няма да приема локални изпълнения.
3- Нуждаем се от разрешения за достъп до необходимите папки и услуги, които са зададени по време на инсталирането на рамката.
4- Нуждаем се от браузър, съвместим с HTML5 и че има инструменти за отстраняване на грешки, в случая на този урок ще използваме Firefox Developer Edition в последната си версия в момента, но те са свободни да изберат тази, която им се струва най -добра.
5- Накрая се нуждаем от текстов редактор, за да можем да напишем кода за примерите, тъй като винаги може да бъде каквото имаме, въпреки че препоръчваме Възвишен текст o NotePad ++ поради големия брой плъгини, които имат и двата, които улесняват живота ни като разработчици.
Първото нещо, което ще направим, за да можем да инсталираме Phaser е да отидете на официалния му уебсайт и тук ще намерим няколко ресурса, но засега ще отидем в раздела, който казва Изтегли:

Увеличете

Имаме няколко опции за изтегляне, двете, които можем да използваме, са за изтегляне на компресирания .zip или .tar.gz, също можем да направим клонинг от Github на проекта, в нашия случай ще изтеглим проекта в .zip, за да ускорим процеса. След като изтеглим или клонираме проекта, най -важните директории са следните:
docs / index.htmlТук имаме запис към офлайн и официалната документация на версията, която току -що изтеглихме, тя може да ни помогне да прегледаме някои подробности, въпреки че ако имаме възможност да отидем в интернет и да се документираме, винаги ще имаме по -добри възможности.
build / phaser.min.jsТова е нашата рамка като такава, тя е минифицираната и компресирана библиотека, която съдържа всички инструменти, които ще са ни необходими, за да стартираме първите си проекти.
Тъй като сме изтеглили проекта, за да проверим дали всичко е правилно, просто трябва да копираме разархивираната папка, откъдето можем да получим достъп до него с нашия уеб сървър, обикновено това е директорията www или public_html, всичко наистина зависи от нашата среда.
След като сме там, трябва да отидем в нашия браузър и да стартираме нашия localhost / phaser или името, което сме поставили и ще видим списъка с файлове, тук трябва да преминем към следната папка: ресурси / уроци / 01 Първи стъпки / hellophaser / index.html и можем да оценим това, което виждаме на следната екранна снимка:

Увеличете

Първата ни играТъй като сме проверили, че нашата среда работи перфектно, е време да направим първата си игра, за това ще установим постижима цел за нашето ниво по това време, където в края на примера трябва да можем да покажем Спрайт на екрана.
В папката, която имаме рамката на нашия уеб сървър, ще създадем нова папка, в този случай ще я наречем пример за фазер, вътре ще поставим файла phaser.min.js в основата му ще създадем файл, наречен index.html и друг файл, наречен main.js, ние също трябва да поставим изображение, наречено logo.png.webp който ще бъде спрайт, който ще покажем, който може да се намери в ресурсите на рамката и това може да бъде препоръчителен размер от 180 на 64 пиксела. В крайна сметка нашата директория трябва да изглежда така:

Тъй като нашата структура е установена сега, трябва да започнем да пишем кода за първия ни проект, за това, което трябва да направим, е да отворим нашия файл index.html и там ще включим файловете .js което сме създали, в допълнение към създаването на a който ще има като идентификатор думата gameDiv. Нека да видим как изглежда нашият код:

 Първата ни игра на Phaser
Първата ни игра =)

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

 var mainState = {preload: function () {// Зареждаме изображението game.load.image ('logo', 'logo.png.webp'); }, create: function () {// Показваме нашето изображение в играта this.sprite = game.add.sprite (200, 150, 'лого'); }, update: function () {// променяме ъгъла с една единица 60 пъти в секунда // това ще ни даде ефект на завъртане на изображението this.sprite.angle + = 1; }}; // тук започваме нашата игра и я настройваме // да използваме div gameDiv, който поставяме в нашата HTMLvar игра = new Phaser.Game (400, 300, Phaser.AUTO, 'gameDiv'); game.state. add ('main', mainState); game.state.start ('main');

Както можем да видим в края на методите, ние създаваме променлива, наречена игра и в това изпълняваме екземпляр на Phaser.Game където предаваме някои параметри, в момента не е необходимо да знаем много за тях, просто ги копираме, както ги виждаме. Но приблизително това е частта, в която казваме на нашето приложение да търси Phaser така че да ви казва какво да правите с методите, които създадохме по -горе и накрая с game.state.start е мястото, където казваме на рамката да започне нашата игра.
Сега, ако всичко е наред, ще стартираме нашия проект в браузъра и трябва да видим избраното изображение да се върти на екрана:

В случая с този пример сме използвали изображение, което попада в ресурсите на PhaserТова обаче всъщност не е изискване, с всяко изображение бихме могли да постигнем същите резултати. Друго нещо, което можем да забележим в нашия пример, е, че по -долу имаме отворена конзолата за отстраняване на грешки в браузъра, този инструмент е най -добрият приятел, който ще имаме, тъй като там можем да отстраним грешките, които можем да открием при разработването на нашите игри.
С това завършихме този урок, успешно инсталирахме Phaser, познахме някои от първоначалните характеристики на тази страхотна рамка и с това създадохме малко приложение или игра. Важно е да вземете този урок като отправна точка, за да направите малко по-задълбочено проучване Phaser, тъй като това не е дори 1% от всичко, което ни предлага, това обаче е първа стъпка, която толкова често ни струва да предприемем.