Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5 as a Game Console Michał Budzyński @michalbe
Who is this guy? JavaScript Developer from Warsaw, Poland @michalbe
Open Web Game Developer Who is this guy? @michalbe
Organizer of onG ameStart @onGameStart http://ongamestart.com Who is this guy? @michalbe
Creator of CSS Nyan Cat & other ridiculus web demos http://michalbe.github.com/css-nyan-cat/ Who is this guy? @michalbe
W3C HTML5 GameDev c oach Who is this guy? @michalbe
What about games? @michalbe
History @michalbe
1999 – Scott Porter <ul>GAME LIB www.smashcat.org/personal </ul>History @michalbe
<ul>2000 - DHTML </ul>@michalbe History @michalbe
<ul>2000 - DHTML </ul>@michalbe History @michalbe
2004 – Crisp DHTML Lemmings elizium.nu/scripts/lemmings History @michalbe
2003 – Jacob Seidelin 14KB Super Mario javascriptgaming.com nihilogic.dk
<ul>2005 - AJAX </ul>@michalbe History @michalbe
<ul>2005 - AJAX </ul>History @michalbe
2008 – Martin Kool Sarien sarien.net History @michalbe
2008 Andreas Rosdal FreeCiv freeciv.net History @michalbe
2010 - HTML5 History @michalbe
DOM Canvas SVG WebSockets CSS WebGL etc. HTML5 @michalbe
JavaScript® is our language and DOM is our library. Simple event handling Still faster than Canvas or SVG HTML5 - DOM @mic...
Simple drawing API Image manipulation No support for events or redrawing of a particular element http://www.benjoffe.com/c...
3D graphics in 2D world Origami3D http://projects.mariusgundersen.net/Origami3D/examples/ HTML5 - Canvas @michalbe
CSS support Support for events Libraries like Raphaël JS HTML5 - SVG @michalbe
Massively Multiplayer games Rawkets http://rawkets.com HTML5 - WebSockets @michalbe
XHR Long polling JSONP polling Forever iframes FlashSockets (fuuuuuuuuuu!) WebSockets HTML5 - WebSockets @michalbe
One to rule them all! HTML5 - WebSockets @michalbe
One to rule them all! HTML5 - WebSockets @michalbe
How to use Socket.io without server-side parts of our games? HTML5 - WebSockets @michalbe
How to use Socket.io without server-side parts of our games? We cannot. HTML5 - WebSockets @michalbe
EasyWebSocket - a WebSocket client to broadcast messages to webpages http://easywebsocket.org/ by @jerome_etienne HTML5 - ...
So EasyWebSocket is P2P browser connection! @michalbe HTML5 - WebSockets @michalbe
So EasyWebSocket is P2P browser connection! @michalbe NOPE! HTML5 - WebSockets @michalbe
Hardware accelerated transformations & transitions CSS Animations like a LEGO blocks Implementing of simple logic @michalb...
HTML5 - CSS @michalbe
<ul>https://developer.mozilla.org/en-US/demos/detail/css-nyan-cat </ul>HTML5 - CSS @michalbe
<ul>Cordobo http://cordobo.com/wp-content/uploads/pure-css-animated-3d-super-mario/ </ul>HTML5 - CSS @michalbe
HTML5 - CSS Programming in CSS? @michalbe
HTML5 - CSS Programming in CSS? Yes, CSS3 is Turing complete! <ul>Eli Fox Epsteinh github.com/elitheeli/stupid-machines </...
HTML5 - CSS Programming in CSS? Ok, but what about games in pure CSS? @michalbe
HTML5 - CSS It's possible! <ul>GeckoTang http://jsdo.it/GeckoTang/4rXg </ul>@michalbe
HTML5 - CSS 3D engine in CSS? <ul>Andres Pagella http://andrespagella.com/adventures-3d-world-using-css-javascript </ul>@m...
3d context of Canvas The same API as OpenGL® Shaders! Model import, textures, etc. Awesome libraries like Three.js HTML5 -...
Brandon Jones http://media.tojicode.com/q3bsp/ @michalbe HTML5 - WebGL @michalbe
HTML5 - CSS 2D in WebGL? @michalbe
HTML5 - CSS 2D in WebGL? <ul>GameClosure https://github.com/gameclosure/webgl-2d </ul>@michalbe
HTML5 - CSS 2D in WebGL? <ul>Dominic Szablewski http://www.phoboslab.org/xtype </ul>@michalbe
Phobos Lab http://www.phoboslab.org/log/2011/03/the-state-of-html5-audio HTML5 Video & audio @michalbe
HTML5 Game Frameworks/Engines https://gist.github.com/768272 HTML5 @michalbe
GWT ports of Android™ games Rovio http://chrome.angrybirds.com/ HTML5 @michalbe
Mobile Web @michalbe
Native Web Apps for Palm® Devices Mobile Web @michalbe
Problem ? Mobile Web @michalbe
Problem ? Mobile Web @michalbe
Solution? Mobile Web @michalbe
Web technologies! http://en.wikipedia.org/wiki/Mobile_application_development Mobile Web @michalbe
Geolocation Vibration Accelerometer Sound (play & record) !! Camera Filesystem Gestures & Multitouch SMS Mobile Web @mich...
HTML5 mobile games outside the browser http://www.phoboslab.org/log/2011/04/ios-and-javascript-for-real-this-time Mobile W...
http://www.appmobi.com/ Mobile Web @michalbe
Tools for mobile HTML5 development http://blackberry.github.com/Alice/ Mobile Web @michalbe
Tools for mobile HTML5 development http://xuijs.com/ Mobile Web @michalbe
Tools for mobile HTML5 development http://bly.sk Mobile Web @michalbe
@michalbe Nice, but why should I care? @michalbe
Nice, but why should I care? @michalbe
Nice but why should I care? @michalbe
Nice but why should I care? @michalbe
Nice but why should I care? @michalbe
Nice but why should I care? @michalbe
Nice but why should I care? @michalbe
Nice but why should I care? @michalbe
Nice but why should I care? @michalbe
Nice but why should I care? @michalbe
Nice but why should I care? Boot2Gecko wiki.mozilla.org/B2G @michalbe
HTML5 is the future @michalbe
HTML5 is the future @michalbe
http://html5games.com http://canvasdemos.com https://gaming.mozillalabs.com/ http://michalbe.blogspot.com http://twitter.c...
http://onGameStart.com What's next? @michalbe
Questions? Follow me on twitter: @michalbe @michalbe Thanks! @michalbe
Upcoming SlideShare
Loading in …5
×

HTML5 as a game console

23,668 views

Published on

Michal will talk about game development with Open Web Technologies such as JavaScript, HTML5 and CSS3, it’s history, creating crossplatform games for desktops, mobiles, tablets and other devices Javascript could run on. During the talk he will present couple methods of animations, implementation of game’s logic and different ways to communicate between players.

Published in: Technology, Design
no profile picture user

  • Login to see the comments

Show More

HTML5 as a game console

  1. 1. HTML5 as a Game Console Michał Budzyński @michalbe
  2. 2. Who is this guy? JavaScript Developer from Warsaw, Poland @michalbe
  3. 3. Open Web Game Developer Who is this guy? @michalbe
  4. 4. Organizer of onG ameStart @onGameStart http://ongamestart.com Who is this guy? @michalbe
  5. 5. Creator of CSS Nyan Cat & other ridiculus web demos http://michalbe.github.com/css-nyan-cat/ Who is this guy? @michalbe
  6. 6. W3C HTML5 GameDev c oach Who is this guy? @michalbe
  7. 7. What about games? @michalbe
  8. 8. History @michalbe
  9. 9. 1999 – Scott Porter <ul>GAME LIB www.smashcat.org/personal </ul>History @michalbe
  10. 10. <ul>2000 - DHTML </ul>@michalbe History @michalbe
  11. 11. <ul>2000 - DHTML </ul>@michalbe History @michalbe
  12. 12. 2004 – Crisp DHTML Lemmings elizium.nu/scripts/lemmings History @michalbe
  13. 13. 2003 – Jacob Seidelin 14KB Super Mario javascriptgaming.com nihilogic.dk
  14. 14. <ul>2005 - AJAX </ul>@michalbe History @michalbe
  15. 15. <ul>2005 - AJAX </ul>History @michalbe
  16. 16. 2008 – Martin Kool Sarien sarien.net History @michalbe
  17. 17. 2008 Andreas Rosdal FreeCiv freeciv.net History @michalbe
  18. 18. 2010 - HTML5 History @michalbe
  19. 19. DOM Canvas SVG WebSockets CSS WebGL etc. HTML5 @michalbe
  20. 20. JavaScript® is our language and DOM is our library. Simple event handling Still faster than Canvas or SVG HTML5 - DOM @michalbe
  21. 21. Simple drawing API Image manipulation No support for events or redrawing of a particular element http://www.benjoffe.com/code/games/torus/ HTML5 - Canvas @michalbe
  22. 22. 3D graphics in 2D world Origami3D http://projects.mariusgundersen.net/Origami3D/examples/ HTML5 - Canvas @michalbe
  23. 23. CSS support Support for events Libraries like Raphaël JS HTML5 - SVG @michalbe
  24. 24. Massively Multiplayer games Rawkets http://rawkets.com HTML5 - WebSockets @michalbe
  25. 25. XHR Long polling JSONP polling Forever iframes FlashSockets (fuuuuuuuuuu!) WebSockets HTML5 - WebSockets @michalbe
  26. 26. One to rule them all! HTML5 - WebSockets @michalbe
  27. 27. One to rule them all! HTML5 - WebSockets @michalbe
  28. 28. How to use Socket.io without server-side parts of our games? HTML5 - WebSockets @michalbe
  29. 29. How to use Socket.io without server-side parts of our games? We cannot. HTML5 - WebSockets @michalbe
  30. 30. EasyWebSocket - a WebSocket client to broadcast messages to webpages http://easywebsocket.org/ by @jerome_etienne HTML5 - WebSockets @michalbe
  31. 31. So EasyWebSocket is P2P browser connection! @michalbe HTML5 - WebSockets @michalbe
  32. 32. So EasyWebSocket is P2P browser connection! @michalbe NOPE! HTML5 - WebSockets @michalbe
  33. 33. Hardware accelerated transformations & transitions CSS Animations like a LEGO blocks Implementing of simple logic @michalbe HTML5 - CSS3 @michalbe
  34. 34. HTML5 - CSS @michalbe
  35. 35. <ul>https://developer.mozilla.org/en-US/demos/detail/css-nyan-cat </ul>HTML5 - CSS @michalbe
  36. 36. <ul>Cordobo http://cordobo.com/wp-content/uploads/pure-css-animated-3d-super-mario/ </ul>HTML5 - CSS @michalbe
  37. 37. HTML5 - CSS Programming in CSS? @michalbe
  38. 38. HTML5 - CSS Programming in CSS? Yes, CSS3 is Turing complete! <ul>Eli Fox Epsteinh github.com/elitheeli/stupid-machines </ul>@michalbe
  39. 39. HTML5 - CSS Programming in CSS? Ok, but what about games in pure CSS? @michalbe
  40. 40. HTML5 - CSS It's possible! <ul>GeckoTang http://jsdo.it/GeckoTang/4rXg </ul>@michalbe
  41. 41. HTML5 - CSS 3D engine in CSS? <ul>Andres Pagella http://andrespagella.com/adventures-3d-world-using-css-javascript </ul>@michalbe
  42. 42. 3d context of Canvas The same API as OpenGL® Shaders! Model import, textures, etc. Awesome libraries like Three.js HTML5 - WebGL @michalbe
  43. 43. Brandon Jones http://media.tojicode.com/q3bsp/ @michalbe HTML5 - WebGL @michalbe
  44. 44. HTML5 - CSS 2D in WebGL? @michalbe
  45. 45. HTML5 - CSS 2D in WebGL? <ul>GameClosure https://github.com/gameclosure/webgl-2d </ul>@michalbe
  46. 46. HTML5 - CSS 2D in WebGL? <ul>Dominic Szablewski http://www.phoboslab.org/xtype </ul>@michalbe
  47. 47. Phobos Lab http://www.phoboslab.org/log/2011/03/the-state-of-html5-audio HTML5 Video & audio @michalbe
  48. 48. HTML5 Game Frameworks/Engines https://gist.github.com/768272 HTML5 @michalbe
  49. 49. GWT ports of Android™ games Rovio http://chrome.angrybirds.com/ HTML5 @michalbe
  50. 50. Mobile Web @michalbe
  51. 51. Native Web Apps for Palm® Devices Mobile Web @michalbe
  52. 52. Problem ? Mobile Web @michalbe
  53. 53. Problem ? Mobile Web @michalbe
  54. 54. Solution? Mobile Web @michalbe
  55. 55. Web technologies! http://en.wikipedia.org/wiki/Mobile_application_development Mobile Web @michalbe
  56. 56. Geolocation Vibration Accelerometer Sound (play & record) !! Camera Filesystem Gestures & Multitouch SMS Mobile Web @michalbe
  57. 57. HTML5 mobile games outside the browser http://www.phoboslab.org/log/2011/04/ios-and-javascript-for-real-this-time Mobile Web @michalbe
  58. 58. http://www.appmobi.com/ Mobile Web @michalbe
  59. 59. Tools for mobile HTML5 development http://blackberry.github.com/Alice/ Mobile Web @michalbe
  60. 60. Tools for mobile HTML5 development http://xuijs.com/ Mobile Web @michalbe
  61. 61. Tools for mobile HTML5 development http://bly.sk Mobile Web @michalbe
  62. 62. @michalbe Nice, but why should I care? @michalbe
  63. 63. Nice, but why should I care? @michalbe
  64. 64. Nice but why should I care? @michalbe
  65. 65. Nice but why should I care? @michalbe
  66. 66. Nice but why should I care? @michalbe
  67. 67. Nice but why should I care? @michalbe
  68. 68. Nice but why should I care? @michalbe
  69. 69. Nice but why should I care? @michalbe
  70. 70. Nice but why should I care? @michalbe
  71. 71. Nice but why should I care? @michalbe
  72. 72. Nice but why should I care? Boot2Gecko wiki.mozilla.org/B2G @michalbe
  73. 73. HTML5 is the future @michalbe
  74. 74. HTML5 is the future @michalbe
  75. 75. http://html5games.com http://canvasdemos.com https://gaming.mozillalabs.com/ http://michalbe.blogspot.com http://twitter.com/michalbe http://onGameStart.com http://mibbu.eu What's next? @michalbe
  76. 76. http://onGameStart.com What's next? @michalbe
  77. 77. Questions? Follow me on twitter: @michalbe @michalbe Thanks! @michalbe

×