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.

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.

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.