HTML5 as a game console

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
GAME LIB www.smashcat.org/personal
History @michalbe

2000 - DHTML
@michalbe History @michalbe

2004 – Crisp DHTML Lemmings elizium.nu/scripts/lemmings History @michalbe

2003 – Jacob Seidelin 14KB Super Mario javascriptgaming.com nihilogic.dk

2005 - AJAX
@michalbe History @michalbe

2005 - AJAX
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 @michalbe

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

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

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 - WebSockets @michalbe

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 @michalbe HTML5 - CSS3 @michalbe

HTML5 - CSS @michalbe

https://developer.mozilla.org/en-US/demos/detail/css-nyan-cat

Cordobo http://cordobo.com/wp-content/uploads/pure-css-animated-3d-super-mario/

HTML5 - CSS Programming in CSS? @michalbe

HTML5 - CSS Programming in CSS? Yes, CSS3 is Turing complete!
Eli Fox Epsteinh github.com/elitheeli/stupid-machines
@michalbe

HTML5 - CSS Programming in CSS? Ok, but what about games in pure CSS? @michalbe

HTML5 - CSS It's possible!
GeckoTang http://jsdo.it/GeckoTang/4rXg
@michalbe

HTML5 - CSS 3D engine in CSS?
Andres Pagella http://andrespagella.com/adventures-3d-world-using-css-javascript
@michalbe

3d context of Canvas The same API as OpenGL® Shaders! Model import, textures, etc. Awesome libraries like Three.js HTML5 - WebGL @michalbe

Brandon Jones http://media.tojicode.com/q3bsp/ @michalbe HTML5 - WebGL @michalbe

HTML5 - CSS 2D in WebGL? @michalbe

HTML5 - CSS 2D in WebGL?
GameClosure https://github.com/gameclosure/webgl-2d
@michalbe

HTML5 - CSS 2D in WebGL?
Dominic Szablewski http://www.phoboslab.org/xtype
@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

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 @michalbe

HTML5 mobile games outside the browser http://www.phoboslab.org/log/2011/04/ios-and-javascript-for-real-this-time Mobile Web @michalbe

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? Boot2Gecko wiki.mozilla.org/B2G @michalbe

HTML5 is the future @michalbe

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

http://onGameStart.com What's next? @michalbe

Questions? Follow me on twitter: @michalbe @michalbe Thanks! @michalbe

http://www.html5gamedevelopment.org	4587
http://www.html5gamedevelopment.com	1617
http://localhost	16
http://translate.googleusercontent.com	7
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

HTML5 as a game console

by michalbu

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 6,237

Statistics

HTML5 as a game console Presentation Transcript