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.
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
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.
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.
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');
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.
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.
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.
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");
}
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.
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.
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.
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');
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).
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 ..
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.
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
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.
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');
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.
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.
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.
..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.
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.
== 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 !===
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
$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
$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.
