ang2-phaser - npm Package Compare versions

Comparing version 1.0.3 to 1.0.5

ng2-phaser/phaser.directive.js

@@ -28,2 +28,7 @@ "use strict";
         var allScripts = document.getElementsByTagName("script");
+        if (t.settings == undefined) {
+            t.settings = {
+                file: 'node_modules/phaser/build/phaser.min.js'
+            };
+        }
         for (var i = 0; i < allScripts.length; i++) {
@@ -78,6 +83,2 @@ var str = allScripts[i].src;
     ], ng2PhaserComponent.prototype, "settings", void 0);
-    __decorate([
-        core_1.Input(), 
-        __metadata('design:type', Object)
-    ], ng2PhaserComponent.prototype, "layout", void 0);
     ng2PhaserComponent = __decorate([
@@ -89,6 +90,5 @@ core_1.Component({
         }), 
-        __metadata('design:paramtypes', [(typeof (_a = typeof core_1.ElementRef !== 'undefined' && core_1.ElementRef) === 'function' && _a) || Object])
+        __metadata('design:paramtypes', [core_1.ElementRef])
     ], ng2PhaserComponent);
     return ng2PhaserComponent;
-    var _a;
 }());
@@ -95,0 +95,0 @@ exports.ng2PhaserComponent = ng2PhaserComponent;

ng2-phaser/phaser.directive.ts

@@ -19,4 +19,4 @@ // core
   @Input() settings:any;
-  @Input() layout:any;
 
+
    //--------------
@@ -33,2 +33,9 @@ constructor(private el: ElementRef) {
     var allScripts = document.getElementsByTagName("script");
+
+    if(t.settings == undefined){
+      t.settings = {
+        file: 'node_modules/phaser/build/phaser.min.js'
+      }
+    }
+
     for(var i = 0; i < allScripts.length; i++){
@@ -35,0 +42,0 @@ var str = allScripts[i].src;

package.json

 {
   "name": "ang2-phaser",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "A Phaser module built for Angular 2 components.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -1,33 +0,184 @@
-# ang2-parallax
+# ang2-phaser
 
 ### What Am I?!
-An easy way to implement parallax scrolling for Angular2 components.  (There's also an [Angular 1.x](https://github.com/allenRoyston/ng-parallax "Angular 1.x") directive for those that need it.)
-  - No dependencies
-  - Responsive
-  - Simple
-  - Works for mobile!  (Well, iPhones at least - haven't tested on an Android yet)
-  - Tiny
+An easy way to implement the Phaser game engine for Angular2 components.
 
 ### Installation
-Include the module in your scripts.<br>
+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
+```
+<br>
+Next, alter your systemjs.config.js to include the right pathing.<br>
+```
+  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' }
+  };
 
-import { Component } from '@angular/core';
-import { ng2Parallax  } from '<pathTo>/ng2-parallax/parallax.directive';
+```
+Then include the module in your scripts (including the functions and declarations).<br>
+```
 
+import {Component} from '@angular/core';
+import {NG2_PHASER}  from '../../../node_modules/ang2-phaser/ng2phaser'
+
+declare var __phaser:any;
+
 @Component({
-  selector: 'my-component',
-  directives: [ng2Parallax],
-  template:`
-  
-  <div style='width: 200; height: 200px'>
-    <div parallax speed="5" src="path/to/image.jpg"></div>
-  </div>
-  
-  `
+    selector: 'my-app',
+    templateUrl: './app/components/my-app/main.html',
+    directives: [ NG2_PHASER ],
+   template: `
+     <center>
+       <h1>Angular2 - Phaser Demo</h1>
+       <phaser (phaser)="phaserLink1($event)" [settings]="{file:'node_modules/phaser/build/phaser.min.js'}"></phaser>
+     </center>
+   `
 })
-export class componentName { }
+export class AppComponent {
 
+
+   //---------------
+   phaserLink1(phaser:any){
+
+      var js = document.createElement("script");
+          js.type = "text/javascript";
+          js.src = '../../../node_modules/ang2-phaser/game/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();
+    }
+    //-------------------
+
+
+}
+//--------------
+```
+
 ### Version
@@ -38,11 +189,10 @@ 1.0.0
 ### Live Demo 
-[Check it out](https://ng2-parallax-demo.herokuapp.com/ "ng2 Parallax Demo")
+Coming soon!
 
-
 ### Dependencies
-- None!
+- Phaser
 
 ### NPM / Bower
 ```
-npm install ang2-parallax --save-dev
+npm install ang2-phaser --save
 ```
@@ -53,9 +203,2 @@
 
-### Parameters
-```
-speed = 0 to xx (the higher the number, the slower the effect).  This part requires some tinkering since different image sizes will respond differently.
-
-src = path to image
-```
-
 License
@@ -62,0 +205,0 @@ ----

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1060636

increased by0.48%

Lines of code

3508

increased by0.11%

Number of lines in readme file

206

increased by226.98%

No dependency changes