Если вы хотите быстро начать создавать игры с 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:
.js
файлы на файы .ts
, и начните писать TypeScript.// @flow
.
В обоих случаях вы захотите установить дополнительные расширения в свой редактор кода, чтобы упростить себе жизнь. Дополнительную информацию можно найти на соответствующих сайтах.