Phaser - JavaScript-фреймворк с открытым исходным кодом для разработки игр HTML5.

Вы заинтересованы в разработке игр? Готовы поспорить, что да! Но чтобы преуспеть в этой области, вы должны кое-что знать о технологиях, которые вы будете использовать во время своей работы в качестве разработчика игр. Вот почему вам следует узнать о Phaser, бесплатном JavaScript-фреймворке с открытым исходным кодом.

Что касается создания игр, у вас была возможность узнать о многих различных аспектах этого в нашем блоге, таких как работа с HTML5 или создание отличного дизайна. А сейчас пора познакомиться с Phaser, который реализует множество полезных функций, которые облегчат вашу работу и помогут отладить ваш проект.

Установка Phaser

Чтобы начать использовать его, вам просто нужно ввести строки в свой HTML-шаблон.

Здесь будет отображаться ваша игра:

Эта строка отвечает за создание нового экземпляра фреймворка. Первые два параметра - это ширина и высота игры. Третий - тип рендеринга (Canvas или WebGL). Следующий - для идентификатора холста HTML. Последний - это объект, в котором вы определяете важные функции для загрузки ресурсов, создания всех элементов и обновления всего. Вам необходимо определить следующие функции:

  • функция предварительной загрузки - отвечает за загрузку всех ресурсов,
  • создать функцию - в ней необходимо добавить все объекты в игру,
  • обновление - выполняется в каждом кадре, и в этой функции вы можете создать свою игровую логику.

Phaser поддерживает рендеринг Canvas и WebGL. В обоих случаях движком рендеринга является pixi.js. Он также имеет автоматическую систему для обнаружения этих двух типов рендеринга. Если браузер поддерживает WebGL, будет использоваться этот режим. В противном случае всем будет управлять Canvas. Это полезно, когда вы хотите создать кроссплатформенную игру, которая должна работать как на настольных компьютерах, так и на мобильных устройствах. Если вы хотите автоматически определять режим, просто используйте Phaser.AUTO. Чтобы использовать WebGL, измените его на Phaser.WEBGL. Если вам нужно использовать Canvas, вам нужно будет заменить его на Phaser.CANVAS.

Есть простой способ загрузить все активы. Для загрузки изображений, звуков, таблиц спрайтов, тайловых карт или файлов json и xml вам понадобится всего одна строка кода. IPhaser автоматически подготовит их к использованию и сохранит в кеше. Для этого вы должны добавить код в свою функцию предварительной загрузки.

Phaser в стандартной версии поддерживает 3 физических движка:

  • аркада - это простая физика AABB, работающая с маломощными устройствами. Однако это не означает, что это движок только для простых игр;
  • ниндзя - расширенная аркада, работающая с кругами, треугольниками и расширенными тайловыми картами;
  • P2 - это физический движок всего тела с расширенной поддержкой многоугольников.

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

Спрайты - управление изображениями в игре

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

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

Здесь у вас есть два способа добавления объектов в группы:

Создание анимации

У вас есть несколько разных способов создания анимации. Вы можете сделать это с помощью классической таблицы спрайтов, файлов JSON или XML или с помощью свойства tween спрайта.

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

Теперь нам нужно включить перетаскивание спрайта:

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

Phaser позволяет очень легко добавлять и использовать тайловые карты. Вам просто нужно добавить файл json со структурой тайловой карты и изображениями для создания стен.

Если вы хотите иметь адаптивную игру, вам необходимо использовать встроенный Scale Manager, который позволяет масштабировать всю игру и, следовательно, подогнать ее под разные размеры экрана.

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

Теперь вам нужно добавить недавно созданный плагин к вашему экземпляру фреймворка:

После этого вы можете вызывать свои методы плагина с кодом ниже

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

Если вы хотите использовать Phaser, вам просто понадобится ваш любимый редактор / IDE, знание JavaScript и исходного кода Phaser. Последнюю можно скачать с сайта проекта или github. Кроме того, документация по этому фреймворку действительно хорошо написана и наполнена отличными примерами.

Альтернативы Phaser

Есть несколько хороших альтернатив Phaser, например ImpactJS, EaselJS или melonJS. Однако они не так популярны и не предлагают столько встроенных функций, как Phaser.

Стоит ли работать с Phaser?

Конечно, это является! Таким образом, Phaser - это очень мощный и простой в освоении фреймворк, который позволяет разрабатывать игры HTML5. Встроенные функции полезны и экономят время - нам не нужно беспокоиться о написании таких основ, как обнаружение столкновений, загрузка ресурсов, обнаружение метода рендеринга или события касания. Если есть проблема с Phaser, его официальный форум очень полезен и наполнен действительно полезными разработчиками.

Первоначально опубликовано на www.merixstudio.com.