Начало работы с Phaser 3
Перед началом работы вам понадобятся веб-сервер и редактор кода.
Разработчики Paser уже устали отвечать на вопрос: "Зачем мне нужен локальный веб-сервер? Разве я не могу просто перетащить HTML-файлы в свой браузер?"
Увы, но уже давно нет. Все это связанно с безопасностью в браузере. Если вы создаете статическую html веб-страницу, вы можете легко перетащить этот файл в браузер и увидеть конечный результат. Вы даже можете выбрать пункт «Сохранить как» и сохранить локально целые веб-страницы , а заново открыть их, сохранив большую часть содержимого. Но почему же вы не можете перетащить игру HTML5 в браузер и запустить ее?
Это связано с протоколом, используемым для доступа к файлам. Когда вы запрашиваете что-либо через Интернет, вы используете протокол http (https), и безопасности на уровне сервера достаточно, чтобы обеспечить доступ только к тем файлам, для которых предназначена данная веб-страница. Но когда вы перетаскиваете файл в браузер, он загружается через локальную файловую систему (технически посредством протокола file:// ), поэтому доступ к файлам сильно ограничено по очевидным причинам: нет понятия доменов, нет защиты на уровне сервера, только голая файловая система. Вы же не хотите, чтобы какая-то страница имела доступ к вашим личным данным? В блоге Chromium есть подробный пост об этом, который вы можете прочитать, если вам это интересно.
Ваша игра должна будет загружать ресурсы (assets - ассеты): изображения, аудиофайлы, данные JSON, возможно, другие файлы JavaScript. И для того, чтобы сделать это, она должна не иметь ограничений безопасности браузера, поэтому требуется доступ по протоколу http:// к файлам игры. И для этого нам нужен веб-сервер.
В Windows доступно множество установщиков пакетов, которые объединяют и настраивают из одного exe-файла популярные веб-продукты, такие, как Apache, PHP и MySQL . Разработчики Paser рекомендуют сервера WAMP или XAMPP. Можно воспользоваться и другими решениями. Например, компания Cesanta предлагает встраиваемый веб-сервер Mongoose . Это действительно маленькое приложение, которое не требует установки и может работать как отдельный исполняемый файл. Без всех дополнительных пакетов, таких как SSI и WebDAV (ни один из которых вам не понадобится для игры HTML5), размер исполняемого файла составляет всего 45 КБ. Даже полнофункциональная версия составляет всего 355 КБ. Вместо пакета «все в одном» вы также можете установить только веб-сервер: Microsoft IIS, Apache или еще какой.
Будучи средой Unix, в OS X доступно больше опций, чем в Windows. Но если вам нужен подход «все в одном», такой как WAMP, с красивым чистым и простым в использовании интерфейсом, то разработчики настоятельно рекомендуют MAMP .
Grunt — менеджер задач для автоматического выполнения утомительных и трудоемких задачи (например, минификация, тестирование, объединение файлов), написанный на языке программирования JavaScript. Разработчики используют его в Phaser, например, для сборки дистрибутива. Но его также можно настроить с помощью плагина Connect для обслуживания локальных файлов, выступающего в роли веб-сервера.
Если вам нужен быстрый веб-сервер и вы не хотите возиться с настройкой Apache или загрузкой приложения, тогда Python может вам помочь. Python поставляется с простым встроенным HTTP-сервером, который может обслуживать файлы из любой локальной папки. Естественно, что вам нужно установить Python. Прочитайте полное руководство здесь.
http-server - это простой http-сервер командной строки для node.js. Он достаточно мощный для использования на продакшн, но прост и достаточно мощен, чтобы его можно было использовать для тестирования, локальной разработки и обучения. Более подробно читайте здесь.
Начиная с PHP 5.4.0, модуль CLI SAPI содержит встроенный веб-сервер. Он действительно подходит только для разработки и обслуживает все файлы последовательно, но он достаточно мощный для тестирования игр HTML5. Он вызывается из одного вызова командной строки, например php -S localhost:8000 -t D:\mygame, подробности об этом вы можете прочитать тут.
На самом деле выбор редактора - это дело вкуса и личного удобства. Так что выбирайте сами: Notepad++, Sublime Text, Atom, Visual Studio Code, Brackets, WebStorm, Vim или еще что-то.
Phaser - это проект с открытым исходным кодом, который можно загрузить бесплатно. При использовании Phaser плата не взимается, независимо от того, используете ли вы ее для коммерческого или бесплатного проекта.
Проект Paser размещен на github. Вы можете получить его разными способами, но рекомендуемым является клонирование через git.
После установки вашего редактора, установки веб-сервера и загрузки Phaser пришло время создать что-то и проверить, все ли работает.
Вам необходимо выяснить, где находится ваша веб-папка на вашем компьютере. Это папка, в которой сервер ищет файлы. Если вы используете WAMP в Windows, вы можете найти его, щелкнув значок WAMP на панели задач и выбрав «www directory» во всплывающем меню. Другие серверы будут иметь другие методы определения местоположения, но с этого момента мы будем называть этот каталог «webroot».
Создайте файл с именем index.html внутри webroot и вставьте в него следующий код:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>
<script>
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload ()
{
this.load.setBaseURL('http://labs.phaser.io');
this.load.image('sky', 'assets/skies/space3.png');
this.load.image('logo', 'assets/sprites/phaser3-logo.png');
this.load.image('red', 'assets/particles/red.png');
}
function create ()
{
this.add.image(400, 300, 'sky');
var particles = this.add.particles('red');
var emitter = particles.createEmitter({
speed: 100,
scale: { start: 1, end: 0 },
blendMode: 'ADD'
});
var logo = this.physics.add.image(400, 100, 'logo');
logo.setVelocity(100, 200);
logo.setBounce(1, 1);
logo.setCollideWorldBounds(true);
emitter.startFollow(logo);
}
</script>
</body>
</html>Откройте веб-браузер и загрузите страницу index.html. Обычно достаточно набрать localhost/ или 127.0.0.1/ в вашем браузере. Вам также может понадобиться указать номер порта, он полностью зависит от того, какой метод настройки сервера вы использовали (например localhost:8000/).
Если все пойдет хорошо, в вашем браузере отобразится следующая демоверсия:
Если по какой-либо причине не работает, вам нужно вызвать консоль отладки и посмотреть, какие ошибки выводятся. В большинстве браузеров вы можете сделать это, нажав F12 . Это работает в Chrome, Firefox и Internet Explorer 11. Проверьте, что это за ошибка, возможно, она простая, например, отсутствует файл, и в этом случае проверьте имена папок и обновите страницу.
Это всего лишь маленький пример, но с помощью всего лишь нескольких легко читаемых строк кода мы получаем нечто довольно впечатляющее на экране!
Создатели Phaser считают лучшим способом его изучения создавать примеры. Поэтому на сайте разработчиком множество разных примеров, охватывающих все ключевые области Phaser. От того, как настроить анимацию до использования физики.
Вы можете просмотреть все примеры Phaser на его домашнем сайте. Также вы там найдете онлайн редактор кода, чтобы можно изменить исходный код и повторно запустить его в режиме реального времени и сразу увидеть изменения.
Вы также можете загрузить каждый отдельный пример из репозитория github с примерами Phaser 3. Желательно иметь локальную копию, так как это позволяет вам просматривать код намного быстрее и создавать свои собственные примеры. У вас также будут все ресурсы, которые мы предоставляем для использования в ваших собственных тестовых играх.
Теперь все готово, и вы можете изучить руководство по созданию игры в Phaser 3 . Из него вы узнаете, как создать игру, позволяющую управлять персонажем, который может прыгать с платформ и собирать предметы.
Вольный перевод статьи с сайта Phaser.