Веб-браузеры имеют фантастические встроенные возможности для создания простых графиков, рисунков и анимации. HTML-тег <canvas> в сочетании с Javascript идеально подходит для создания интерактивных 2D-игр. Чтобы упростить и ускорить разработку игр, был разработан ряд игровых движков на основе Javascript. Некоторыми примерами игровых движков Javascript являются P5, Melon, Kiwi, Play Canvas и Phaser. Я решил углубиться в мир Phaser, так как у него сильное сообщество пользователей и фантастическая документация.
Phaser — это расширение Pixi, которое представляет собой невероятно мощную реализацию рендеринга графики WebGL. В настоящее время Phaser имеет два активных потока версий. Версия 3 является официальным выпуском, а версия 2 принята как версия для сообщества (v2 CE). Между ними есть существенные различия в синтаксисе. Версия 3 все еще находится в зачаточном состоянии, в то время как версия 2 имеет большое онлайн-сообщество и примеры, доступные в Интернете. По этой причине я выбрал версию сообщества для своего исследования.
Первая проблема, с которой я столкнулся при попытке настроить Phaser, — это загрузка ресурсов. Вскоре я понял, что из-за совместного использования ресурсов между источниками (CORS) игра, даже находясь в локальной разработке, должна запускаться на сервере. Документация Phaser содержит некоторые предложения, такие как MAMP, Grunt Connect, встроенный веб-сервер PHP 5 или расширение веб-сервера от большого сообщества Node.js.
Я решил использовать сервер Node.js. Два наиболее популярных варианта — HTTP-сервер и Live-сервер. Я пробовал оба. Каждый невероятно прост в работе. Все, что нужно сделать, это установить модуль узла глобально (например, npm install -g live-server), перейти в корневую папку проекта в терминале и ввести либо http-server / live-server, чтобы запустить его. Я считаю, что Live-Server лучше. Во-первых, он автоматически обновляется при изменении кода. Я также обнаружил некоторые проблемы с кэшированием HTTP-сервера, из-за которых обновления не работали, пока я не очистил кеш вручную.
Игры Phaser имеют стандартизированную структуру. У них есть 3 основные функции: preload(), create() and update(). Каждый из них достаточно интуитивен. Ассеты вызываются в функции предварительной загрузки, чтобы их можно было инициализировать в игре. Любой контролируемый пользователем компонент в игре называется Sprite. Если спрайт анимирован, вы можете создать лист спрайтов, который по сути похож на серию панелей, которые фиксируют спрайт в нескольких положениях. Это сделано для того, чтобы данные предварительной загрузки быстрее загружались при запуске и во время игры. Функция create — это место, где создаются основы игры. В функции update вы создаете функции, которые реагируют на изменения в созданной среде. Все игры имеют предзагрузку и функцию создания. Функция обновления требуется не всегда, во многих простых играх все требования к геймплею устанавливаются в функции создания.
Лучший способ проиллюстрировать работу Phaser на примере. В этом примере показано, как создать коробку, которая при подбрасывании возвращается вниз и сталкивается с поверхностью земли. Этот базовый пример демонстрирует простую реализацию физического движка Phaser вместе с взаимодействием с мышью и обнаружением столкновений.
Вот GIF, демонстрирующий нашу удивительную новую игру!
