HTML5 Game Development Practical Guide for Developers (from one of us) Rakesh Raju Singapore - CASUAL CONNECT 23-May-2012.

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 Approach

o Motivation

o Challenges

o 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 Reach

o Cross Platform

o Multi Player

o Social

o 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 points

o Complexity:

Front-end issues - Rendering.

Back end issues - High scale multi-player games.

o Skill-set fragmentation/explosion

o Cost of development/maintenance

o 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

[email protected]

Thank You!