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!

www.tresensa.com

rakesh@tresensa.com

Thank You!