From HTML5 websites to HTML5 games


Published on

Some notes for those that want to move from building HTML5 websites to HTML5 games.

Published in: Technology
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

From HTML5 websites to HTML5 games

  1. 1. From HTML5 websitesto HTML5 gamesPietro Polsinelli@ppolsinelli
  2. 2. What is the difference?Some observations for those moving from (mobile, HTML5) web site / app development to (mobile, HTML5) games 2
  3. 3. The object you are talking about:(mobile, HTML5) web site / app (mobile, HTML5) gameProduct, service – not the web content The game content“Reference” is the semiotical term. Thursday, January 31, 2013
  4. 4. Your aim:(mobile, HTML5) web site / app (mobile, HTML5) gameConversion FunSolve the problemThen one can go and ask “why fun”, well, fun is learning… see Thursday, January 31, 2013
  5. 5. Flow:(mobile, HTML5) web site / app (mobile, HTML5) gameLinear towards conversion. Evolving loops aimed at playing more.Pages can stay there for hours. Time /rhythm is often a core factor. Thursday, January 31, 2013
  6. 6. What does “simple” mean:(mobile, HTML5) web site / app (mobile, HTML5) gameSimplicity of: Simplicity of:Controls ControlsMechanics Mechanics (can be a problem)Message: “great product” MessageInvolvement often requires a background story. Thursday, January 31, 2013
  7. 7. The complexity of the resulting solution:(mobile, HTML5) web site / app (mobile, HTML5) gameExpress, articulate the reference, which is Constitute the reference, which is requiredwell defined and unchanging. to change (levels or other means).Games need depth. Thursday, January 31, 2013
  8. 8. “Depth is an informal term to describe whether a game has enough dimensions of play, actions, rules or story content to be played over a long term. Depth is essential for deep engagement.”
  9. 9. Note. Let’s try to graph it:This is a very, very simplified view.
  10. 10. Relationship with HTML5 technology(mobile, HTML5) web site / app (mobile, HTML5) gamePerfect fit with its standards: content is king. Unfit by design. “Oh, you can do everything”Still… Thursday, January 31, 2013
  11. 11. Least commonmobile device:Android withstock browserbut it’s worse:AndroidS withstock browserHere very little works, and what does, actually doesn’t on some Android device, even when restricting to updated OSs. Crucial implementations, like sound, are largely device dependant. Launching a single “beep” can be a problem.
  12. 12. Is there is a way out?“Unfit by design” is related to geekycommonplaces about games & fun.“A game is essentially animations,3D, things that go fast played in realtime”Not necessarily. Thursday, January 31, 2013
  13. 13. Restrict your game designchoices. Keep it technicallysimple, invest in other stuff.Players don’t care about 3D,animations, complexity – theyonly want to have fun.Think of Twitter narratives in 140 characters. Thursday, January 31, 2013
  14. 14. My advice:- Minimal technology- Maximal background effort Thursday, January 31, 2013
  15. 15. Example: this game Idesigned could istechnologically andgame-mechanicallyquite simple: Thursday, January 31, 2013
  16. 16. It’s a misleadingsimplicity. Making itaddictive requires astudy, design, testing,previous attempts.The key here is “funbecause of hints of anon trivial narrativethrough a trivial gamemechanics.”Addictive. Thursday, January 31, 2013
  17. 17. Art of Game Designhttp://artofgamedesign.comGame Mechanics: Advanced Game Design more about game design.
  18. 18. My twitter stream is dedicated to gamedesign: blog on game designhttp://designagame.eueu
  19. 19. Image sources:
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.