1. 11/8/11

2. Desarrollo de Videojuegos con
HTML5, CSS3 y JavaScript
Andrés Pagella
11/8/11

3. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
11/8/11

4. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
11/8/11

5. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
11/8/11

6. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
11/8/11

7. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
PCs iOS BlackBerryOS Android WinMo MeeGo
C++ X X X
C# X X
Java X X X X
Obj-C Dep. X
Act.Scr. X Dep. Dep
.
11/8/11

8. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
PCs iOS BlackBerryOS Android WinMo MeeGo
C++ X X X
C# X X
Java X X X X
Obj-C Dep. X
Act.Scr. X Dep. Dep.
JavaScript X X X X X X
11/8/11

9. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
11/8/11

10. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
“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
11/8/11

11. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
“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
11/8/11

12. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
“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, the Metro style browser in 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/8/11

13. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
11/8/11

14. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
11/8/11

15. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
11/8/11

16. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
“Pero aparte de validar formularios, hacer pequeñas animaciones y requests con AJAX,
¿JavaScript sirve para hacer algo mas?”
11/8/11

17. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
11/8/11

18. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
11/8/11

19. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
HTML5 APIs
11/8/11

20. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
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...
11/8/11

21. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
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...
11/8/11

22. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
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...
11/8/11

23. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
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...
11/8/11

24. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
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...
11/8/11

25. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
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...
11/8/11

26. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
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...
11/8/11

27. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
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...
11/8/11

28. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
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...
11/8/11

29. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
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...
11/8/11

30. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
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...
11/8/11

31. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
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...
11/8/11

32. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
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...
11/8/11

33. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
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...
11/8/11

34. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
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...
11/8/11

35. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
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...
11/8/11

36. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
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...
11/8/11

37. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
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...
11/8/11

38. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
Angry Birds: WebGL con fallback a Canvas y Flash
11/8/11

39. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
Quake 3 + WebGL
11/8/11

40. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
WebGL + Team Fortress (solo el mapa)
11/8/11

41. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
WebGL + Kinect
11/8/11

42. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
Canvas (2D)
11/8/11

43. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
Canvas (2D)
Modo “inmediato” (no quedan referencias)
11/8/11

44. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
Canvas (2D)
Modo “inmediato” (no quedan referencias)
Permite manipulación de píxeles
11/8/11

45. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
Canvas (2D)
Modo “inmediato” (no quedan referencias)
Permite manipulación de píxeles
Performance “aceptable”
11/8/11

46. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
Canvas (2D)
Modo “inmediato” (no quedan referencias)
Permite manipulación de píxeles
Performance “aceptable”
Fácil de usar
11/8/11

47. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
Canvas (WebGL)
11/8/11

48. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
Canvas (WebGL)
Gráficos 3D en un navegador sin usar plugins
11/8/11

49. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
Canvas (WebGL)
Gráficos 3D en un navegador sin usar plugins
Basado en OpenGL ES 2.0
11/8/11

50. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
Canvas (WebGL)
Gráficos 3D en un navegador sin usar plugins
Basado en OpenGL ES 2.0
No está soportado universalmente
11/8/11

51. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
Canvas (WebGL)
Gráficos 3D en un navegador sin usar plugins
Basado en OpenGL ES 2.0
No está soportado universalmente
Ejecuta código en el GPU
11/8/11

52. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
Canvas (WebGL)
Gráficos 3D en un navegador sin usar plugins
Basado en OpenGL ES 2.0
No está soportado universalmente
Ejecuta código en el GPU
Alta performance
11/8/11

53. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
Canvas (WebGL)
Gráficos 3D en un navegador sin usar plugins
Basado en OpenGL ES 2.0
No está soportado universalmente
Ejecuta código en el GPU
Alta performance
Complejo de usar, pero existen frameworks
11/8/11

54. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
SVG (Scalable Vector Graphics)
11/8/11

55. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
SVG (Scalable Vector Graphics)
Gráficos vectoriales
11/8/11

56. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
SVG (Scalable Vector Graphics)
Gráficos vectoriales
Performance “aceptable”
11/8/11

57. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
SVG (Scalable Vector Graphics)
Gráficos vectoriales
Performance “aceptable”
Complejo de usar pero existen frameworks
11/8/11

58. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
DOM (Document Object Model)
11/8/11

59. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
DOM (Document Object Model)
Método tradicional de animación con JS
11/8/11

60. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
DOM (Document Object Model)
Método tradicional de animación con JS
Performance “muy buena”
11/8/11

61. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
DOM (Document Object Model)
Método tradicional de animación con JS
Performance “muy buena”
Fácil de usar, pero “desprolijo”
11/8/11

62. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
HTML5 Audio y Video
11/8/11

63. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
HTML5 Audio y Video
Problemas de patentes
11/8/11

64. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
HTML5 Audio y Video
Problemas de patentes
Performance pobre, poco confiable
11/8/11

65. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
HTML5 Audio y Video
Problemas de patentes
Performance pobre, poco confiable
Extremadamente fácil de usar
11/8/11

66. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
HTML5 Audio Data API
11/8/11

67. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
HTML5 Audio Data API
Manipulación y generación de sonidos con JS
11/8/11

68. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
HTML5 Audio Data API
Manipulación y generación de sonidos con JS
Muy baja latencia, excelente performance
11/8/11

69. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
HTML5 Audio Data API
Manipulación y generación de sonidos con JS
Muy baja latencia, excelente performance
No está soportado en dispositivos móviles
11/8/11

70. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
HTML5 Audio Data API
Manipulación y generación de sonidos con JS
Muy baja latencia, excelente performance
No está soportado en dispositivos móviles
Fácil de usar
11/8/11

71. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
¿Qué está incompleto o en camino?
11/8/11

72. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
¿Qué está incompleto o en camino?
Fullscreen
11/8/11

73. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
¿Qué está incompleto o en camino?
Fullscreen
MouseLock
11/8/11

74. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
¿Qué está incompleto o en camino?
Fullscreen
MouseLock
JoyStick API
11/8/11

75. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
¿Qué está incompleto o en camino?
Fullscreen
MouseLock
JoyStick API
Orientation Lock
11/8/11

76. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
“Odio el lenguaje JavaScript”
11/8/11

77. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
11/8/11

78. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
Emscripten
11/8/11

79. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
Emscripten
CoffeeScript
11/8/11

80. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
Emscripten
CoffeeScript
JS.NEXT
11/8/11

81. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
Emscripten
CoffeeScript
JS.NEXT
NaCl: Native Client (solo Chrome)
11/8/11

82. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
Emscripten
CoffeeScript
JS.NEXT
NaCl: Native Client (solo Chrome)
Dart
11/8/11

83. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
Emscripten
CoffeeScript
JS.NEXT
NaCl: Native Client (solo Chrome)
Dart
Java (vía GWT)
11/8/11

84. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript
¿Preguntas?
11/8/11