1. GAME ON!
Developing HTML5 Games
Rajasekar
@rajzshkr

2. What/Why
Game?

3. Gaming Industry

4. Game Development Process
• Ideation
• Concept Document
• Game Design
• Leader boards/Profiling/ Points
• Art Design
• Coding
• Physics engines/AI Engines/ Testing
• Release
• Upgrading

5. Gaming Platforms

6. Why Hybrid Game?

7. Hybrid Frameworks
• Easel JS
• Construct 2
• Three.js
• Lime JS
• enchant.js
• Phaser JS
SRC - http://html5gameengine.com/

8. Anatomy of a Game
LOGIC JavaScript code
GRAPHICS canvas
INPUT onkeydown, onmousedown
SOUND Audio
MUSIC Audio
MULTIPLAYER Ajax, Web sockets
GAME ASSETS Images, Audio, Video and Binary
supported by browsers

9. Initiate Phaser
var game = new Phaser.Game(400, 490, Phaser.AUTO,
'game_div');

10. Gaming Logic
var main_state = {
preload: function() {
// Function called first to load all the assets
},
create: function() {
// Fuction called after 'preload' to setup the game
},
update: function() {
// Function called 60 times per second
},
};

11. Start the game
game.state.add('main', main_state);
game.state.start('main');