phaser-component-library v2.0.0

Phaser Component Library

Phaser component for Angular. The purpose of this library is to provide a simple way to integrate Phaser 3 into an Angular project in an agnostic fashion.

Requirements

• Phaser 3
• Angular

Installation & Integration

Install package:

$ npm install phaser-component-library --save

Integrate module:

import { PhaserModule } from 'phaser-component-library';

@NgModule({
  imports: [PhaserModule],
  ...
})
class AppModule {}

Usage

Template usage:

<phaser-component (gameReady)="onGameReady($event)" [gameConfig]="config" [Phaser]="phaser">
  <!-- Phaser's HTMLCanvasElement will reside here... -->
</phaser-component>

Component usage:

/**
 * Assume `Phaser` is attached to global context.
 */
export class AppComponent {
  /**
   * Phaser game configuration.
   */
  public readonly config = {
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight
    // If not adding scenes to Phaser dynamically, could just declare them here. Or maybe do both...
    //scene: [Some, Other, Scenes]
  };

  /**
   * Phaser API.
   */
  public readonly phaser = Phaser;

  /**
   * Instantiate application component.
   *
   * @param sceneService Scene service - this is an injectable Phaser.Scene sub-class.
   */
  public constructor(public sceneService: SceneService) { }

  /**
   * On game ready event handler. Fired once Phaser game is ready and Angular view is initialized.
   *
   * @param game Game instance.
   */
  public onGameReady(game): void {
    // Dynamically add to Phaser our scene that utilizes Angular DI.
    game.scene.add('Scene', this.sceneService, true);
  }
}

Please refer to the example AppComponent to see the full sample usage.

API

Inputs

gameConfig: any: Phaser configuration object. Note that the functionality of this Angular component will result in the parent property being ignored.

Phaser: any: Phaser API. If not provided, the component will attempt to locate the module on window.

Outputs

gameReady: any: Emits Phaser game instance once it's ready & Angular has initialized the view.

Lifecycle

ngOnInit(): void: Instantiates a Phaser.Game instance using configuration input.

ngAfterViewInit(): void Binds a single use handler for Phaser game's 'ready' event; appends Phaser canvas to DOM and emits Phaser game instance (via the gameReady output) when the game is 'ready'.

Development

Ensure dependecies are installed: npm install.

Run npm start for a dev server & automated testing. Navigate to http://localhost:4200/. The example app will automatically reload if you change any of the source files.

Run npm run build to build the project. The build artifacts will be stored in the dist/ directory.

Run npm test to execute the unit tests for the library (watch mode); use npm run test:single-run for a single run execution.

Run npm run e2e to execute the end-to-end tests for the example app.

Refer to the project's package.json scripts property for more commands.

License

Copyright 2018 © Tristan Bonsor