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

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.

State Manager: Phaser

When we have to develop a large project we need to go with modular programming – we need to break the game into several meaningful modules and develop it separately and then let them communicate to produce the required results.

To demonstrate that we are changing our yesterdays basic phaser tutorial into a modular project using Phaser State Manager.

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

In this video you’ll learn:
1. Writing modular code.
2. Using state manager – single state.
3. Project structure to handle large project.
4. Adding images to the project.

Phaser Version: 2.5.0
OS used for Demo: Windows 10
Server used: Node Server

Node Server
1. Node.js Video Tutorial List
2. Express Web Framework: Node.js

Phaser State Manager: Basic


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

YouTube Link: http://www.youtube.com/watch?v=G2ZcM84cPrA [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>

Here we link the phaser library at the top and below that we link our Main.js file. At the end of body tag, we have a game object, and using that game object we add Technotip.Main state and start that state using game.state.start() method.

Javascript File – Main State

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.add.sprite(100, 100, 'com');
    }
};

Here we create an object called Technotip, and then create our state as Technotip.Main and pass our game object to it which will be referenced with this keyword inside Main.js

Next we define the prototype for the state – by defining methods inside it. In above code, we only define preload and create methods. Like our previous phaser tutorial, we load an image in preload method and add that image / sprite to the game stage inside create method.

That’s it. Make sure to add the link to the Main.js in your html file after the phaser library. And then add the state and then make sure to start the game.

In next video tutorial lets learn about update method ..

Getting Started With HTML5 Game Development: Phaser

From today lets learn HTML5 browser game development – applies both to desktop as well as mobile browsers. You’ll be able to build mobile game apps and launch it to play store or app store.

phaser logo

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.

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

In this introductory video you’ll be learning:
1. How to get started with Phaser.
2. Download the library and incorporate it into your new game project.
3. Running the game inside the server – in our case, we’re making use of Node server.
4. Quick starter guide to initiate and run the game project.
5. Placing the image in cache – using preload method.
6. Placing the cached/preloaded image(sprite) on to the game stage/container – using create method.
7. Setting the game stage / container background color.
8. Resizing the stage/container and trick to make use of entire device screen for our game.

Phaser Version: 2.4.9 (immediately 2.5.0 was released, so from tomorrows video we’ll be using 2.5.0)
OS used for Demo: Windows 10
Server used: Node Server


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

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



Node Server
1. Node.js Video Tutorial List
2. Express Web Framework: Node.js

HTML File – index.html

< !DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="javascripts/library/phaser.js"></script>
</head>
<body>
     <div id="gameContainer"></div>
</body>
</html>

Start with the HTML5 doc type as the first line, as Phaser is a HTML5 Game framework. Then you need to download the phaser library, and include it inside your project. If you’re using Node server, then place the library file and all the files inside the public directory. Use phaser.js file (the unminified version) for development and phaser.min.js file (the minified version) while pushing the code to production server.

You can optionally place a div container to render the game or the game engine will consider entire html body as game stage or container. In our case, for demonstration we’ve placed a div with id gameContainer and we’ll make phaser to use this to render the game objects.

JavaScript Code – Game Code

    var game = new Phaser.Game(window.innerWidth, window.innerHeight, 
                               Phaser.AUTO, 'gameContainer', {
                   preload: preload, create: create
               });
    function preload(){
        game.load.image('logo', '/images/logo.png');  
    }
    function create(){
        game.add.sprite(10, 100, 'logo');  
        game.stage.backgroundColor = '#e7e7e7';
    }

Create a game object with the help of Phaser.Game class. You need to pass the game stage width and height, then we can let Phaser decide whether to user WebGL or canvas to render the game – using Phaser.AUTO property. Phaser gives priority to WebGL, if it’s not present then it’ll make use of Canvas. Next we can optionally specify the game container id, and then the game code.

In this example I simply wrote the code and directly passed it as an argument. This works. And this is ok, if the game code is small. But in big game projects we need to follow modularity – which I’ll teach in my next video tutorial.

A valid Phaser state must have atleast one of these methods – preload, create, update.

preload method: is used to load all the game assets. Once loaded, these assets are stored in cache.
create method: here we make use of cached assets and present them on our game stage or container. We also create other objects needed for our game.
update method: this method is repeatedly called and our game objects are constantly updated to create movements or update the game objects or objectives!

In above code, inside preload method, we are using game object and loading a image and giving it a name called logo, by making use of game.load.image() method. First parameter is a name we give it to the image or sprite as we’ll start calling it from now. The second parameter is the path of the actual image – this can even be a remote server URL. Next we place this image on our game stage using game.add.sprite() method, by using create method. I’ve also shown you how to change the background color of the stage by using game.stage.backgroundColor property.

Full Screen Game
Often time when we’re developing game for mobile device(android or iOS game app), we would want to use full screen of the device – we can achieve this by passing window.innerWidth and window.innerHeight parameter while creating game object – as shown in the code – var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO);

Full source code

< !DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="javascripts/library/phaser.js"></script>
</head>
<body>
<div id="gameContainer"></div>
 
<script type="text/javascript">
    var game = new Phaser.Game(window.innerWidth, window.innerHeight, 
                               Phaser.AUTO, 'gameContainer', {
                    preload: preload, create: create
                });
    function preload(){
        game.load.image('logo', '/images/logo.png');  
    }
    function create(){
        game.add.sprite(10, 100, 'logo');  
        game.stage.backgroundColor = '#e7e7e7';
    }
</script>
</body>
</html>

In my next video tutorial I’ll show how to write modular code to handle big game projects – I’ll show it by using same code we used today, so that you’ll feel somewhat familiar.

Please make sure you download the phaser library and try it yourself – this looks like a small example, but worth trying, if you’re a beginner. Stay subscribed, more Phaser video tutorials are on the way.

Ionic grid system

Today lets play with Ionic grid system – it’s built with CSS Flexible Box Layout Module standard, hence it supports all the devices which ionic supports.

Topics Covered
1. Basics of row, column
2. even spacing of column
3. explicit column sizing
4. column offset
5. column positioning
6. row positioning – Going vertical
7. responsive grid

Getting started
To get started from scratch, please visit Getting Started With IONIC APP. Get your IONIC app template ready and continue with this video tutorial.

Software Versions used for the demo
1. Node: v4.2.6
2. Cordova: 6.0.0
3. Ionic: 1.7.14
4. android: Android 6.0 (API level 23)
5. OS: Demo showed on Windows 10 Operating System.

I’ve installed ionic tabs template and am editing tab-dash.html file inside www/templates folder.


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

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



Basics of row and column

    <span class="row">
       <div class="col">.col</div>
       <div class="col">.col</div>  
    </span>

rows are specified with class row and columns with class name col

Even spacing of columns

    <span class="row">
       <div class="col">.col</div>
       <div class="col">.col</div>  
       <div class="col">.col</div>  
       <div class="col">.col</div>  
       <div class="col">.col</div>  
    </span>

In above example all columns take up 20% of space depending on the screen width of the device. i.e., 100/5 = 20. There are 5 columns.

Explicit column spacing

    <span class="row">
       <div class="col col-50">.col-50</div>
       <div class="col">.col</div>  
       <div class="col">.col</div>  
    </span>

Here the first column takes 50% of the width and the other 2 columns share the width equally i.e., 25% each.

Column offset

    <span class="row">
       <div class="col col-offset-25 col-25">.col-25</div>
       <div class="col col-25">.col-25</div>  
       <div class="col col-25">.col-25</div>  
    </span>

Above code leaves 25% offset at the beginning, then a column of width 25% followed by 2 more columns of 25% width.

Column positioning

    <span class="row">
       <div class="col col-top">.col-top</div>
       <div class="col col-center">.col-center</div>  
       <div class="col col-bottom">.col-bottom</div>  
       <div class="col">
        1 <br />2 <br />3 <br />4
       </div>
    </span>

The first column aligns itself to the top, the second one to the center and the last one to the bottom.

Row positioning – Going vertical

    <span class="row row-center">
       <div class="col">.col</div>
       <div class="col">.col</div>  
       <div class="col">.col</div>  
       <div class="col">
        1 <br />2 <br />3 <br />4
       </div>
    </span>

row-center class makes the row align itself to the center, row-top makes it align itself to the top and row-bottom makes row to align itself to the bottom.

responsive grid

    <span class="row responsive-sm">
       <div class="col">.col</div>
       <div class="col">.col</div>  
       <div class="col">.col</div>  
    </span>

You can see its effect only on real devices. You must test it with real devices having different screen size.

responsive-sm for devices smaller than landscape.
responsive-md for devices smaller portrait tablet.
responsive-lg for devices smaller than landscape tablet.

UI
Using this simple ionic grid system we can make our applications User Interface to suit our applications needs.

Further ..
For further configuration, each class uses a Sass variable that can be changed to your liking. There’s also a responsive-grid-break mixin you can use to create your own grid classes.

Positioning The Title: IONIC APPS

Some components like titles, tabs behave according to the platform they are built for. For example, on iOS the default display of view title is at the center and to the left in android devices.


ionic-title-positioning

This might look like a minor thing at the beginning of app development, but when we want to place some icons in the header(maybe for branding purpose) we might like to place the view title to right or to the center.

To have consistent looks across platforms we can ‘hard set’ the view title location by setting the navBar.alignTitle function of $ionicConfigProvider.

$ionicConfigProvider.navBar.alignTitle() takes 3 values
1. left
2. right
3. center


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

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



Quick fix to change position of each view:

< ion-view>
< ion-nav-title>
<center>Technotip</center>
< /ion-nav-title>
< ion-content>
< /ion-content>
< /ion-view>

As shown above, you could make use of our good old HTML friend center tag to align the nav title to center! or take some time to play with CSS to achieve the same.

Positioning The Tabs: IONIC APPS

Some components like tabs, titles behave according to the platform they are built for. For example, on iOS the default display of tabs is at the bottom and at top in android devices.


ionic-tabs-position

This might look like a minor thing at the beginning of app development, but when we want to place an ad or social sharing icons at the bottom, we might like to place the tabs at the top or visa-versa!

To have consistent looks across platforms we can ‘hard set’ the tabs location by setting the tops.position function of $ionicConfigProvider.

$ionicConfigProvider.tops.position() takes 2 values:
1. top
2. bottom


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

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



To center the title of header you can make use of following syntax:

< ion-header-bar
  title="headerTitle"
  left-buttons="leftButtons"
  right-buttons="rightButtons"
  type="bar-positive"
  align-title="center">
< /ion-header-bar>

Getting Started With IONIC APP

Let us learn the basics of IONIC today. We know that IONIC 2 is already in its Beta, and is being received well by the developer community. But we do not want to leave behind people using ionic versions below 2.

What is IONIC?
Ionic is a beautiful, open source front-end SDK for developing hybrid mobile apps with web technologies.
Web technologies like angular, HTML5, CSS.

Topics covered
1. Ionic commands.
2. Ionic templates – tabs, sidemenu, blank.
3. Ionic project folder structure.
4. Basic Dependency plugins.
5. Running our application in web browser.
6. Installing platform android to our project.
7. Building the application.
8. Running our application in android emulator.
9. Running our application in real mobile device.
10. USB debugging, Environment variable setting etc.

Software Versions used for the demo
1. Node: v4.2.6
2. Cordova: 6.0.0
3. Ionic: 1.7.14
4. android : Android 6.0 (API level 23)
5. OS: Demo showed on Windows 10 Operating System.

How to get android sdk installation details on Windows using command prompt?
1. Go to Run, open command prompt by typing cmd
2. Type this command android list targets
And you’ll get the list of all the installation and their basic details.

OR

“ionic info” command

C:\technotip\myApp1>ionic info
 
Your system information:
 
Cordova CLI: 6.0.0
Gulp version:  CLI version 3.9.0
Gulp local:
Ionic Version: 1.2.4
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
OS:
Node Version: v4.2.6

Let’s start with the project


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

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



Software Installation
1. Install Node.js if you have not already.
2. Install cordova and ionic globally using the following command.

npm install -g cordova ionic

This will take some time to install cordova and ionic. To know more about npm(Node Package Manager), check External Module( NPM ) Install, Update, Remove: Node.js

Ionic Templates
There are 3 pre-designed templates ionic gives us to start the project
1. sidemenu
2. tabs
3. blank

For this tutorial I’ll be demonstrating using tabs template. All the explanation shown in the video applies to other templates too.

Start Project with tabs template

ionic start app_name tabs

All ionic commands start with the keyword ionic. Let us call our application as myApp1, so the command will be

c:/>cd technotip
c:/technotip>ionic start myApp1 tabs

Similarly, for sidemenu

ionic start myApp1 sidemenu

for blank

ionic start myApp1 blank

Downloading the project files
Once we run ionic start myApp1 tabs command, all the necessary files will be downloaded to our project folder(myApp1 folder) from ionic official git repository. Know that it’ll take some time to download these files – depending on your internet connection speed.

Once the files are downloaded, we need to get inside our project folder to execute ionic commands ..

c:/>cd technotip
c:/technotip>cd myApp1
c:/technotip/myApp1>

File structure


ionic file structure

plugins folder has plugins on which our project depends on, for some services.
www folder has all our files – like, templates, js files, css files and ionic library files
config.xml file is an important file and we’ll cover it in detail in another video tutorial

android sdk / android studio
Download android studio from Google Developer Site and install it without fail.

(I’m demonstrating for android platform, for iOS, use MAC and replace android keyword with ios in below ionic commands.)

Run the project
1. on browser using the command

ionic serve

use -l option to get additional log information + to launch ionic labs

ionic serve -l

You can enable chrome inspector and check how your app would look inside various devices. Use CTRL+SHIFT+i to open chrome inspector. Then use CTRL+SHIFT+M to open the device view mode.

2. add platform android

ionic platform add android

OR

cordova platform add android

3. Build the project

ionic build android

4. on emulator

ionic emulate android

emulator would take a lot of time to start and display your application. And usually it’s very slow to operate. Simply know this option but never use it for real serious development. For development purpose make sure to check the app using real device.

5. on real mobile device

ionic run android

use -l option to get additional log details + to launch ionic labs

ionic run android -l

Nexus USB Debugging
Connect your mobile phone(preferably nexus device) using USB cable. Turn on ‘Developer’ option and usb debugging option in your phone.
settings – Developer options ( enable it ) – ( scroll down ) – USB debugging ( enable it).

Environment variables
Note: I’m using Windows 10 operating system.

ANDROID_HOME=C:\Users\user_name\AppData\Local\Android\android-sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_45

Check the file paths of the environment variable and change the path depending on the versions installed.

..other commands
1. Get plugin list

cordova plugin list

2. to exit ionic server

CTRL + C

3. whitelist plugin
Whitelist plugin gets installed by default when you create an ionic application. After that insert this piece of code inside head tag of index.html

     <meta http-equiv="Content-Security-Policy" 
           content="default-src *; style-src 'self' 'unsafe-inline'; 
           script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>

Troubleshoot
Let us know what problems you’re facing and we’ll try our best to solve it for you ..please give us proper log information, so that we can understand the problem.

Sharing Is Caring ..
Please share this article with your friends/colleagues on your social profile ..thanks
Hope it helps