HTML5 as a game console
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5 as a game console

on

  • 16,572 views

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 ...

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.

Statistics

Views

Total Views
16,572
Views on SlideShare
5,874
Embed Views
10,698

Actions

Likes
8
Downloads
114
Comments
1

10 Embeds 10,698

http://www.html5gamedevelopment.com 6077
http://www.html5gamedevelopment.org 4587
http://localhost 16
http://translate.googleusercontent.com 8
https://twimg0-a.akamaihd.net 3
http://us-w1.rockmelt.com 2
http://bitly.com 2
http://webcache.googleusercontent.com 1
http://meatspin.com&_=1353220149973 HTTP 1
https://si0.twimg.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Presentation Transcript

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