HTML5 as a game console

19,325
-1

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
19,325
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
118
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
  • 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.

    ×