Създаване на първата Ви игра с Phaser 3

Добре дошли в първия ни урок за създаване на игра със софтуерната рамка Phaser 3. Тук ще научите как да създадете малка игра, в която играчът тича и скача по платформи, събира звезди и се пази от врагове. По време на това ще обясним някои от най-важните възможности на рамката.

Какво е Phaser?

Phaser е софтуерна рамка за HTML5 игри, чиято цел е да помогне на разработчиците в бързата направа на сложни HTML5 игри, работещи във всички браузъри. Специално е създадена да се възползва от възможностите на модерните браузъри - и за компютри, и за телефони. Единствено е необходимо браузърът да поддържа тага canvas.

Какво е необходимо?

Изтеглете този архив, съдържащ кода на всяка стъпка от този урок и ресурсите, които ще използваме.

Нужни са Ви много прости познания за програмния език JavaScript.

Прочетете и първоначалните стъпки за започване, където ще научите как да изтеглите Phaser и да подготвите средата си за разработка, а също ще видите проста структура и основните функции на проект с него.

Ако сте последвали първоначалните стъпки, вече ще сте изтеглили Phaser и ще сте готови да пишете код. Изтеглете ресурсите за този урок и ги разархивирайте в основната директория на Вашия уеб сървър.

Отворете файла part1.html във Вашия избран текстов редактор. Нека да го разгледаме по-отблизо. Малкото HTML код първо включва Phaser, след което виждаме следната структура:

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

function preload ()
{
}

function create ()
{
}

function update ()
{
}

Чрез обекта config, Вие можете да конфигурирате Вашата игра. В него е възможно да присъстват много различни настройки, с повечето от които ще се срещнете, докато разширявате знанията си за Phaser. В този урок, ние само задаваме желания renderer (това е начинът, по който Phaser извежда изображения на екрана), размера на играта и единствен Scene (буквално преведено "сцена" - в контекста на Phaser, това са отделни части от играта), който ще се използва по подразбиране.

Конфигурационният обект се подава на нова инстанция на класа Phaser.Game, която се записва в променливата game. С това започва животът на Phaser.

Във Phaser 2, обектът на играта служеше за достъп до почти всяка една вътрешна система, поради което често се записваше в глобална променлива, обикновено наричана game. Това не важи за Phaser 3 и вече няма особена полза от записването на инстанцията в глобална променлива.

Свойството type в конфигурационния обект може да бъде Phaser.CANVAS, Phaser.WEBGL или Phaser.AUTO. Както споменахме по-горе, това е начинът, по който Phaser извежда графиките на играта на екрана. Препоръчителната стойност е Phaser.AUTO, което автоматично ще се опита да използва WebGL, ако браузърът и устройството го поддържат; в противен случай ще бъде използван Canvas. Тагът canvas, създаден от Phaser, ще бъде добавен в документа там, където се намира кодът, но можете и да посочите друг елемент (parent в конфигурационния обект).

Свойствата width и height определят размера на играта, т.е. на тага canvas, създаден от Phaser. В този случай, това е 800x600 пиксела. Светът на играта може да е с всякакъв размер, но само част от него ще бъде видима.

Свойството scene на конфигурационния обект ще бъде разгледано по-подробно по-късно в този урок.