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
[youtube https://www.youtube.com/watch?v=SWEiIxAciUw]
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.