Пока мне не удалось найти обновленное руководство по настройке базового проекта Phaser 3 с использованием Ionic, которое также позволило бы мне создать его как мобильное приложение с помощью Cordova.

В этом посте кратко излагается несколько существующих руководств, найденных в Интернете.

Установить Ionic

Сначала мы установим Ionic как глобальный модуль Node.js:

> npm install -g ionic

После установки Ionic мы можем создать пустой проект. Когда вас спросят, какую платформу JavaScript использовать в нашем новом приложении, мы выберем Angular.

> ionic start my-project blank
Pick a framework! 😁
Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for the
--type option.
? Framework: (Use arrow keys)
❯ Angular | https://angular.io
  React   | https://reactjs.org

Теперь мы можем обслуживать пустой проект с помощью следующей команды:

> ionic serve

В вашем браузере автоматически откроется окно, указывающее на http://localhost:8100.

Установить Phaser 3

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

> npm install phaser

Если теперь мы попытаемся перезагрузить страницу, обслуживаемую Ionic, появится следующая ошибка:

[ng] ERROR in node_modules/phaser/types/phaser.d.ts:7744:54 - error TS2304: Cannot find name 'ActiveXObject'.

Эту проблему легко решить, внеся следующие изменения в наш tsconfig.json файл:

  • Мы добавим "scripthost" в массив "lib".
  • Мы установим "allowSyntheticDefaultImports" на true.

В результате файл tsconfig.json может выглядеть примерно так:

Увы, после перезагрузки вы увидите очередную ошибку!

ReferenceError: global is not defined

Вы можете решить эту проблему, добавив следующий фрагмент в тег <head> нашего index.html:

Этих двух изменений достаточно, чтобы загрузить пустую страницу проекта без каких-либо ошибок. Ура!

Простой компонент Phaser

Теперь мы изменим домашний компонент Angular, чтобы инициализировать простую пустую игру Phaser 3.

Мы можем начать с удаления содержимого home.page.html по умолчанию и оставить его так:

Div с id game будет контейнером нашей игры.

Мы будем использовать следующий код в нашем home.page.ts файле:

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

Встраивание игры в приложение для iOS / Android

Чтобы в конечном итоге создать и запустить игру как приложение для Android (или iOS), мы будем использовать встроенный плагин Cordova от Ionic:

> ionic cordova platform add android
> ionic cordova run android

Удачи!