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!