Programming Video Tutorials
Stay subscribed. We will keep updating this page whenever we have a new video tutorial on Phaser Game Framework
..stay subscribed. These email subscriptions are free
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
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
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 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
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.
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
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 ..
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 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
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.