Настройка проекта

Для наброска или однофайлового демо достаточно фрагмента из раздела установка. Для настоящего проекта несколько решений сэкономят вам недели.

Сборщик

Vite — рекомендуемая отправная точка: Phaser 4 поставляется в формате ESM, а Vite обрабатывает URL ресурсов и HMR без настройки.

npm create vite@latest my-game -- --template vanilla-ts
cd my-game
npm install phaser

Структура каталогов

Структура, которая масштабируется от джем-игры до выпущенного проекта:

src/
  main.ts            ← создаёт Game и регистрирует сцены
  scenes/
    BootScene.ts     ← предзагружает ресурсы глобальной полосы загрузки
    PreloadScene.ts  ← предзагружает всё остальное, показывает прогресс
    TitleScene.ts
    GameScene.ts
  objects/           ← переиспользуемые подклассы GameObject
  systems/           ← игровая логика, не зависящая от фреймворка
  data/              ← типизированные манифесты ресурсов, таблицы конфигурации
public/
  assets/            ← изображения, аудио, тайловые карты, атласы

По возможности держите systems/ свободным от импортов Phaser — чистую логику проще тестировать.

TypeScript

Phaser 4 поставляется со строгими типами. Используйте их:

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "skipLibCheck": true
  }
}

Нюансы горячей перезагрузки

HMR в Vite работает для всего, что находится вне запущенной сцены. Чтобы подхватить изменения внутри сцены, перезапустите её через this.scene.restart() или используйте предназначенную только для разработки привязку клавиши, делающую то же самое.