html5 as a game console
TRANSCRIPT
HTML5 as a Game Console
Micha Budzyski
@michalbe
Who is this guy?
JavaScript Developer from Warsaw, Poland
@michalbe
Open Web Game Developer
Who is this guy?
@michalbe
Organizer of onGameStart @onGameStart http://ongamestart.com
Who is this guy?
@michalbe
Creator of CSS Nyan Cat & other ridiculus web demoshttp://michalbe.github.com/css-nyan-cat/
Who is this guy?
@michalbeWeb is not only our work, is our lifestyle. And there is alway a lot of fun in a life as well.
W3C HTML5 GameDev coach
Who is this guy?
@michalbeKoucz
What about games?
@michalbe
History
@michalbe
1999 Scott Porter
GAME LIBwww.smashcat.org/personal
History
@michalbe
2000 - DHTML
@michalbe
History
@michalbe
2000 - DHTML
@michalbe
History
@michalbe
2004 Crisp
DHTML Lemmingselizium.nu/scripts/lemmings
History
@michalbe
2003 Jacob Seidelin
14KB Super Mariojavascriptgaming.comnihilogic.dk
2005 - AJAX
@michalbe
History
@michalbe
2005 - AJAX
History
@michalbe
2008 Martin Kool
Sariensarien.net
History
@michalbe
2008 Andreas Rosdal
FreeCivfreeciv.net
History
@michalbe
2010 - HTML5
History
@michalbe
DOMCanvasSVGWebSocketsCSSWebGLetc.
HTML5
@michalbe
JavaScript is our language and DOM is our library.Simple event handlingStill faster than Canvas or SVG
HTML5 - DOM
@michalbe
Simple drawing APIImage manipulationNo 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 supportSupport for eventsLibraries like Raphal JS
HTML5 - SVG
@michalbe
Massively Multiplayer games
Rawketshttp://rawkets.com
HTML5 - WebSockets
@michalbe
XHRLong pollingJSONP pollingForever iframesFlashSockets (fuuuuuuuuuu!)WebSockets
HTML5 - WebSockets
@michalbe
One to rule them all!
HTML5 - WebSockets
@michalbe
One to rule them all!
@michalbeHTML5 - WebSockets
How to use Socket.io without server-side parts of our games?
@michalbeHTML5 - WebSockets
How to use Socket.io without server-side parts of our games?
We cannot.
@michalbeHTML5 - WebSockets
EasyWebSocket - a WebSocket client to broadcast messages to webpageshttp://easywebsocket.org/by @jerome_etienne
@michalbeHTML5 - WebSockets
So EasyWebSocket is P2P browser connection!
@michalbe
@michalbeHTML5 - WebSockets
So EasyWebSocket is P2P browser connection!
@michalbe
NOPE!
@michalbeHTML5 - WebSockets
Hardware accelerated transformations & transitionsCSS Animations like a LEGO blocksImplementing of simple logic
@michalbe
@michalbeHTML5 - CSS3
@michalbeHTML5 - CSS
https://developer.mozilla.org/en-US/demos/detail/css-nyan-cat
@michalbeHTML5 - CSS
Cordobo http://cordobo.com/wp-content/uploads/pure-css-animated-3d-super-mario/
@michalbeHTML5 - CSS
@michalbeHTML5 - CSS
Programming in CSS?
@michalbeHTML5 - CSS
Programming in CSS?Yes, CSS3 is Turing complete!
Eli Fox Epsteinh github.com/elitheeli/stupid-machines
@michalbeHTML5 - CSS
Programming in CSS?Ok, but what about games in pure CSS?
@michalbeHTML5 - CSS
It's possible!
GeckoTang http://jsdo.it/GeckoTang/4rXg
@michalbeHTML5 - CSS
3D engine in CSS?
Andres Pagella http://andrespagella.com/adventures-3d-world-using-css-javascript
3d context of CanvasThe same API as OpenGLShaders!Model import, textures, etc.Awesome libraries like Three.js
@michalbeHTML5 - WebGL
Brandon Jones http://media.tojicode.com/q3bsp/
@michalbe
@michalbeHTML5 - WebGL
@michalbeHTML5 - CSS
2D in WebGL?
@michalbeHTML5 - CSS
2D in WebGL?
GameClosure https://github.com/gameclosure/webgl-2d
@michalbeHTML5 - CSS
2D in WebGL?
Dominic Szablewski http://www.phoboslab.org/xtype
Phobos Lab http://www.phoboslab.org/log/2011/03/the-state-of-html5-audio
@michalbeHTML5
Video & audio
HTML5 Game Frameworks/Engines https://gist.github.com/768272
@michalbeHTML5
GWT ports of Android games
Roviohttp://chrome.angrybirds.com/
@michalbeHTML5
@michalbeMobile Web
Native Web Apps for Palm Devices
@michalbeMobile Web
Problem?
@michalbeMobile Web
Problem?
@michalbeMobile Web
Solution?
@michalbeMobile Web
Web technologies! http://en.wikipedia.org/wiki/Mobile_application_development
@michalbeMobile Web
GeolocationVibrationAccelerometerSound (play & record) !!CameraFilesystem Gestures & MultitouchSMS
@michalbeMobile Web
HTML5 mobile games outside the browser
http://www.phoboslab.org/log/2011/04/ios-and-javascript-for-real-this-time
@michalbeMobile Web
http://www.appmobi.com/
@michalbeMobile Web
Tools for mobile HTML5 development
http://blackberry.github.com/Alice/
@michalbeMobile Web
Tools for mobile HTML5 development
http://xuijs.com/
@michalbeMobile Web
Tools for mobile HTML5 development
http://bly.sk
@michalbeMobile Web
@michalbe
@michalbeNice, but why should I care?
@michalbeNice, but why should I care?
@michalbeNice but why should I care?
@michalbeNice but why should I care?
@michalbeNice but why should I care?
@michalbeNice but why should I care?
@michalbeNice but why should I care?
@michalbeNice but why should I care?
@michalbeNice but why should I care?
@michalbeNice but why should I care?
@michalbeNice but why should I care?
Boot2Geckowiki.mozilla.org/B2G
@michalbeHTML5 is the future
@michalbeHTML5 is the future
http://html5games.comhttp://canvasdemos.comhttps://gaming.mozillalabs.com/http://michalbe.blogspot.comhttp://twitter.com/michalbehttp://onGameStart.comhttp://mibbu.eu
@michalbeWhat's next?
http://onGameStart.com
@michalbeWhat's next?
Questions?
Follow me on twitter: @michalbe
@michalbe
@michalbeThanks!