desarrollo de videojuegos con html5, css3 y javascript en el mundo real
TRANSCRIPT
DESARROLLO DE VIDEOJUEGOS CON HTML5, CSS3 Y JS EN EL MUNDO REAL
MARIO ANDRES PAGELLA
HTTP://WWW.ANDRESPAGELLA.COM
@MAPAGELLA
(NUEVO LIBRO “COMING SOON”)
“LET’S RECAP”(ESTO ES LO QUE NOS PROMETIERON)
PCs iOS BlackBerryOS Android WinMo Win8 MeeGoC++ X X XC# X X X
Java X X X XObj-C Dep. X
Act.Scr. X Dep. Dep.
PCs iOS BlackBerryOS Android WinMo Win8 MeeGoC++ X X XC# X X X
Java X X X XObj-C Dep. X
Act.Scr. X Dep. Dep.JS X! X X X X X X
“Flash to Focus on PC Browsing and Mobile Apps; Adobe to More Aggressively Contribute to HTML5” (9 Nov, 2011)Fuente: http://blogs.adobe.com/conversations/2011/11/flash-focus.html
“Microsoft may halt development work on Silverlight plugin after next release” (9 Nov, 2011)Fuente: http://www.theverge.com/2011/11/9/2548975/microsoft-may-halt-development-work-on-silverlight-after-next-release, Mary Jo Foley
“For the web to move forward and for consumers to get the most out of touch-first browsing, Windows 8 is as HTML5-only as possible, and plug-in free.” (14 Sep, 2011)Fuente: http://blogs.msdn.com/b/b8/archive/2011/09/14/metro-style-browsing-and-plug-in-free-html5.aspx
HTML5 APIs
Canvas WebStorage Offline Storage
WebGL Drag and Drop Fullscreen
Audio WebSQL / IndexedDB Browser History
WebSockets File MouseLock
WebWorkers Filesystem Touch/Orientation
Video Joystick y muchas mas...
ESO QUISIERA…PERO NO LO TENGO EN STOCK
“DIVERSIDAD DE DISPOSITIVOS”
DEMASIADO DIVERSO…
HTML5 APIs
Canvas WebStorage Offline Storage
WebGL Drag and Drop Fullscreen
Audio WebSQL / IndexedDB Browser History
WebSockets File MouseLock
WebWorkers Filesystem Touch/Orientation
Video WebAudio Joystick
¿Y AHORA?
HACER DINERO… HACIENDO VIDEO JUEGOS
http://www.marketjs.com/ https://www.fgl.com/
http://www.kongregate.com http://clay.io
http://www.scirra.com http://corp.playspan.com/
etc.
“A DIFERENCIA DE FLASH, NUESTROS JUEGOS FUNCIONAN EN MOBILE TAMBIEN”
¿…NO?
PROGRESSIVE ENHANCEMENT
GRACEFUL DEGRADATION
VS.
PROGRESSIVE ENHANCEMENT
“FUTURE READY”
PROGRESSIVE ENHANCEMENT
¿PARECE DESARROLLO DE FRONTEND?PARECE NO. ES.
“ RESPONSIVE GAME DEVELOPMENT ”
¡LITERALMENTE!
var w = 320, h = 480, ar = Math.min(window.innerHeight / h, window.innerWidth / w), aw = (w * ar), // Adjusted width (w/aspect ratio) ah = (h * ar); // Adjusted height (w/aspect ratio)
WEBGL CANVAS DOM + CSS3
SVG
MÉTODOS DE RENDERING
WEBGL CANVAS DOM + CSS3
SVG
MÉTODOS DE RENDERING
WEBGL
WEBGL CANVAS DOM + CSS3
SVG
MÉTODOS DE RENDERING
CANVAS
WEBGL CANVAS DOM + CSS3
SVG
MÉTODOS DE RENDERING
WEBGL CANVAS DOM + CSS3
SVG
MÉTODOS DE RENDERING
HERRAMIENTAS
¡GRACIAS!
HTTP://WWW.ANDRESPAGELLA.COM
@MAPAGELLA