Basics of Page Component: Ionic 2

In this video tutorial we shall learn some basics of a page component.

Topics Covered
1. Decorators – little bit
2. Class
3. Template File – ionic list items, For loop in ionic template.
4. Variables in Ionic – data type(number, string, Array, any)
5. Importing libraries and using it in our project.
6. Setting home page of our project.

Related Read:
Project Structure: Ionic 2

Basics of Page Component: Ionic 2



YouTube Link: http://www.youtube.com/watch?v=Tb4k00ALHeA [Watch the Video In Full Screen.]



In this tutorial we are using a blank template and setting home.html as our home page.

inside src/app/app.component.ts file
We import the HomePage page

import { HomePage } from '../pages/home/home';

next inside the class definition we assign this HomePage as root file for our application

rootPage = HomePage;

Full Source Code src/app/app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
 
import { HomePage } from '../pages/home/home';
 
 
@Component({
  template: `<ion -nav [root]="rootPage"></ion>`
})
export class MyApp {
  rootPage = HomePage;
 
  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
}

Important: Do NOT forget to import all your classes in app.module.ts file, also specify its class name inside declarations and entryComponents section.

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
 
@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: []
})
export class AppModule {}

Now lets take a look at our HomePage component, which is present inside pages directory and Home folder
src/pages/home/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {
  }
 
}

Here we have imported two important library files. Component is used to configure the decorator and NavController is used for navigation purposes. In this tutorial we’re not using Navigation, but we’ll make use of it in our next video tutorial.

Decorators
There are 3 types on decorators:
1. Component
2. Pipe
3. Directive

I’ll explain each one of them separately in other videos.

Component
In today’s tutorial we’ve a component and it has a selector and a templateUrl. Selector name is used to inject an element or an attribute into the DOM. TemplateUrl tells the class about its associated template file. Components(Decorative) are placed just above the class definition.

Class
A class is a blueprint of an object. This is where we write our logic. It’ll usually have some properties(public or private or protected) and some methods.

In Ionic 2 class, you might have seen export keyword – which means we can import this file in some other class file and make use of its service or output.

variables
In TypeScript variables are typed – which means, variables have data type.
var1: any; Means variable var1 can take value of any data type.
var1: string; Here var1 can be assigned with string value only.
var1: number; as you might have already guessed, var1 takes number value.
var1: Array< {}>; var1 takes an array as its value.
var1: boolean; var1 takes value true or false.

Wrong initializations
var1: number = ‘Satish’;
var1: string = 1;

Correct initialization
var1: number = 1;
var1: string = ‘Satish’;

src/pages/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
companies: Array< {name: string, code: number}>;
  constructor(public navCtrl: NavController) {
    this.companies = [
      {name: 'Microsoft', code: 1},
      {name: 'Apple', code: 2},
      {name: 'Google', code: 3},
      {name: 'Oracle', code: 4},
      {name: 'IBM', code: 5}
    ];
  }
}

Here we have an array called companies – which has a list of company names like Microsoft, Apple, Google, Oracle, IBM. Each of this is stored as an individual element inside the array.

Using ngFor loop we can iterate through this array and display the company names.

*ngFor loop

< p *ngFor="let company of companies">
< /p>

In Ionic 2, we make use of *ngFor for for loop. We declare a new variable company and reference individual elements of the array present inside companies array.

src/pages/home/home.html

< ion-list>
  < ion-item *ngFor="let company of companies">
    {{company.name}}
  < /ion-item>
< /ion-list>

Here I’m making use of ion-list tag and ion-item tags to display the company names.

ion-list-no-lines

If we want to remove the default lines which come along with the ion-list items then we can add no-lines styling to ion-list tag.

< ion-list no-lines>
  < ion-item *ngFor="let company of companies">
    {{company.name}}
  < /ion-item>
< /ion-list>

In next video tutorial lets learn how to navigate to other pages using Ionic 2 routing.

Project Structure: Ionic 2

Before we move forward with coding, it’s important to know some of the files and folders present inside our ionic 2 project. Since you’re a beginner you might find this video to be confusing and fast paced. But let me assure you, this won’t affect your learning of Ionic 2. How much ever time you spend in understanding the anatomy of an ionic 2 cordova project, you won’t understand it properly until we start coding and utilizing these files and folders for our application needs.

I would advice you to take down whatever you understand in this video in a note-book and keep it for your future reference. It would be handy soon.

anatomy of ionic2 cordova project

hooks: this is not for beginners, so will skip that for now.
node_modules: This is where core libraries like angular2, ionic2, array manipulation, regEx etc are present. We import these libraries in our ionic 2 project and utilize their services.
plugins: Here Ionic 2 project specific cordova plugins are stored. There are many plugins which ionic-native provides which we can make use of for our application needs. For example: If you need to use your devices camera functionality, there is a cordova plugin for that which you can use in your ionic 2 project.
resources: Here we store icon and splashscreen files of our app.
src: is where we can find raw, uncompiled code. Inside src we have our page components(src/pages), application root components(src/app), static files(src/assets) etc, which gets transpiled, compiled, minified and stored inside www folder during the build process. If you edit any file inside www folder, it’ll simply be overwritten during the build process.

Anatomy of an Ionic 2 Project



YouTube Link: http://www.youtube.com/watch?v=JpB3FafevH4 [Watch the Video In Full Screen.]



src/assets: We store static resource files in this folder. Example: Image files which we use for our project.

src/pages: For every page you create you’ll add another folder in this directory. For example, if you want to create a login page, you’ll need to create a folder called login(or any other unique name) and then store the login template, login class definition file and login style definition file inside that folder. Ionic CLI can be used to automate this process and I’ll show you how to do it in upcoming video tutorials.

src/theme: This folder has style definition which is applicable for the entire application. We can simply change the value of some variables and customize the look and feel of our application. This will also be explained in a separate video tutorial in coming days.

src/app: This folder is where the ‘root components’ of our application are located. main.dev.ts and main.prod.ts files are responsible for the bootstrapping process of the application. main.dev.ts is active in development mode and main.prod.ts should be used in production environment.

src/app/app.module.ts is the entry point for the app.

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
 
@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: []
})
export class AppModule {}

This essentially controls the work flow of rest of the application.

Using NgModule of angular core library we manage the modules in our ionic 2 applications. All the components and data services we create must be imported in this file and its class name must be specified inside the declarations and entryComponents section. If we have any data service providers we must specify it inside providers block. This file also points to the first component of our Ionic 2 application i.e., MyApp class of src/app/app.component.ts

src/app/app.component.ts is the first component of Ionic 2 application

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
 
import { TabsPage } from '../pages/tabs/tabs';
 
 
@Component({
  template: `<ion -nav [root]="rootPage"></ion>`
})
export class MyApp {
  rootPage = TabsPage;
 
  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
}

This is the first component which gets loaded in our application. It’s simply an empty shell for other components to load into.

One important thing to note here is the rootPage. Since this is a project which uses tabs template, it has automatically assigned the rootPage to the TabsPage present in our src/pages/tabs/tabs.ts page.

src/pages/tabs/tabs.ts component

import { Component } from '@angular/core';
 
import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
 
@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = HomePage;
  tab2Root: any = AboutPage;
  tab3Root: any = ContactPage;
 
  constructor() {
 
  }
}

Here we are importing 3 pages HomePage, AboutPage and ContactPage and then assigning it to each tab.

src/pages/tabs/tabs.html template file

<ion -tabs>
  </ion><ion -tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion>
  <ion -tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion>
  <ion -tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion>

Which is then assigned as root pages on each tab. This is to maintain the sanity of navigation history. We’ll discuss about navigation in Ionic 2 in a separate video shortly.

src/index.html

< !DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8"/>
  <title>Ionic App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, 
        minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <meta name="format-detection" content="telephone=no"/>
  <meta name="msapplication-tap-highlight" content="no"/>
 
  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico"/>
  <link rel="manifest" href="manifest.json"/>
  <meta name="theme-color" content="#4e8ef7"/>
 
  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>
 
  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.log('Error', err));
    }
  -->
 
  <link href="build/main.css" rel="stylesheet"/>
 
</head>
<body>
 
  <!-- Ionic's root component and where the app will load -->
  <ion -app></ion>
 
  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>
 
  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>
 
</body>
</html>

This file has some minimal configurations and links to some JavaScript library files. Ionic 2 application looks for ion-app tag present inside the body of index.html to kick-start the visuals of the project.

config.xml (located at the root of the project)

< ?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.technotip.radio" version="0.0.1" 
        xmlns="http://www.w3.org/ns/widgets" 
        xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>Radio</name>
  <description>Internet radio streaming live ..</description>
  <author email="my@mail.com" href="http://technotip.com/">SATISH</author>
 .
 .
 .
 .
</widget>

Using this file we can configure the display mode and other such things of the device for our application. We can also set the app name, description. author email id, name and the URL. We can set the id of the application which’ll be shown in the URL of the playstore once your app has been uploaded to the playstore. We have a radio application in the playstore which has an id com.technotip.radio You can visit our Radio Application and check the URL.

package.json (located at the root of our application)
This file has the list of our dependencies and plugins our application is using. It gets updated automatically when we install new plugins.

Important: Keep in mind that, whenever you are using any page component or data services in any of your project files, make sure to import it first. Also make sure to register its existence by importing it in src/app/app.module.ts file and listing it in specific sections which it belongs to.

Ionic 2 Starter Templates

Ionic 2 comes with some starter templates which saves us a lot of time and effort.

Video Content
Today lets learn:
1. How to install ionic framework via ionic CLI (Command Line Interface) utility.
2. Install ionic 2 templates such as blank, tutorial/sidemenu, tabs(default ionic 2 template).
3. Run each project and check how each template looks.

Related Read:
Getting Started With IONIC APP
(Go through above link without fail)

Ionic Logo

Requirement
Ionic CLI (Command Line Interface) utility.
Node.js version 6 or higher: Download Nodejs
XCode for iOS: Cordova iOS Platform Guide
Android Studio for Windows: Cordova Android Platform Guide

Related Read:
Node.js Video Tutorial List

Troubleshooting
If you already had older version of Ionic and cordova installed, then make sure to uninstall them first

npm uninstall -g ionic cordova

Then make sure you’ve latest version of node.js installed.

Now install ionic and cordova globally using by logging in as a root user / system admin

npm install -g ionic cordova

My System Info, for this tutorial

ionic info

Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.0
Gulp local:
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Windows 10
Node Version: v6.7.0

Starting IONIC 2 Project



YouTube Link: http://www.youtube.com/watch?v=AcEY_bS37SU [Watch the Video In Full Screen.]



Installing CLI
Open command prompt and type the following command to install latest Ionic CLI

npm install -g ionic cordova

Ionic 2 apps are created and developed primarily through the Ionic CLI utility and use cordova to build and deploy as a native app.

Remember, Ionic CLI and Ionic framework are two different things. Ionic CLI is a utility which provides bunch of tools through the command line to help create and manage your Ionic project.

Important: The Ionic CLI will handle downloading the actual Ionic framework onto your machine for each project you create.

Ionic Starter templates

List of templates

ionic start -l

OR

ionic start -list

Output
blank — A blank starter project for Ionic.
complex-list — A complex list starter template.
maps — An Ionic starter project using Google Maps and a side menu.
salesforce — A starter project for Ionic and Salesforce.
sidemenu — A starting project for Ionic using a side menu with navigation in the content area.
tabs — A starting project for Ionic using a simple tabbed interface.

But to my surprise some of these templates aren’t working. Ionic team might fix these or remove some of the templates in future release of ionic 2 framework. In this tutorial I’m showing blank, tutorial/sidemenu and tabs templates.

Note: Ionic uses tabs template as its default template.

Starting Ionic Project
ionic start is the command to start an Ionic project, followed by project name, followed by template name(if not specified, tabs template will be installed), followed by version of Ionic framework to be installed.

Note: Here myApp1, myApp2, myApp3 are my project names.
myApp1 has blank template.
myApp2 has tutorial or sidemenu template.
myApp3 has tabs template.

Blank Template

ionic start myApp1 blank --v2

Tutorial or Side Menu Template

ionic start myApp2 tutorial --v2

OR

ionic start myApp2 sidemenu --v2

Tabs Template

ionic start myApp3 tabs --v2

OR

ionic start myApp3 --v2

Launching Project in Web Browser
Get into the projects folder before using the command ionic serve or else it’ll through errors:

C:\ionic2>ionic serve

Couldn’t find ionic.config.json file. Are you in an Ionic project?

So first get into project folder and then run the project

C:\ionic2>cd myApp1
C:\ionic2\myApp1>ionic serve -l

We can see how our project looks via web browser. With labs feature we can see how our project looks on each platform – iOS, android and Windows.

ionic serve -l

-l is supplied to ionic serve command to invoke labs feature.

Progress Bar: Phaser

Today lets learn to make progress bar to indicate game loading time to the user. This keeps the user informed about the percentage of assets being loaded and the wait time – this method has proved to dramatically increase the user retention rate on the page, even though it simply is an indicator of the game being loaded. Simply showing a continuously rotating circular image would turn off most users after some time. Progress bars on the other hand have always been well received – I’m telling this after digging into my analytics data.

phaser-game-progress-bar

Video Tutorial List At One Place:
Phaser Video Tutorial List: Game Framework

In this video you’ll learn:
1. Adding progress bar and making it progress in coordination with the game assets being loaded.
2. Shifting/swapping the states.
3. Adding audio assets to your game.
4. Best methods to add compressed and uncompressed/raw audio file formats.

Progress Bar While Loading Game Assets: Phaser


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=Q08CXexdn7c [Watch the Video In Full Screen.]



HTML File – index.html

< !DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="minimal-ui"/>
 
<style>
    body{
        padding: 0px;
        margin: 0px;  
    }
</style>
 
<script type="text/javascript" src="javascripts/library/phaser.js">
</script>
<script type="text/javascript" src="javascripts/states/Boot.js">
</script>
<script type="text/javascript" src="javascripts/states/Preloader.js">
</script>
<script type="text/javascript" src="javascripts/states/Game.js">
</script>
</head>
<body>
 
<script type="text/javascript" src="javascripts/Main.js">
</script>
</body>
</html>

To know about the meta tags and style code of above html file source code please watch previous day video tutorial Configure Global Variables: Phaser

We’ve added Main.js file before closing body tag and have added various State Javascript files after adding Phaser library inside header of html page.

Javascript File – Main.js File Source code

var game = new Phaser.Game(400, 400, Phaser.AUTO);
    game.state.add('Boot', Technotip.Boot);
    game.state.add('Preloader', Technotip.Preloader);
    game.state.add('Game', Technotip.Game);
    game.state.start('Boot');

Here we create a global game object which is an instance of Phaser.Game() and let Phaser decide the game renderer – ‘WebGL or Canvas’ by using Phaser.AUTO property. Next we add states Boot, Preloader, Game and then immediately start the Boot State.

Phaser-game-configurations

Related Read:
1. State Manager: Phaser
2. Managing Multiple States: Phaser

Boot State Source Code – Boot.js

var Technotip = {};
 
Technotip.Boot = function(game){
};
 
Technotip.Boot.prototype = {
   preload: function() {
       this.load.image('preloadbar', '/images/progress-bar.png');
   },
  create: function(){
       this.game.stage.backgroundColor = '#fff';
  },
  update: function(){
      this.state.start('Preloader');
  }
};

In preload method we’ve added a preloader-bar image to the cache which we make use of in the Preloader State. In create method we set the background color of game stage to white. Next, in update method we simply switch to Preloader State. Boot state is usually used to set game configurations.

Preloader State Source Code – Preloader.js

Technotip.Preloader = function(game){
    this.ready = false;
};
 
Technotip.Preloader.prototype = {
    preload: function(){
        this.preloadBar = this.add.sprite(10, 30, 'preloadbar');
        this.load.setPreloadSprite(this.preloadBar);
        //this.load.audio('myMusic', ['path/1.mp3', 'path/1.ogg']);
        //this.load.audio('myMusic', 'path/1.wav');
        this.load.audio('m1', '/audio/1.mp3');
        this.load.audio('m2', '/audio/2.mp3');
        this.load.audio('m3', '/audio/3.mp3');
        this.load.audio('m4', '/audio/4.mp3');
        this.load.audio('m5', '/audio/5.mp3');
        this.load.audio('m6', '/audio/6.mp3'); 
        this.load.onLoadComplete.add(this.loadComplete, this);
    },
    loadComplete: function(){
       this.ready = true;
    },
    update: function(){
        if(this.ready === true) 
        {
            this.state.start('Game');    
        } 
    }
};

Here we set a state level global variable this.ready to false and then inside preload method we add the previously loaded image(preloadbar image – in Boot State) and set it as preload sprite using this.load.setPreloadSprite(). Next load the game assets like audio, sprites/images, sprite sheets and any other assets and finally call onLoadComplete. Once onLoadComplete.add() method is triggered, we call this.loadComplete custom method and set this.ready to true – this means all the game assets we set to load in preload method has been completely loaded.

Inside update method we check to see if all the audio files has been decoded by the browser engine. To do that we can use this.cache.isSoundDecoded() method and pass the audio key we used while loading the audio file, in preload method – we can check multiple audio keys for decoding using && (and) logical operators. If the audio isn’t decoded it’ll not be played inside the game later on. So check if the sound files are decoded and check if all other assets are loaded by checking if this.ready variable is set to true. Once these conditions are true, we switch to Game State.

Note: If you’re using compressed audio formats like mp3 or ogg, then pass it as an array to this.load.audio() method. This way the browser picks up the one(audio format) which it supports. If the audio file format is uncompressed/raw file like wav file format, then you can directly include its path(as second parameter) while loading it.

Example:

this.load.audio('myMusic', ['/filePath/Microsoft.mp3', '/filePath/Microsoft.ogg']);
this.load.audio('myMusic', '/filePath/Apple.wav');

Game State Source Code – Game.js

Technotip.Game = function(game){
};
 
Technotip.Game.prototype = {
    create: function(){ 
      this.add.text(10, 10, 'Loading finished', {fill: '#000'});
    }
};

Here we simply display a message to the user that the loading has been finished.

Note: If we have large number of assets to be loaded we can split that up into multiple loading screens – multiple loading states. For example, we can load some assets which is needed for level 1 of the game. If we need something specific to level 2, we can load it separately once again when the user is at level 2 – just before the level 2 game begins. We can show a loading progress screen once again and load remaining game assets.

You could even use onLoadStart and onFileComplete along with onLoadComplete.
Below is it’s usage example:

    var text = game.add.text(32, 32, '', { fill: '#ffffff' });
    var x = 10;
    var y = 20;
    this.load.onLoadStart.add(loadStart, this);
    this.load.onFileComplete.add(fileComplete, this);
    this.load.onLoadComplete.add(loadComplete, this);
 
function loadStart() {
	text.setText("Game Assets Loading ...");
}
 
function fileComplete(progress, cacheKey, success, totalLoaded, totalFiles) {
 
	text.setText("Game loading: " + progress + "% - " + totalLoaded + " out of " + totalFiles);
 
	var newImage = game.add.image(x, y, cacheKey);
 
	newImage.scale.set(0.3);
 
	x += newImage.width + 20;
 
	if (x > 700)
	{
		x = 32;
		y += 332;
	}
 
}
 
function loadComplete() {
	text.setText("Load Complete");
}

Once the loading of assets starts phaser calls loadStart method(custom method), where you can simply display and keep the user informed that the loading has started. Once the first bit of file or asset is being loaded you can start displaying the progress inside fileComplete method. Later when the asset loading is completed you can display a message to the user inside loadComplete method. loadStart, fileComplete and loadComplete are all custom methods.

cacheKey contains cached game asset, like images and sound files.

Configure Global Settings: Phaser

It’s very important for any game to have some global configurations – like, display mode(Landscape or Portrait), device width and height, background image, background music/common sound effects, a logo(for branding) at the bottom or anything like that which applies to the entire game application.

Phaser-game-configurations

Video Tutorial List At One Place:
Phaser Video Tutorial List: Game Framework

In today’s video tutorial we shall learn:
1. Detecting device and loading configuration based on the device type.
2. Configuration options like: Landscape, Portrait modes, setting minimum and maximum dimensions of the device, aligning page vertically and horizontally, setting input pointers.

Related Read:
1. State Manager: Phaser
2. Managing Multiple States: Phaser

Configure Global Settings In Phaser


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=ybm4-6cKnVc [Watch the Video In Full Screen.]



HTML File – index.html

< !DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="minimal-ui"/>
 
<style>
    body{
        padding: 0px;
        margin: 0px;  
    }
</style>
 
<script type="text/javascript" src="javascripts/library/phaser.js">
</script>
<script type="text/javascript" src="javascripts/states/Boot.js">
</script>
</head>
<body>
 
<script type="text/javascript" src="javascripts/Main.js">
</script>
</body>
</html>

The meta tags(in above html file) are to make sure that the game runs properly on Apples mobile browsers – to make the game full screen.
Style information is to take off any padding and margin. Some browsers add this behavior by default, but as we want to have same experience across different browsers we add this styling information ourselves.

Next we add the phaser library followed by Boot.js file(Boot State). Before closing body tag we include Main.js file(which is not a state file) which contains our global game object i.e., Phaser.Game() instance and this is the file where we add states to state manager and also kick-start the first state i.e., Boot State.

Main.js file source code

var game = new Phaser.Game(400, 400, Phaser.AUTO);
    game.state.add('Boot', Technotip.Boot);
    game.state.start('Boot');

Here we have our global game object, which is an instance of Phaser.Game() and then we add Boot State and immediately start the state(Boot State).

Boot.js file source code – Boot State

var Technotip = {};
 
Technotip.Boot = function(game){};
 
Technotip.Boot.prototype = {
   preload: function() {
       this.load.image('logo', '/images/logo1.png');
       this.load.image('preloadbar', '/images/progress-bar.png');
   },
  create: function(){
       this.game.stage.backgroundColor = '#000';
       this.add.sprite(30, 10, 'logo');
       this.input.maxPointers = 1;
       if(this.game.device.desktop)
       {
           this.scale.pageAlignHorizontally = true;
       }
       else
       {
           this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
           this.scale.forceLandscape = true;
           this.scale.pageAlignHorizontally = true;
        //   this.scale.pageAlignVertically = true;      
        //   this.scale.forcePortrait = true;
        //   this.scale.minWidth = 600;    
        //   this.scale.minHeight = 800;
        //   this.scale.maxWidth = 1000;
        //   this.scale.maxHeight = 1800;
        //   this.scale.setScreenSize(true);
        this.input.addPointer();
       }
  }
};

In the preload method I’ve added a logo and a preload bar image. Will use the same code for my next video tutorial, so watch out for our next video tutorial on loading game assets and showing the loading bar or load progress to the user.

Inside create method we check if the device where the game is rendered is desktop using this.game.device.desktop and inside if block we write the code which should be applied to desktops. If the device is not a desktop then the else block code will be executed. Configure the game application according to the device it’s being rendered on.

this.input.maxPointers sets the number of pointers – example, the cursor or the touch(single or multi-touch on a mobile device)
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL fits all the game objects/elements inside the device screen.
this.scale.forceLandscape setting it to true forces the device to render the game in Landscape mode.
this.scale.forcePortrait setting it to true forces the device to render the game in Portrait mode.
this.scale.pageAlignHorizontally setting this to true sets the page alignment horizontal.
this.scale.pageAlignVertically setting this to true sets the page alignment vertical.
this.scale.minWidth the minimum width of the device in which the game renders.
this.scale.minHeight the minimum height of the device in which the game renders.
this.scale.maxWidth the maximum width of the device in which the game renders.
this.scale.maxHeight the maximum height of the device in which the game renders.
this.scale.setScreenSize(true); we need to set this after we set the minWidth, minHeight, maxWidth, maxHeight of the devices. After we pass ‘true’ to setScreenSize() method, these device scales get set in our game.
this.input.addPointer() adds input pointer to the game. For mobile, its finger touch.

In our next video tutorial we shall work on a preloader bar to indicate the user of assets loading progress ..

Managing Multiple States: Phaser

Today lets learn how we can manage multiple states in Phaser. We can divide a game into several related modules and then link them up, so that they can communicate and produce meaningful results. By doing this we can handle large projects in a much better way.

You can see how a simple state can be written to keep the modularity of a game application: State Manager: Phaser

Modularity is the degree to which a system’s components may be separated and recombined.

Video Tutorial List At One Place:
Phaser Video Tutorial List: Game Framework

Managing Multiple States In Phaser


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=Z44LkdtO8-w [Watch the Video In Full Screen.]



About the Game Module
It’s a simple module where-in the first screen a menu appears with 2 items in it:
1. Blue
2. Red

manage-multiple-states-phaser

User can click and select any color. If the user selects Blue, then Blue state is started else if the user selects Red, then Red State is started. Blue and Red states simply display a message with their respective background color and also has a Menu link clicking on which brings the user back to the main menu.

This video tutorial simply demonstrates using multiple states in a phaser game application.

HTML File – index.html

< !DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="javascripts/library/phaser.js">
</script>
<script type="text/javascript" src="javascripts/states/Menu.js">
</script>
<script type="text/javascript" src="javascripts/states/Blue.js">
</script>
<script type="text/javascript" src="javascripts/states/Red.js">
</script>
</head>
<body>
 
<script type="text/javascript" src="javascripts/Main.js">
</script>
</body>
</html>

Here we have linked phaser library followed by Menu State file(Menu.js), Blue State file(Blue.js) and Red State File(Red.js). And before closing body tag we’ve Main.js which is not a state file, but simply a file which is used to create Phaser.Game() instance and to add states to that instance. Main.js is also used to kick-start the game, by stating the first state(Menu State – Menu.js).

Main.js file source code

var game = new Phaser.Game(400, 400, Phaser.AUTO);
    game.state.add('Menu', Technotip.Menu);
    game.state.add('Blue', Technotip.Blue);
    game.state.add('Red', Technotip.Red);
    game.state.start('Menu');

We create game object, which is an instance of Phaser.Game() and by using Phaser.AUTO option we let phaser select the renderer for the game – WebGL or Canvas. Next we add all the states we create for the game and finally start the Menu state from were we select and run other states – based on user choice.

Menu.js file source code – Menu State

var Technotip = {};
 
Technotip.Menu = function(game){
    var text1;
    var text2;
};
 
Technotip.Menu.prototype = {
   create: function(){
        this.game.stage.backgroundColor = '#000';
        text1 = this.add.text(10, 10, '1. Blue', {fill: "#ffffff"});
        text2 = this.add.text(10, 40, '2. Red', {fill: "#ffffff"});
 
        text1.inputEnabled = true;
        text1.events.onInputDown.add(this.blue, this);
 
        text2.inputEnabled = true;
        text2.events.onInputDown.add(this.red, this);
   },
   blue: function(){
        this.state.start('Blue'); 
   },
   red: function(){
        this.state.start('Red');     
   }
};

This is the state which is started in Main.js file. Here we create Technotip object and create 2 menu items using this.add.text() method. We also enable input on these two texts(menu items). If the user touches/clicks first option, then we call blue method, which in-turn starts Blue state. Similarly, if the user selects second option which calls red method, which in-turn starts Red state.

Related Read:
Passing Parameter To Custom Methods: Phaser

Blue.js file source code – Blue State

Technotip.Blue = function(game){
    var text;
};
 
Technotip.Blue.prototype = {
   create: function() {
        this.game.stage.backgroundColor = "#051efa";
        this.add.text(10, 10, 'Blue Stage', {fill: '#fff'});
        text = this.add.text(this.world.centerX,
                             this.world.centerY, 'Menu', {fill: '#fff'});
 
        text.inputEnabled = true;
        text.events.onInputDown.add(this.go, this);
   },
   go: function(){
       this.state.start('Menu');
   }
};

Here we simply set the background color of the game stage to blue and display a menu link which will take the user back to main menu of the game. This is done by enabling input on the text menu.

Similarly,
Red.js file source code – Red State

Technotip.Red = function(game){
    var text;
};
 
Technotip.Red.prototype = {
   create: function() {
        this.game.stage.backgroundColor = "#ff0000";
        this.add.text(10, 10, 'Red Stage', {fill: '#fff'});
        text = this.add.text(this.world.centerX,
                             this.world.centerY, 'Menu', {fill: '#fff'});
 
        text.inputEnabled = true;
        text.events.onInputDown.add(this.go, this);
   },
   go: function(){
       this.state.start('Menu');
   }
};

..when the user selects Red from the menu, the Red state starts and it displays red background and option to navigate to the main menu of the game application.

This is a simple phaser application to demonstrate managing multiple states in phaser. There is no rule as to how you need to divide the code into modules/states – you can do as many or as little as you want. The objective of modular programming is to minimize the complexity and help manage the code at a later stage of project life cycle.

Equal to v/s Strictly Equal to

What’s the difference between equal to v/s strictly equal to and not equal to v/s strictly not equal to in any programming language?

This seems to be confusing at first, but if we execute a small example things get very clear about the working of these operators.

strictly-not-equal-to

== is called equal to operator.
!= is called not-equal to operator.
=== is called strictly equal to operator.
!== is called strictly not-equal to operator.

In this video tutorial we shall see the differences between == v/s === and != v/s !===

Difference between != v/s !=== and == v/s ===


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=ql5cS8DntwQ [Watch the Video In Full Screen.]



$a = 1;
$b = '1';

Lets assign integer 1 to variable a and string ‘1’ to variable b.

Equal-to v/s Strictly Equal-to

$a == $b
true
 
$a === $b
false

== operator doesn’t consider the type of variable strictly, thus returns true even though we are comparing a string with an integer. But === operator considers the type of the variable strictly and treats integer and string as two different things and hence returns false.

Not Equal-to v/s Strictly Not Equal-to

$a != $b
false
 
$a !== $b
true

Similarly, as != operator doesn’t take variable type into strict consideration it thinks $a and $b as equals, hence returns false, but !== returns true as it reads integer and string variables as different.

Phaser Video Tutorial List: Game Framework

Stay subscribed. We will keep updating this page whenever we have a new video tutorial on Phaser Game Framework

phaser logo

..stay subscribed. These email subscriptions are free

Enter your email address:

Phaser is an open source HTML5 game framework created by Photon Storm. It’s designed to create games that will run on desktop and mobile web browsers. A lot of focus was given to performance inside of mobile web browsers, a growing and important area of web gaming.

Phaser.io Free Video Tutorials

  1. Getting Started With HTML5 Game Development: Phaser
  2. State Manager: Phaser
  3. Update Method: Phaser
  4. Passing Parameter To Custom Methods: Phaser
  5. Managing Multiple States: Phaser
  6. Configure Global Variables: Phaser
  7. Progress Bar: Phaser

Passing Parameter To Custom Methods: Phaser

Today let us learn how to write custom methods/functions in Phaser game application/code.

Make sure to watch this video tutorial before continuing:
Update Method: Phaser

Video Tutorial List At One Place:
Phaser Video Tutorial List: Game Framework

In this video tutorial you’ll learn:
1. Writing Custom method / function.
2. Writing and using local variables – local to that state.
3. Enabling click recognition(event) on image or any game object.
4. Passing parameter to custom method.
5. Creating text on phaser game world.
6. Placing game object to the exact center of game world / game stage.

Enable/Add Click Event On Image/Game Object: Phaser



YouTube Link: http://www.youtube.com/watch?v=3cH3NC–HxE [Watch the Video In Full Screen.]



HTML File – index.html

< !DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="javascripts/library/phaser.js">
</script>
<script type="text/javascript" src="javascripts/Main.js">
</script>
</head>
<body>
 
<script type="text/javascript">
    var game = new Phaser.Game(400, 400, Phaser.AUTO);
    game.state.add('Main', Technotip.Main);
    game.state.start('Main');
</script>
</body>
</html>

This code remains same from our previous tutorial – State Manager: Phaser.

Javascript File – Main State

var Technotip = {};
 
Technotip.Main = function(game){
    var logo;
    var text;
};
 
Technotip.Main.prototype = {
   preload: function(){
        this.load.image('com', '/images/logo2.jpg');
   },
   create: function(){
        logo = this.add.sprite(this.world.centerX, 
                               this.world.centerY, 'com');
        logo.anchor.set(0.5);
        text = this.add.text(100, 10, 'My score is 0', {fill: '#ffffff'});
        logo.inputEnabled = true;
        logo.events.onInputDown.add(this.score, {'points': 1}, this);
    },
    score: function(){
        text.text = 'My score is '+this.points++; 
   },
    update: function(){
       logo.rotation += 0.01;
    }
};

Inside create method, we are using this.world.centerX and this.world.centerY to position the game object(in above code, the logo image) to the exact center of the game world. We create and add a text placeholder by using this.add.text method. The first and second parameter are x and y axis values respectively. The third parameter is the actual text and the fourth parameter is the styling information of the text that is being rendered.

Next we enable input on the image by setting inputEnabled property to true and then add onInputDown event and call this.score custom method whenever user clicks on the image.

Note: Whenever we’re passing argument to our custom method/function, we need to pass it as an object. We can pass multiple key value pairs inside an object. And while accessing these arguments use this keyword followed by dot operator and the key present inside the argument object.

Since I’ve used increment operator on this.points inside this.score method, the value keeps incrementing whenever user clicks on the image.

Update Method: Phaser

Update method is responsible for updating and re-drawing the game objects. Phaser by default will aim to run at 60 frames per second – that means, it updates your game 60 times per second, as long as its state is active.

Make sure to watch this video tutorial before continuing:
State Manager: Phaser

Video Tutorial List At One Place:
Phaser Video Tutorial List: Game Framework

In this video you’ll learn:
1. Update Method.
2. Image rotation.

Update Method And Image Rotation: Phaser


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=x-nv9XngN_4 [Watch the Video In Full Screen.]



HTML File – index.html

< !DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="javascripts/library/phaser.js">
</script>
<script type="text/javascript" src="javascripts/Main.js">
</script>
</head>
<body>
 
<script type="text/javascript">
    var game = new Phaser.Game(400, 400, Phaser.AUTO);
    game.state.add('Main', Technotip.Main);
    game.state.start('Main');
</script>
</body>
</html>

This code remains same from our previous tutorial – State Manager: Phaser.

Javascript File – Main File

var Technotip = {};
 
Technotip.Main = function(game){
 
};
 
Technotip.Main.prototype = {
   preload: function(){
        this.load.image('org', '/images/logo1.png');
        this.load.image('com', '/images/logo2.jpg');
   },
   create: function(){
        this.add.sprite(10, 20, 'org');
        this.logo = this.add.sprite(100, 100, 'com');
        this.logo.anchor.set(0.5);
    },
    update: function(){
       this.logo.rotation += 0.01;
    }
};

In the create method, we reference second image(i.e., image with ‘com’ reference name) with a variable this.logo
We could set the anchor point of rotation using anchor.set() method.
If set to 0, it rotates with images right top corner as it’s rotating point.
If set to 0.5, it rotates with images center as the rotating point.
If set to 1, it rotates with the images left bottom corner as its rotating point.

Update Method
Update method is called 60 times per second – so in our code, the value of rotation property increments 0.01 x 60 times for every second. Update method keeps running until there is any logical termination or with the shutdown of the state.