0
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

17,539

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
1 Comment
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
17,539
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
116
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide
  • Web is not only our work, is our lifestyle. And there is alway a lot of fun in a life as well.
  • Koucz
  • Transcript of "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
    1. A particular slide catching your eye?

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

    ×