Запускаем локальный сервер и пишем первое приложение используя Phaser.js

Phaser JS - это фреймворк JavaScript предназначенный для создания браузерных и мобильных приложений на HTML5, является расширенной версией PIXI.JS с упрощенными методами работы с графикой, физикой, звуками и прочим. Или как пишут сами разработчики Phaser - "Быстрый, бесплатный и веселый фреймворк с открытым исходным кодом для браузерных игр использующих Canvas и WebGL".

В этом уроке мы запустим локальный сервер, а также напишем простое приложение, использующее Phaser.
Предполагается, что вы уже знакомы с основами JS.

"Зачем мне локальный сервер? Я просто хочу делать игры!"
Это весьма распространенный вопрос, который сбивает с толку всех новичков:
"Почему я не могу просто запустить приложение Phaser в браузере?"
Это из-за того, что Phaser обладает возможностью загружать необходимые для приложения файлы (изображения, музыку, видео и прочее) во время работы, однако все современные браузеры по умолчанию обладают защитой файлов, расположенных на компьютере, что не позволяет запустить приложение "как есть". Задумайтесь - было бы странно, если бы скрипт JS, мог считать любой файл на вашем компьютере, вне зависимости от его расположения, не так ли? Именно по этой причине мы запустим свой локальный сервер, только внутри которого файлы будут доступны нашему приложению.

Устанавливаем локальный веб-сервер
Для запуска собственного сервера нам понадобится специальная программа. Вы можете сами выбрать любую из бесплатных, однако для Windows я рекомендую использовать мощное, но при этом простое в управлении приложение WAMP. Ссылки на скачивание установочного файла есть на сайте разработчиков, сам установщик имеет простой и понятный интерфейс.

Важное замечание!
Некоторые программы на вашем компьютере, такие как Skype, могут занимать служебный порт 80 по умолчанию. Этот порт необходим для запуска сервера на WAMP, поэтому запретите этим приложениям его использовать.
Например, для Skype: (в панели меню) Инструменты -> Настройки -> Подключение; снять галочку с пункта "Использовать порты 80 и 443 для альтернативных подключений".

Скачиваем Phaser
Phaser абсолютно бесплатный и обладает открытым исходным кодом, вы можете свободно использовать его даже для своих коммерческих проектов.
Скачать копию последней стабильной версии можно в соответствующем разделе сайта разработчиков или среди прикрепленных к данному уроку файлов.

Пишем простое приложение
В данном уроке мы поместим код приложения в отдельный файл. Начните с того, что создайте в отдельной папке файл с расширением .js, например "myPhaserApp.js" и начните его редактировать в любой JS IDE (WebStorm, Brackets, ...) или текстовом редакторе (NotePad++, Блокнот, ...).

Наш скрипт будет начинаться с общей процедуры, которая будет вызвана когда приложение будет готово к запуску (после загрузки страницы в браузере, например). Назовем ее "Start".

function Start() {
//Тут будет код нашего приложения
}

Любое приложение Phaser начинается с создания экземпляра класса Phaser.Game:
new Phaser.Game(width, height, renderer, parent, state), где width и height - ширина и высота окна приложения, renderer - тип рендера (WebGL или Canvas), parent - родитель (элемент, к которому прикреплено это окно), и state - набор специальных Phaser.State функций.
В нашем примере мы создадим экземпляр с такими параметрами:

function Start() {
var game = new Phaser.Game(800, 600, Phaser.AUTO, "", { create: create, update: update, render: render });
}

Скорее всего у вас возник вопрос - "Что же такое функции Phaser.State"?
Это функции, которые отвечают за "состояния" в приложении. Приложения Phaser исполняются не линейно, на самом деле за объектом Phaser.Game скрывается некий механизм, который вызывает "функцию обновления" каждый раз, когда приложение готово к "отрисовке" очередного кадра.

В данном примере мы будем использовать состояния создания ("create"), которое вызывается один раз при запуске приложения и используется для построения начальной сцены, обновления ("update"), которое вызывается каждый раз, когда приложение закончило рисовать предыдущий кадр, и состояние рендера ("render"), которое используется для рисования графики, вызывается сразу после состояния "обновления".

Давайте предварительно запишем эти состояния:

function Start() {
var game = new Phaser.Game(800, 600, Phaser.AUTO, "", { create: create, update: update, render: render });
 
function create() {
//создание начальной сцены
}
function update() {
//промежуточные вычисления
}
function render() {
//отрисовка графики
}
}

Теперь займемся рисованием графики! Нарисуем круг.
Сперва создадим внешнюю переменную circle, а в состоянии "create" инициализируем ее, поместив в нее объект Phaser.Circle, конструктор которого принимает такие параметры:
new Phaser.Circle(x, y, radius)

//...
var circle;
function create() {
	circle = new Phaser.Circle(game.world.centerX, game.world.centerY, 64);
}
//...

Однако, не достаточно просто создать объект для фигуры, его еще нужно рисовать специальным методом, например, Game.Debug.Geom, который в качестве параметров принимает саму фигуру и цвет заливки. Рисовать фигуру нужно конечно же в состоянии "render":

//...
function render() {
	game.debug.geom(circle, "#FFFFFF");
}
//...

Теперь давайте нарисуем статичный "глаз" вокруг нашего круга так, чтобы сам круг выглядел как зрачок этого глаза.
Для представления многоугольников хорошо подходит объект типа Phaser.Polygon, который обладает методом setTo([points]), принимающий массив точек (объектов типа Phaser.Point). Стоит отметить, что координаты точек не привязаны к координатам внутри самого окна, они отображают отступ от центра этого многоугольника, который можно будет разместить где угодно.

//...
function create() {
	circle = new Phaser.Circle(game.world.centerX, game.world.centerY, 64);
	var poly = new Phaser.Polygon().setTo([
			new Phaser.Point(-150, 0), new Phaser.Point(-100, -30), new Phaser.Point(-50, -50),
			new Phaser.Point(0, -55), new Phaser.Point(50, -50), new Phaser.Point(100, -30),
			new Phaser.Point(150, 0), new Phaser.Point(100, 30), new Phaser.Point(50, 50),
			new Phaser.Point(0, 55), new Phaser.Point(-50, 50), new Phaser.Point(-100, 30)
		]);
}
//...

Теперь необходимо нарисовать наш статичный многоугольник. Для этого нам нужно получить от объекта игры (Phaser.Game) объект типа Phaser.Graphics. Это можно выполнить методом Game.Add.Grahics(x, y). После того, как мы получили Phaser.Graphics нам нужно поочередно вызвать для него методы начала заливки Phaser.Graphics.beginFill(color), рисования многоугольника Phaser.Graphics.drawPolygon([points]) и окончания заливки Phaser.Graphics.endFill()

//...
var graphics = game.add.graphics(game.world.centerX, game.world.centerY);
graphics.beginFill(0xBBBBBBf);
graphics.drawPolygon(poly.points);
graphics.endFill();
//...

//...
function create() {
	circle = new Phaser.Circle(game.world.centerX, game.world.centerY, 64);
	var poly = new Phaser.Polygon().setTo([
		new Phaser.Point(-150, 0), new Phaser.Point(-100, -30), new Phaser.Point(-50, -50),
		new Phaser.Point(0, -55), new Phaser.Point(50, -50), new Phaser.Point(100, -30),
		new Phaser.Point(150, 0), new Phaser.Point(100, 30), new Phaser.Point(50, 50),
		new Phaser.Point(0, 55), new Phaser.Point(-50, 50), new Phaser.Point(-100, 30)
	]);
	var graphics = game.add.graphics(game.world.centerX, game.world.centerY).beginFill(0xBBBBBBf).drawPolygon(poly.points).endFill();
}
//...

Теперь давайте заставим зрачок двигаться. Пускай он будет следить за курсором мыши по оси X в пределах некоторого отступа, который мы зададим внешней константой с именем maxIndent. Чтобы переместить круг нужно всего лишь редактировать его позицию (переменные .x и .y), наша функция отрисовки в состоянии "рендера" сама сотрет его и нарисует в новой позиции. Положение зрачка будем изменять по формуле:

//...
function update() {
	circle.x = game.world.centerX - (maxIndent / 2) + (game.input.activePointer.x / game.world.width) * maxIndent;
}
//...

В итоге наш код будет выглядеть примерно так:

function Start() {
var game = new Phaser.Game(800, 600, Phaser.AUTO, "", { create: create, update: update, render: render });
var circle;
const maxIndent = 64;
 
function create() {
	circle = new Phaser.Circle(game.world.centerX, game.world.centerY, 64);
	var poly = new Phaser.Polygon().setTo([
		new Phaser.Point(-150, 0), new Phaser.Point(-100, -30), new Phaser.Point(-50, -50),
		new Phaser.Point(0, -55), new Phaser.Point(50, -50), new Phaser.Point(100, -30),
		new Phaser.Point(150, 0), new Phaser.Point(100, 30), new Phaser.Point(50, 50),
		new Phaser.Point(0, 55), new Phaser.Point(-50, 50), new Phaser.Point(-100, 30)
	]);
	var graphics = game.add.graphics(game.world.centerX, game.world.centerY).beginFill(0xBBBBBBf).drawPolygon(poly.points).endFill();
}
 
function update() {
	circle.x = game.world.centerX - (maxIndent / 2) + (game.input.activePointer.x / game.world.width) * maxIndent;
}
 
function render() {
	game.debug.geom(circle, "#FFFFFF");
}
 
}

Пишем HTML-обертку для нашего приложения
JS не является самостоятельным языком сам по себе, поэтому чаще всего его используют в качестве скриптов для веб-сайтов.
Нам понадобится описать главную страницу "сайта", в который будет встроено приложение.
Для этого мы будем использовать стандартный шаблон html-страницы, и немного допишем его:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Мое первое приложение Phaser!</title>
        <script src="phaser.min.js"></script> <!--Подключаем модуль Phaser-->
    </head>
    <body>
		<!--Подключаем скрипт, который будет содержать код нашего приложения-->
		<script src="myPhaserApp.js"></script>
		<script lang="text/javascript">
			window.onload = Start(); <!--"После загрузки страницы вызови процедуру Start"-->
		</script>
    </body>
</html>

Теперь соберите все файлы приложения вместе - переместите главную страницу сайта, скрипт и модуль в одну папку. В итоге должен получиться следующий набор файлов:

Переименуйте папку в которой лежат файлы. Желательно, чтобы имя состояло только из латинских символов - например, "myFirstPhaserApp" - это и будет названием вашего локального сервера.

Запуск приложения на локальном сервере
Теперь все готово к запуску и тестированию приложения! Осталось всего лишь запустить его с помощью программы, которую мы установили ранее.

Если вы используете WAMP, то сперва вам нужно запустить его с помощью ярлыка на рабочем столе. После успешного запуска в вашем трее должна появиться его иконка зеленого цвета - это означает, что программа готова к запуску сервера. Кликните на нее, и вы увидите интерфейс WAMP. Теперь вам нужно нажать на пункт "www directory", после чего в проводнике откроется папка для серверов, в которую вы должны переместить папку с приложением Phaser.

Теперь нажмите на пункт "Start All Services", откройте браузер и в поле для URL-ссылки введите "localhost/myFirstPhaserApp". Если вы все сделали правильно, вы увидите окно со своим приложением:

Начните водить указателем мыши по окну и вы увидите, как глаз следит за курсором!

Заключение
Поздравляю! Теперь вы можете отредактировать код приложения и попробовать написать что-то другое. У Phaser еще очень много возможностей, которые позволят написать вам полноценную игру. Документацию и примеры вы можете найти в соответствующих разделах на сайте разработчиков.
Удачи в разработке и спасибо за прочтение данного урока!