Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html5 game development

955 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Html5 game development

  1. 1. GAME ON! Developing HTML5 Games Rajasekar @rajzshkr
  2. 2. What/Why Game?
  3. 3. Gaming Industry
  4. 4. Game Development Process • Ideation • Concept Document • Game Design • Leader boards/Profiling/ Points • Art Design • Coding • Physics engines/AI Engines/ Testing • Release • Upgrading
  5. 5. Gaming Platforms
  6. 6. Why Hybrid Game?
  7. 7. Hybrid Frameworks • Easel JS • Construct 2 • Three.js • Lime JS • enchant.js • Phaser JS SRC - http://html5gameengine.com/
  8. 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. 9. Initiate Phaser var game = new Phaser.Game(400, 490, Phaser.AUTO, 'game_div');
  10. 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. 11. Start the game game.state.add('main', main_state); game.state.start('main');

×