Быстрое современное начало с Phaser

Если вы хотите быстро начать создавать игры с Phaser3 и избавиться от необходимости выяснять, как настроить локальный веб-сервер, эта статья для вас. Даже если вы новичок в создании игр или новичок в веб-разработке, либо просто хотите быстро начать, потому что у вас есть другие дела, то лучшее решение — использовать Parcel - молниеносно быстрый сборщик веб-приложений без настройки. Если вы не понимаете зачем вам что-то вроде Parcel, Webpack или Rollup, то прочитайте статью Начало работы с Phaser 3.

Если вы знакомы с npm вы можете просто клонировать репозиторий phaser3-parcel-template и использовать обычные заклинания npm :). Все это займет у вас меньше 1 минуты. В противном случае следуйте инструкциям описанным ниже. Сначала вам нужно клонировать репозиторий. Перейдите в папку, где будет находиться ваш проект и введите команду:

git clone https://github.com/ourcade/phaser3-parcel-template.git

Это создаст папку с именем phaser3-parcel-template. Вы можете указать другое имя папки следующим образом:

git clone https://github.com/ourcade/phaser3-parcel-template.git имя_моей_папки

Если вы не знакомы с git, вы можете просто загрузить копию проекта с Github. Далее нам нужно установить Node.js. Мы рекомендуем использовать Node Version Manager (nvm) вместо установки Node.js вручную. Установить его не сложно, при этом вы избавите себя от головной боли позже. Для Mac откройте терминал и введите:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

Для Linux откройте Терминал и введите:

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

Примечание: данная команда загружает конкретную версию nvm (в данном случае 0.35.3). Зайдите на страницу Github для определения последней версии.

Для Windows: Для Windows есть специальный установщик nvm-windows. Вы можете скачать установщик здесь. После установки мы можем проверить установку nvm на Mac или Linux с помощью команды:

nvm --version

Для проверки в Windows откройте powershell от имени администратора и введите:

nvm version

Теперь, когда у вас есть nvm, вам нужно установить Node.js. Для Mac или Linux:

nvm install node
nvm use node

Будет установлена последняя версия Node.js. Но вы можете указать и конкретную версию. Для Windows:

nvm install latest
nvm use latest

При желании вы можете указать другую версию вместо последней.

Убедитесь, что Node.js и npm установлены:

node --version
npm --version

Мы почти закончили! Последняя зависимость, которую вам нужно установить - это Parcel:

npm install -g parcel-bundler

т.к. модуль ставиться глобально, возможно вам потребуются права root:

sudo npm install -g parcel-bundler

Убедитесь, что Parcel установлен:

parcel --version

Теперь перейдите папку, в которую вы клонировали или скачали шаблон phaser3-parcel-template, и используйте команду:

npm install

Запустите сервер разработки:

npm run start

Откройте окно браузера и перейдите по адресу http://localhost:8000, чтобы увидеть работу Phaser3.

В этом шаблоне есть несколько полезных вещей, которые помогут при создании игр в Phaser3. Самое главное, что он предполагает использование современного JavaScript и организацию вашего кода в нескольких файлах. Но вы также можете использовать этот шаблон с традиционным или старым JavaScript и поместить весь свой код в один гигантский файл. Многие примеры и учебные пособия Phaser, которые вы найдете в Интернете, не используют современный JavaScript или несколько файлов, но есть где применяются. Мы уверены, что у вас будет меньше проблем и ошибок при использовании современных передовых методов. Точка входа - место откуда стартует ваш игровой код, находится внутри файла main.js. Здесь происходит вся предварительная настройка до создания экземпляра Phaser Game, который используется для запуска вашей игровой логики. Есть один пример сцены с названием HelloWorldScene, расположенный в файле src/scenes/HelloWorldScene.js. Все ваши файлы кода должны быть размещены в папке в src. Например, вы можете создать новую сцену под названием MyScene.js в папке src/scenes, а затем добавить ее в список сцен в файл main.js следующем образом:

import Phaser from 'phaser'

import HelloWorldScene from './scenes/HelloWorldScene’
import MyScene from ‘./scenes/MyScene'

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 200 }
        }
    },
    scene: [HelloWorldScene, MyScene]
}

export default new Phaser.Game(config)

Но вы можете написать весь свой код в src/index.html.

Преимущество использования таких сборщиков как Parcel, Webpack или Rollup в том, что не сложно создать рабочую сборку. Рабочие файлы отличаются от ваших файлов разработки тем, что код будет уменьшен, сжат (с утерей не важной информации) и объединен. Таким образом, выши игроки будут загружать оптимизированный по размеру файл. Другие оптимизации, такие как разделение кода, могут получить, используя современный синтаксис import(). Производственные файлы помещаются в папку dist. Создайте рабочую сборку командой:

npm run build

Затем загрузите файлы из dist на веб-сервер или используйте что-нибудь воде Netlify или Firebase Hosting и поделитесь URL-адресом, чтобы продемонстрировать свою игру.

Если вы очень изысканы и хотите использовать типы в своем коде с помощью TypeScript или средства проверки типов, например Flow, вы можете это легко сделать благодаря Parcel:

  • Для TypeScript просто измените все .js файлы на файы .ts, и начните писать TypeScript.
  • Для Flow просто на первой строке ваших .js-файлов укажите: // @flow. В обоих случаях вы захотите установить дополнительные расширения в свой редактор кода, чтобы упростить себе жизнь. Дополнительную информацию можно найти на соответствующих сайтах.

Оригинал.