Создание HTML5-игр для самых маленьких (Phaser3)

Konstantin
Konstantin Ostrovsky
2018-11-24 20:40:09
10

HTML5-игры - это не нововведение и уже достаточно известная технология для многих разработчиков. Технология Flash условно ушла в отставку еще в 2010 году, оставив после себя огромный опыт разработчиков, изложенный в сотнях книг и тысячах статей. Окончательно прекратить поддержку Flash, Adobe обещают уже к 2020г. Существует мнение что причиной тому послужил отказ Apple от поддержки Flash в браузерах, начиная с 2010 года, а так же появлением на свет технологии Canvas. 

В 2015г. нам официально был представлен новый стандарт HTML5, который перевернул всю индустрию с ног на голову. Помимо появления множества семантических элементов, таких как <section>, <article>, <menu> и др. нам стали доступны множества элементов для лучшего управления медийным контентом, такие теги как: <audio>, <video>, <canvas> и др.  Этот стандарт стал новым глотком свежего воздуха, направленного на структуризацию веб-сайтов и улучшение производительности веб-приложений. В настоящее время стандарт является общепризнанным  и если Вы только совершаете свои первые шаги в веб-разработку, то обязательно стоит ознакомиться с HTML5.

Canvas (дословно "холст") - html-элемент, предназначенный для создания растрового двухмерного изображения при помощи использования JavaScript. Начало координат находится в верхнем левом углу. В настоящее время поддержка браузерами внушает доверие:

При помощи WebGL мы можем создавать качественную 3D графику и использовать при этом весь потенциал и возможности видеокарты ПК.  Canvas используется повсеместно для отображения графиков, создания браузерных игр, встраивания сложных видео-элементов в страницу и это далеко не все возможности этой технологии.

В этой статье я хочу рассмотреть популярный и достаточно развитый бесплатный framework - Phaser. Framework позиционирует себя как платформу для создания браузерных 2D игр. Официальный сайт. Первый стабильный релиз состоялся в 2016г. Это была версия 2.6.5, которая в настоящее время является очень популярной, хорошо задокументированной, так же на официальном сайте сотни примеров использования Framework. О минусах и плюсах можно говорить долго, но в настоящее время самым большим минусом версии 2.x.x является полное отсутствие поддержки  развития, так как разработчики сосредоточены на исправлении ошибок и добавлении нового функционала в версию 3.x.x. Phaser вобрал в себя все самое лучшее из доступных технологий. Он поддерживает WebGL рендеринг, что позволяет ему добиваться потрясающей производительности, использует графический движок Pixi.js и поддерживает три вида физики:

  1. Arcade - идеально подходит для создания инди-игр, позволяет обрабатывать коллизии, управлять гравитацией, контролировать ускорение, вес тел и многое другое;
  2. Impact - схожий с Arcade движок, позволяющий создавать космические шутеры;
  3. MatterJs - материальный физический движок, основанный на идее взаимодействия тел при помощи связей (ниточек), подходит для создания игр с сложной физической логикой и взаимодействием тел.

Настоящий фурор среди разработчиков в 2018г. произвела версия 3.x.x, которая показала нам новый уровень качества и удобства создания браузерных игр. Новая версия позволяет писать качественный, производительный, объектно-ореинтированный код на JavaScript или TypeScript. Я предлагаю Вам начать изучение Phaser именно с последней версии в ветке 3.x, так как версия 2.x совсем уйдет на покой. Помимо полной переработки структуры frameword, разрабочики полностью избавились от Pixi.js и добавили множество полезных инструментов для разработки. Полная поддержка atlas, sprite, bones animation, tile. Для интергации этих технологий я советую использовать следующие программы:

  1. Atlas, sprite - объединение изображений в одно и создание файла-разметки формата json. Это позволяет значительно сократить размер файлов. Для создания атласа я предпочитаю использовать условно бесплатную программу TexturePacker. На сайте Вы найдете инструкцию по интеграции и превью возможностей;
  2. Bones - анимация персонажей не при помощи смены слайдов(очень большой объем данных), а при помощи трансформации исходного изображения. В программе Dragon Bones работа делится на два этапа - создание костей и создание анимации. Входной порог достаточно небольшой, за пару дней можно изучить технологию и начать ее использовать. Это позволяет создавать плавную и красивую анимацию игровых элементов и персонажей;
  3. Tile - создание карты, состоящей из элементов фиксированного размера (квадратов). Каждый из квадратов может содержать какой-то игровой спрайт. Такая технология описания карты игры существенно сокращает время разработки и делает процесс создания карт более простым и удобным. Для работы с тайлами предлагаю использовать бесплатный редактор тайлов Tiled.

Phaser3 отлично задокументирован, имеет множество примеров и очень качественную архитектуру. Последние новости о версии 3.x Вы можете найти здесь. Я предпочитаю версию TypeScript, но временами приходится мириться с не особо хорошей поддержкой, так как разрабочики не успеваю описывать в заголовочных файлах все новые функции, думаю со временем эта неразбериха пройдет. Заголовочные файлы можно скачать с официального репозитория проекта здесь

Именно для тебя я уже приготовил стартовый шаблон и написал несколько игр, среди которых:

  1. Nyan Cat Game - игра про сумасшедшую кошку, которая летит в космосе, пуская радугу и ловит пончики. Играть | GitHub;
  2. Tom And Jerry - старая игра с мобильных телефонах снова на Ваших устройствах! Помоги Джери украсть всю еду с холодильника и не позволь Тому ему помешать! Игра поддерживается на телефонах и ПК. Играть | GitHub
  3. Sonic The Hedgehog - моя версия старого-доброго Соника с SegaMegaDrive. Карты уровней созданы в Tiled, исходные файл доступны на GitHub. Играть | GitHub

Начинайте изучать Phaser3 прямо сейчас!
Для того чтобы приступить к разработке склонируйте стартовый шаблон и разверните окружение. Это не должно занять у Вас более 10 минут.

Репозиторий с стартовым шаблоном TypeScript - https://github.com/CatOstrovsky/phaser3-ts-template

В репозитории Вы найдете краткую инструкцию по началу работы с Phaser3 и несколько полезных ссылок для начинающего разработчика.  При успешном запуске сервера Вы увидите в своем браузере по адресу http://localhost:3000 следующее:

В следующих статьях мы более подробно рассмотрим особенности языка TypeScript, проведем сравнение с ActionScript и JavaScript, рассмотрим правильную архитектуру проекта, а так же создадим свою первую браузерную игру!