IonPhaser - Create More Advanced

Hybrid Mobile Apps for Modern Devices

A PLUGIN TO INTEGRATE PHASER & IONIC. GET THE

BEST OF BOTH WORLDS

IonPhaser is an Angular directive to Ionic Framework 1.x, is the best way to integrate Phaser
Framework to create more advanced hybrid mobile applications for modern devices using
Canvas/WebGL.

You can buy this product here.

TRY IT BEFORE YOU BUY

You can test this plugin and the examples directly with your device using Ionic View App.

1. Download Ionic View App.

2. Open the app on your device.
3. Click Preview an app in the options after login and enter the APP ID: fed7b239

FEATURES
This project is based on the following free starter template: Ionic Starter Template. Therefore
you can find the following features:

STYLES WITH SASS AND AUTOPREFIXER

By using Sass you can create your styles with superpowers! With Sass you have excellent
features like variables, nesting, mixins and more that you can use to improve your workflow
(write less code yay!).

Comparative SASS vs CSS

Using Autoprefixer you can write your styles without vendor prefixes. With only normal CSS
the styles are generated to support the browsers that you need (You can configure the
browsers to support easily).

Typically the vendors use these prefixes:

-webkit- (Chrome, newer versions of Opera.)

-moz- (Firefox)

-o- (Old versions of Opera)

-ms- (Internet Explorer)

Autoprefixer vs CSS (Default configuration)

BUILT WITH GULP

If you use the command ionic serve, the Gulp tasks will be automatically executed when you
modify the code. If you are working with a team using Git or other version control system, is
required that you execute gulp to update your local files.

Command to execute all task: gulp

Concat and Uglify Javascript files, using Source Maps to debug easily in the
browser

You can create your javascript files in the directory "./app/js/" and then with gulp all files
will be concatenated, minified and obfuscated.
Gulp command using CLI: gulp scripts
Using Source Maps, you can debug your code easily on the browser:

Apply Sass and Autoprefixer, Concat and Minify SCSS files, using Source Maps to
debug easily

You can modify the styles in the directory "./app/scss/".

Gulp command using CLI: gulp styles

Minify HTML

You can create the html files in the directory "./app/templates/". And then with gulp you
can minify each file.
Gulp command using CLI: gulp templates

Compress Images

You can compress your images automatically placing them in "./app/img".

Gulp command using CLI: gulp images

Download libraries and plugins with Bower and remove unnecesary files with
preen module

You can download libraries using Bower and indicate the path of necessary files. Later
you can execute gulp to remove unnecesary files and therefore reduce the size of the
application.

1. Download the library using CLI:

bower install ionic-datepicker --save

2. Indicate the path in bower.json file:

3. Execute the gulp command to remove other files: gulp lib
CREATE A "HELLO WORLD" WITH ION-PHASER

1. If is the first time you run the application, you must install npm dependencies using the
command npm install or npm i

2. Execute Gulp before running the application to update local files using the command
gulp
3. Execute ionic serve using the CLI to run the application on the browser.
4. Open the application on your favorite IDE, in my case is Visual Studio Code.

5. Create a new state using the $stateProvider service from AngularUI Router (already
included in Ionic 1.x) for the new view in "./app/js/app.js", for example using child
states with abstract states
.

6. Before creating the Controller and the template, We will create a service using Angular
Factory with one state of Phaser, for example in the path
"./app/js/games/helloWorld/play" (This location is just an example, you can place it
wherever you want).

Using Angular 1 snippets

You can copy the code below :)

(function(Phaser) {
'use strict';

angular
.module('App')
.factory('HelloWorldPlay', HelloWorldPlay);

//HelloWorldPlay.$inject = [''];
function HelloWorldPlay() {
var state = {
init: function() {
this.stage.backgroundColor = "#FF0000";
},
create: function() {

this.helloWorld = this.game.add.text(
 this.game.world.centerX,
this.game.world.centerY,
"Hello World", {
font: "60px Arial",
fill: "#ffffff"
}
);
this.helloWorld.anchor.set(0.5);
},
update: function() {
this.helloWorld.angle += 1;
}
};
return state;
}
})(Phaser);

7. Create a new Angular Controller (You need inject the service) for the new view, for
example in the path "./app/js/controllers/".
Using Angular 1 snippets
You can copy the code below :)

(function() {
'use strict';

angular
.module('App')
.controller('HelloWorldController', HelloWorldController);

HelloWorldController.$inject = ['$scope', 'HelloWorldPlay'];

function HelloWorldController($scope, HelloWorldPlay) {

$scope.game = {
width: "100%",
height: "100%",
renderer: Phaser.AUTO,
state: angular.copy(HelloWorldPlay)
};
}
})();

8. And then you can create the template in "./app/templates" using the Ion-Phaser
directive.

Using Ionic 1 snippets

And you can see our Hello World in the browser! Yay!
CHANGELOG
Added documentation with one example - 2016-06-01:
o "Hello World" example.

First Version with examples - 2016-04-05:

o Dragon with light effects from Game Mechanic Explorer.
o Draw in canvas (Like a signature).
o Star Wars animation (It isn't a video!).
o Photo with some filters (Like instagram).
o Tinder cards with effects.
o Flappy bird with Arcade physics and debug option to developers.
o Home and Menu screens with CSS animations using Animate.css.
o Phaser states using Angular Services (You can interact with the current state
of Phaser from Angular Controllers and viceversa!)