A boilerplate for integrating Phaser3 into an Angular8 project
GPL-3.0 License
ng new phaser-angular
npm i --save phaser
phaser.d.ts
from /node_modules/phaser/types/
and place it in your project folder.phaser.min.js
from /node_modules/phaser/dist/
and place it in your project's src/assets/
folder.phaser.min.js
file in your index.html
. <head>
...
<script src="assets/phaser.min.js"></script>
</head>
global
that Phaser requires. <script>
if (global === undefined) {
var global = window;
}
</script>
import Phaser from 'phaser';
tsconfig.json
, add 'allowSyntehticDefaultImports': truetsconfig.json
, update your libs
arry to include scripthost
"lib": [
"es2018",
"dom",
"scripthost"
]
class NewScene extends Phaser.Scene {
constructor() {
super({ key: 'new' });
}
preload() {
console.log('enter preload');
}
create() {
console.log('enter create');
}
}
@Component({
selector: 'app-sample',
templateUrl: './sample.component.html',
styleUrls: ['./sample.component.scss']
})
export class SampleComponent implements OnInit {
phaserGame: Phaser.Game;
config: Phaser.Types.Core.GameConfig;
constructor() {
this.config = {
type: Phaser.AUTO,
scene: [ NewScene ],
physics: {
default: 'arcade',
},
scale: {
mode: Phaser.Scale.FIT,
parent: 'gameContainer',
width: 800,
height: 600
}
};
}
ngOnInit() {
this.phaserGame = new Phaser.Game(this.config);
}
}