ang2-phaser

ang2-phaser

What Am I?!

An easy way to implement the Phaser game engine for Angular2 components.

Installation

First, make sure you include phaser in your node_modules. This will need to be linked to the phaser directive directly (example below).

npm install phaser --save
npm install ang2-phaser --save

Next, alter your systemjs.config.js to include the right pathing.
``` var map = { 'app': 'app', // 'dist', '@angular': 'node_modules/@angular', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 'rxjs': 'node_modules/rxjs', 'ang2-phaser': 'node_modules/ang2-phaser' };

var packages = { 'app': { main: 'main.js', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, 'ang2-phaser': { defaultExtension: 'js' } };

Then include the module in your scripts (including the functions and declarations).<br>
*Note that you do not have to include the main Phaser file; the directive will do it for you.  

import {Component} from '@angular/core'; import {NG2_PHASER} from '../../../node_modules/ang2-phaser/ng2phaser'

declare var __phaser:any;

@Component({ selector: 'my-app', templateUrl: './app/components/my-app/main.html', directives: [ NG2_PHASER ], template: <center> <h1>Angular2 - Phaser Demo</h1> <phaser (phaser)="phaserLink1($event)" ></phaser> </center> }) export class AppComponent {

//--------------- phaserLink1(phaser:any){

  var js = document.createElement("script");
      js.type = "text/javascript";
      js.src = '../../../node_modules/ang2-phaser/game_demos/phaser1_demo.js';
      document.body.appendChild(js);
      js.onload = function(){
         __phaser.game.init(phaser.container, this);
      }

} //---------------

//--------------- destroyGame(){ __phaser.destroyGame(function(){ // do something }); } //---------------

}

### What's up with the declare var __phaser:any;
So if you look at the demo game file (in game/phaser1_demo.js), you'll see that the whole thing is wrapped in the object __phaser.  Because of how everything is asynchronously loaded, the __phaser object makes it so that they all eventually line up .  

The best way to wrap you mind about it is to consider the pro/cons to this somewhat unorthodox approach.  Essentially each game file should be treated as an NES catridges - each one is essentially a self contained game.  The angular2 component is essentially the NES loader (minus the faulty pins that you have to blow into) and the browser is the NES itself.  In otherwords, it was built this way so that catridges can be interchanged easily and regularly.    

Now you could easily pack a small game into one game file, but for large scale games, it helps to break it out into scenes or parts.  Not only does this help keep the code managable, but lets you build/test individual game parts out.  For example, you could have an "intro", "start screen", "cutscene", "gameplay" then finally an "end screen".  Each one of these could have their own assets, load screens, etc, so you could build each one out individually and then just control the order that these files are played.  That's why this method exists - to help facilitate the creation of larger scale productions and test individual parts out before stiching it all together.

*While we're on the subject, I'd recommend leaving the __phaser object as-is if you're just starting out.  You can certainly add to it (it's expected that you do), but what's in there right now is the bare minimum required to get it to start/stop correctly.  While it doesn't *have* to be setup this way, I'd only recommend altering if you need to.

//-------------- __phaser = {

gameObj: null,  // REQUIRED

//-------------------
game:{

  //-------------------
  init(canvasEle, appComponent){
          // create game object
          var game = new Phaser.Game(800, 500, Phaser.AUTO, canvasEle, { preload: preload, create: create, update: update });
          var gameState = "preload"

          // assign it
          __phaser.gameObj = game;


        //-----------------------  PRELOAD 
        function preload() {
          // do stuff
        }
        //-----------------------

        //-----------------------  CREATE
        function create() {
          // do stuff
        }
        //-----------------------


        //-----------------------
        function loadStart() {
          // do stuff
        }
        //-----------------------

        //-----------------------
        function fileComplete(progress, cacheKey, success, totalLoaded, totalFiles) {
          // do stuff
        }
        //-----------------------

        //-----------------------
        function preloaderUpdate(){
          // do stuff
        }
        //-----------------------

        //-----------------------
        function loadComplete() {
          // do stuff
        }
        //-----------------------


        //-----------------------
        function startGame(){
          // do stuff
        }
        //-----------------------

        //-----------------------
        function gameplayUpdate(){
          // do stuff
        }
        //-----------------------


        //-----------------------  UPDATE
        function update() {
          // do stuff
        }
        //-----------------------



  },



},
//-------------------


//-------------------  REQUIRED
destroyGame(callback){
      this.gameObj.destroy();
      callback();
}
//-------------------

} //--------------

### Parameters

// if you want to use an alternate version of Phaser (instead of the most up to date version, which is 2.6.1, then you // can just just pass the file location in the setting -> file

// EXAMPLE: <phaser (phaser)="phaserLink1($event)" [settings]="{file:'node_modules/phaser/build/phaser.min.js'}">

### Version
1.0.1


### Live Demo 
Coming soon!

### Dependencies
- Phaser





License
----

MIT - go nuts y'all.