HTML5 & JavaScript Games

E76911cbe088e5b850d966de3fc7435b?s=47 robhawkes
September 08, 2011

HTML5 & JavaScript Games

E76911cbe088e5b850d966de3fc7435b?s=128

robhawkes

September 08, 2011
Tweet

Transcript

  1. None
  2. None
  3. 1ST-CLASS HONOURS Interactive Media Production

  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. THE TIME IS NOW Threshold of something cool

  12. NOTABLE EVENTS Recent events in HTML5 gaming

  13. * made by Phil Banks (@emirpprime)

  14. WRITE ONCE Use anywhere

  15. NO COMPILATION Save time with development and testing

  16. LIGHTWEIGHT Text and image files take up little room

  17. OPEN DEVELOPMENT Gives you a warm fuzzy feeling

  18. None
  19. FULL COMPATIBILITY Not all browsers support everything

  20. NO DRM These technologies aren’t made for it

  21. TECHNOLOGY Some of the tech involved in Web gaming

  22. CANVAS & WEBGL 2D and 3D graphics

  23. HTML5 AUDIO Sound effects and background music

  24. WEBSOCKETS Multiplayer communication

  25. NODE.JS JavaScript on the server

  26. LOCAL STORAGE Storing data on the player device

  27. MONGODB & REDIS Storing data on the server

  28. EXISTING GAMES Some of my favourite and best examples

  29. QUAKE II Google port using Web technologies

  30. MINECRAFT We’ll see this fully working in JavaScript soon

  31. WORD² Massively multiplayer Scrabble

  32. None
  33. FREECIV Open source clone of Civilisation

  34. RAWKETS Because I made it and it’s addictive

  35. LOADS MORE Games directories are everywhere

  36. FUNDAMENTALS Making games with HTML5

  37. GAME LOOP The heart of the game

  38. PHYSICS UPDATE Updating positions

  39. GRAPHICS UPDATES Making things visible

  40. NETWORKING Breaking out of single player

  41. CONTROLS AND UI So important to get right

  42. None
  43. PERFORMANCE Keeping things running smoothly

  44. GAME ENGINES Making game development easy

  45. None
  46. None
  47. None
  48. ISOGENICENGINE Iso City demo

  49. LIBRARIES & SERVICES Saving you time in the long run

  50. BOX2DWEB JavaScript port of the Box2D physics engine

  51. MOTION.JS Solving client-side prediction issues

  52. None
  53. None
  54. None
  55. None
  56. KEY LESSONS What I’ve learnt so far

  57. CUT DOWN LOOPS Less is more

  58. NO TIMEOUTS Use requestAnimationFrame instead

  59. NETWORK TRICKS Cutting down on communication

  60. 1 1 MESSAGES IN 1 MESSAGES OUT 1

  61. 1 2 2 1 MESSAGES IN 2 MESSAGES OUT 4

  62. 1 4 4 1 1 4 4 1 MESSAGES IN

    4 MESSAGES OUT 16
  63. MESSAGES IN 30 MESSAGES OUT 900 1 30 30 1

    1 30 30 1
  64. MESSAGES IN 100 MESSAGES OUT 10000 1 100 100 1

    1 100 100 1
  65. CHEATERS You can’t avoid them completely

  66. DOM OR CANVAS Which one should you use?

  67. THE FUTURE What HTML5 gaming still needs

  68. DOCUMENTATION Specific to HTML5 game development

  69. WEBGL SUPPORT Support is shocking right now

  70. MORE ENGINES Not many decent ones around right now

  71. IMPROVED AUDIO More reliable looping

  72. POWERFUL MOBILE Better hardware acceleration

  73. BETTER CONTROLS Break away from the keyboard and mouse

  74. None
  75. MONETISATION Making profit from games

  76. Rawkets.com HTML5 & WebSockets game. Twitter sentiment analysis Delving into

    your soul. RECENT PROJECTS Rawkes.com Personal website and blog MORE COOL STUFF ExplicitWeb.co.uk Web development podcast. Mozilla Technical Evangelist My job ROB HAWKES @robhawkes
  77. Become a canvas master FOUNDATION HTML5 CANVAS My amazing book

    on canvas, animation, and making games. RAWKES.COM/FOUNDATIONCANVAS Out now Paperback and digital formats Learn how to animate Make two cool space games
  78. COFFEE FWD Mozilla Web FWD get together Innovation acceleration FRI

    JULY 15TH @ RED ROCK CAFE, MV Friday July 15th Red Rock Cafe, Mountain View Meet some great people Show off your stuff
  79. DEV DERBY Experimenting with the latest Web technologies Manipulate video

    with canvas DEVELOPER.MOZILLA.ORG/EN-US/DEMOS/DEVDERBY Every month This month is HTML5 video Win prizes (like an Android) Next month is all about touch
  80. None