1. DESARROLLO DE
VIDEOJUEGOS
CON HTML5, CSS3 Y JS
EN EL MUNDO REAL
MARIO ANDRES PAGELLA
HTTP://WWW.ANDRESPAGELLA.COM
@MAPAGELLA

3. (NUEVO LIBRO “COMING SOON”)

4. “LET’S RECAP”
(ESTO ES LO QUE NOS PROMETIERON)

6. PCs
iOS
C++
X
X
C#
X
Java
X
Obj-C
Dep.
Act.Scr.
X
BlackBerryOS Android WinMo
Win8
MeeGo
X
X
X
X
Dep.
Dep.
X
X
X

7. PCs
iOS
C++
X
X
C#
X
Java
X
Obj-C
Dep.
Act.Scr.
X
JS
X!
BlackBerryOS Android WinMo
Win8
MeeGo
X
X
X
X
Dep.
Dep.
X
X
X
X
X
X
X
X
X

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

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

13. ESO QUISIERA…
PERO NO LO TENGO EN STOCK

15. “DIVERSIDAD DE
DISPOSITIVOS”

16. DEMASIADO DIVERSO…

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

21. ¿Y AHORA?

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

26. “A DIFERENCIA DE
FLASH, NUESTROS
JUEGOS FUNCIONAN
EN MOBILE TAMBIEN”
¿…NO?

27. PROGRESSIVE
ENHANCEMENT
VS.
GRACEFUL
DEGRADATION

28. PROGRESSIVE
ENHANCEMENT
“FUTURE READY”

29. ¿PARECE DESARROLLO
DE FRONTEND?
PARECE NO. ES.

30. “ RESPONSIVE
GAME DEVELOPMENT ”
¡LITERALMENTE!

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

32. MÉTODOS DE RENDERING
WEBGL
CANVAS
DOM + CSS3
SVG

33. MÉTODOS DE RENDERING
WEBGL
CANVAS
DOM + CSS3
SVG

34. MÉTODOS DE RENDERING
WEBGL
CANVAS
DOM + CSS3
SVG

35. MÉTODOS DE RENDERING
WEBGL
CANVAS
DOM + CSS3
SVG

36. MÉTODOS DE RENDERING
WEBGL
CANVAS
DOM + CSS3
SVG

37. HERRAMIENTAS

41. ¡GRACIAS!
HTTP://WWW.ANDRESPAGELLA.COM
@MAPAGELLA