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



YouTube Link: https://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



YouTube Link: https://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



YouTube Link: https://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.

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: https://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.