HTML5 Ga
This presentation is the property of its rightful owner.
Sponsored Links
1 / 26

HTML5 Ga m e Development Practical Guide for Developers (from one of us) PowerPoint PPT Presentation


  • 86 Views
  • Uploaded on
  • Presentation posted in: General

HTML5 Ga m e Development Practical Guide for Developers (from one of us). Rakesh Raju Singapore - CASUAL CONNECT 2 3 -May-2012. My name is Rakesh Raju @rakeshraju . Co-Founder and CTO @Tresensa Founder @Codewalla TreSensa - HTML5 based game development Start-up

Download Presentation

HTML5 Ga m e Development Practical Guide for Developers (from one of us)

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Html5 ga m e development practical guide for developers from one of us

HTML5 Game Development

Practical Guide for Developers

(from one of us)

Rakesh Raju

Singapore - CASUAL CONNECT

23-May-2012


Html5 ga m e development practical guide for developers from one of us

My name is Rakesh Raju

@rakeshraju

Co-Founder and CTO @Tresensa

Founder @Codewalla

  • TreSensa - HTML5based game development Start-up

  • Codewalla:Casual game studio – online, social and mobile (but most of all across platforms)

1


Html5 ga m e development practical guide for developers from one of us

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

    • Motivation

    • Challenges

    • R & D: Available Technologies and Frameworks

  • The Solution Framework - Connecting the Dots

  • Recommendations

1


Html5 ga m e development practical guide for developers from one of us

HTML5 Game Development

What we will cover:

  • What kind of Games? High Reach

    • Cross Platform

    • Multi Player

    • Social

    • Mobile first (always)

  • Basic Game Engine features: Functional and Performance

1


Html5 ga m e development practical guide for developers from one of us

HTML5 Game Development

What we will NOT cover:

  • Games/ techniques that are platform limited

  • HTML5: Merits and Demerits

  • All Possible Techniques (as of right now)

1


Html5 ga m e development practical guide for developers from one of us

Demo Time - BrowserQuest by Mozilla

1


Html5 ga m e development practical guide for developers from one of us

Demo Time - Dollar Isle by Non-Stop Games

1


Html5 ga m e development practical guide for developers from one of us

Demo Time - Cut the Rope by ZeptoLab

1


Html5 ga m e development practical guide for developers from one of us

Demo Time - Hangman by Tresensa

1


Html5 ga m e development practical guide for developers from one of us

Demo Time – Stranded by Tresensa

1


Html5 ga m e development practical guide for developers from one of us

High-Reach Games

Motivation

  • Game studio pain points

    • Complexity:

      • Front-end issues - Rendering.

      • Back end issues - High scale multi-player games.

    • Skill-set fragmentation/explosion

    • Cost of development/maintenance

    • Time to market

    • Distribution and (of course!) Monetization

1


Html5 ga m e development practical guide for developers from one of us

High Reach Games

R & D (Technologies and Frameworks)

  • Unity:

    • Needs a plug-in to run in desktop browser. Doesn't run in mobile browsers.

  • Flash:

    • Doesn't run on mobile

  • Corona:

    • Native only. Doesn't run in browsers

  • HTML5 Frameworks:

    • Low on features or true cross platform support. or Closed business model. Complex workflow ( PlayN)

1


Html5 ga m e development practical guide for developers from one of us

High Reach Games

Challenges

  • 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


Html5 ga m e development practical guide for developers from one of us

High Reach Games

The 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


Html5 ga m e development practical guide for developers from one of us

High Reach Games

The Solution Framework

  • Back-end

    • Game server available as service - No install

    • Pure JS

    • Support for asynchronous multi-player games

    • Game Packs

1


Html5 ga m e development practical guide for developers from one of us

High Reach Games

Code Walk-through

  • Create the Game class.

  • Flesh out the game class

  • Set the entry point function of our game.

  • Create a game object

  • Load Assets

  • Preload the images:

  • Create the splash screens

  • Create Main Game Screen

  • Create Gameplay Screen

  • Objects

  • Spawning

  • End condition


Html5 ga m e development practical guide for developers from one of us

Approaches

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

1


Html5 ga m e development practical guide for developers from one of us

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


Html5 ga m e development practical guide for developers from one of us

Recommendation for Game Developers

Use a Framework

Advantages:

  • Definitely gives you a head start.

    Be prepared for:

  • Standard, non-customized framework

1


Html5 ga m e development practical guide for developers from one of us

PlayN

Scirra

HTML5 Frameworks

TreSensa

(yes ours)


Html5 ga m e development practical guide for developers from one of us

Impact.js

Appmobi

HTML5 Frameworks

Three.js


Html5 ga m e development practical guide for developers from one of us

So what is the future of HTML5 for high reach game development?

front end -


Html5 ga m e development practical guide for developers from one of us

So what is the future of HTML5 for high reach game development?

back end -


Html5 ga m e development practical guide for developers from one of us

So what is the future of HTML5 for high reach game development?

cloud -


Html5 ga m e development practical guide for developers from one of us

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!


Thank you

Thank You!

www.tresensa.com

[email protected]


  • Login