HTML5 Game Development
Practical Guide for Developers
(from one of us)Rakesh Raju
Singapore - CASUAL CONNECT
23-May-2012
My name is Rakesh Raju
@rakeshraju
Co-Founder and CTO @Tresensa Founder @Codewalla
• TreSensa - HTML5 based game development Start-up
• Codewalla: Casual game studio – online, social and mobile
(but most of all across platforms)
1
What are we going to explore in the next 45 minutes?
• Let's set the stage in casual game development - HTML5 for game developers
• Case study - our own Demo
• Cross-platform - A Solution based Approacho Motivationo Challengeso R & D: Available Technologies and Frameworks
• The Solution Framework - Connecting the Dots
• Recommendations 1
HTML5 Game Development
1
What we will cover:
• What kind of Games? High Reacho Cross Platform o Multi Player o Socialo Mobile first (always)
• Basic Game Engine features: Functional and Performance
HTML5 Game Development
1
What we will NOT cover:
• Games/ techniques that are platform limited
• HTML5: Merits and Demerits
• All Possible Techniques (as of right now)
Demo Time - BrowserQuest by Mozilla
1
Demo Time - Dollar Isle by Non-Stop Games
1
Demo Time - Cut the Rope by ZeptoLab
1
Demo Time - Hangman by Tresensa
1
Demo Time – Stranded by Tresensa
1
High-Reach GamesMotivation
• Game studio pain pointso Complexity:
Front-end issues - Rendering. Back end issues - High scale multi-player games.
o Skill-set fragmentation/explosion o Cost of development/maintenanceo Time to market
o Distribution and (of course!) Monetization
1
High Reach GamesR & D (Technologies and Frameworks)
• Unity: o Needs a plug-in to run in desktop browser. Doesn't run
in mobile browsers.
• Flash:o Doesn't run on mobile
• Corona: o Native only. Doesn't run in browsers
• HTML5 Frameworks: o Low on features or true cross platform support. or
Closed business model. Complex workflow ( PlayN) 1
High Reach GamesChallenges
• JavaScript language issues
• Browser Performance
• Browser support for audio etc
• Lack of mature frameworks
• Lack of Authoring Tools
• Lack of developers ( lots of demand )
1
High Reach GamesThe Solution Framework
• Front-end SDK (Game Framework) Easy, controlled syntax for Game devs Cross-browser/device Integrated with Multi-player/Social back-end Integrated with graphics/animation libs (CAAT) Phonegap Compatible Game Packs
1
High Reach GamesThe Solution Framework
• Back-end Game server available as service - No install Pure JS Support for asynchronous multi-player games Game Packs
1
1. Create the Game class.2. Flesh out the game class3. Set the entry point function of our game.4. Create a game object5. Load Assets6. Preload the images:7. Create the splash screens8. Create Main Game Screen9. Create Gameplay Screen10. Objects11. Spawning12. End condition
High Reach GamesCode Walk-through
Write the game directly in Canvas, CSS
Advantages:• Get started immediately
Be prepared for:• HTML5 issues – nothing to do with game programming
Ideal for:• Small games
Approaches
1
Approaches
Build Game Development Framework
Advantages:• Customize for your own needs
Be prepared for:• Effort, Skills and Cost
Ideal for:• High-cost, long term Games
1
Recommendation for Game Developers
Use a Framework
Advantages:• Definitely gives you a head start.
Be prepared for:• Standard, non-customized framework
1
TreSensa(yes ours)
HTML5 Frameworks
PlayN
Scirra
Three.js
HTML5 Frameworks
Impact.js
Appmobi
So what is the future of HTML5 for high reach game development?
front end -
So what is the future of HTML5 for high reach game development?
back end -
So what is the future of HTML5 for high reach game development?
cloud -
How do we move forward form here
- Look beyond your comfort zone (acquire new skills integrate them with new platforms)
- Think in frameworks not languages - Scale is King, cost is Queen- Developers who embrace this complexity will be heroes!
Top Related