Пока мне не удалось найти обновленное руководство по настройке базового проекта 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
Удачи!