Игра на Phaser 3. Часть 1 - настройка среды разработки

12/06/2018
Konstantin Ostrovsky

Знакомство с Phaser

Phaser - это Open Sourse(бесплатный) JavaScript framework для создания 2D игр. Эта библиотека собрала в себе все самое лучшее от Matter.js, PixiJS и других библиотек. В движке уже реализована физика, рендер, работа с аудио, спрайты, тайлы, атласы и прочие, необходимые для комфортного создания игр, вещи.

Framework поддерживает работу в режиме WebGL, что способствует высокой производительности игр, так как они будут работать на видеокарте. Но так же возможна работа без использования WebGL.

Нам доступны три типа физики:

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

Все манипуляции с графикой производятся в специальном HTML5 элементе - <canvas>

Создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры и др.

htmlbook

Почему Phaser 3? Как же 2-я версия?

Phaser 3 полон свежих оптимальных и производительных решений для разработки игр. Теперь мы можем собирать свои проекты на Webpack и забыть про "танцы с бубном" Grunt. Несмотря на то, что не вышла еще даже beta-версия Phaser 3, он вполне стабилен и хорошо задокументирован, разрабочики активно занимаются его развитием, это можно заметить по количеству коммитов на GitHub.

Commits statistic Phaser 3

Разрабочики достаточно подробно описали историю эволюции движка и планы на дальнейшее развитие на этой странице.

Вот часть вступления в свободном переводе:

Справедливости ради стоит сказать, что у Phaser 3 был болезненный процесс гестации. Некоторые из вас могут помнить, когда это называлось «Лазер». Некоторые могут помнить старые демонстрации демо-шоу, демонстрирующие световые эффекты. И вы можете быть совершенно смущены тем, что все это значит, и где все это стоит сегодня...

Phaser Developer's

От слов к делу.

Для работы нам понадобится NodeJs и следующие npm-пакеты:

Первым делом, инициализируем проект в директории. Для этого открваем через терминал папку, где Вы храните свои проекты. Создаем новую пустую директорию "phaser-pong" и переходим в нее.

$ cd Documents/ #Переход в папку Documents
$ mkdir phaser-pong #Создание папки phaser-pong
$ cd phaser-pong #Переход в папку phaser-pong

Клонируем готовый webpack-шаблон для создания приложений phaser.

$ git clone https://github.com/photonstorm/phaser3-project-template

Вы можете переименовать клонированную директорию. Назовем ее "phaser-pong".

Переходим в папку "phaser-pong" и инициализируем npm с установкой пакетов и их зависимостей.

$ cd phaser-pong/
$ npm i

Этот шаблон использует webpack для сборки и webpack-http-server для запуска сервера. Подробнее с описанием Вы можете ознакомиться на странице проекта на GitHub

Сборка и запуск сервера выполняется при помощи команды npm run start. Давайте подробнее разберем этот скрипт. Он находится в файле package.json в блоке scripts.

...
"scripts": {
    "build": "webpack",
    "start": "npm run build && webpack-dev-server --port=8000"
  },
...
  1. npm run build - выполнения скрипта build, описаного в файле package.json;

  2. webpack - запуск сборщика webpack, для компиляции модульных скриптов и объединения всего JavaScript кода в один файл. Чуть позже мы доработаем эту команду, добавив в него отслеживание изменения файлов и транляцией ES6 в ES5, чтобы наша игра работала даже в "любимом" IE.
  3. webpack-dev-server --port=8000 - запуск HTTP сервера. А аргумент --port=8000, говорит нам, что сервер будет запущен на порт 8000. Следовательно будет доступен по адресу http://localhost:8000

Попробуем запустить!

$ npm run start

В результате выполнения этой команды файлы приложения будут скомпилированы и сервер запущен на порт 8000.

Чтобы убедиться, что Вы все сделали правильно, откройте http://localhost:8000.

Превью базового шаблона Phaser 3

Давайте немного улучшим сборщик webpack, добавив в него babel-loader и отслежвание изменения файлов.

Установим необходимые пакеты:

npm install babel-loader babel-core babel-preset-env

Добавляем новый loader в файл конфигурации webpack - webpack.config.js. В блок module добавил loader 'babel-loader'. В итоге блок module в файле webpack.config.js будет выглядеть так:

"module": {
        rules: [
        {
            test: [ /\.vert$/, /\.frag$/ ],
            use: 'raw-loader'
        },
        {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env']
                }
            }
        }
        ]
    },

Отлично! Теперь можно использовать стрелочные функции, let, Symbols и прочие плюшки ES6, о которых подробнее можно почитать тут.

Добавим параметр для того, чтобы webpack следил за изменением файлов. Это нужно для того, чтобы вручную не запускать сборку после каждого редактирования файла. Сборщик будет запускаться автоматически, после того как Вы отредактируете и сохраните файл. Для этого открываем файл package.json и в блоке scripts добавляем webpack новый параметр --watch.

В итоге у Вас должен получиться следующий блок scripts:

"scripts": {
    "build": "webpack --watch",
    "start": "webpack-dev-server --port=8000 && npm run build "
  },

Все! Наша среда разработки идеально настроена!

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