Phaser with Angular 7

This project was generated with Angular CLI version 7.3.2.

Phaser 3, Angular 7 and Phaser Component Library boilerplate code.

Requirements

Phaser
Phaser Component Library

Installation & Integration

Create an Angular 7 Project using angular cli.

$ ng new phaserangular

Now open the newly created project on your IDE.
Go to package.json and add this below lines within script object and save the file.

"phaser-typings": "curl -o src/phaser.d.ts https://raw.githubusercontent.com/photonstorm/phaser3-docs/master/typescript/phaser.d.ts",
"postinstall": "npm run phaser-typings"

Now install the dependency modules and add Phaser and Phaser component library. Type this below lines from your terminal

$ npm install
$ npm install phaser
$ npm install phaser-component-library

Open angular.json and add phaser.js file in the script section.

"scripts": [
  "node_modules/phaser/dist/phaser.js"
],

Now import the phaser module in your App module.

import { PhaserModule } from 'phaser-component-library';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    PhaserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In your tsconfig.json file add "scripthost" in lib array otherwise ActiveXObject error will encounter.

"lib": [
  "es2018",
  "dom",
  "scripthost"
]

Now generate a service to add a game scene. But make sure to inherit Phaser.Scene otherwise your app won't compile.

$ ng generate service gameplay --skipTests

export class GameplayService extends Phaser.Scene {
}

Add the phaser component in your html.

<phaser-component [gameConfig]="gameConfig" (gameReady)="onGameReady($event)"></phaser-component>

Initiate the game from your component.ts. For an example I am using app.component.ts.

export class AppComponent {
  title = 'Angular 7 working with Phaser JS';

  public readonly gameConfig: GameConfig = {
    title: 'Game Title',
    version: '1.0',
    type: Phaser.AUTO,
    width: 640,
    height: 480
  };

  public constructor(public mainScene: GameplayService) { }

  public onGameReady(game: Phaser.Game): void {
    game.scene.add('Scene', this.mainScene, true);
  }

}

a1147211355/phaser-angular-7

Phaser with Angular 7

Requirements

Installation & Integration