Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real

1,018 views

Published on

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,018
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real

  1. 1. DESARROLLO DE VIDEOJUEGOS CON HTML5, CSS3 Y JS EN EL MUNDO REAL MARIO ANDRES PAGELLA HTTP://WWW.ANDRESPAGELLA.COM @MAPAGELLA
  2. 2. (NUEVO LIBRO “COMING SOON”)
  3. 3. “LET’S RECAP” (ESTO ES LO QUE NOS PROMETIERON)
  4. 4. 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
  5. 5. 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
  6. 6. “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
  7. 7. 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...
  8. 8. ESO QUISIERA… PERO NO LO TENGO EN STOCK
  9. 9. “DIVERSIDAD DE DISPOSITIVOS”
  10. 10. DEMASIADO DIVERSO…
  11. 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 WebAudio Joystick
  12. 12. ¿Y AHORA?
  13. 13. 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.
  14. 14. “A DIFERENCIA DE FLASH, NUESTROS JUEGOS FUNCIONAN EN MOBILE TAMBIEN” ¿…NO?
  15. 15. PROGRESSIVE ENHANCEMENT VS. GRACEFUL DEGRADATION
  16. 16. PROGRESSIVE ENHANCEMENT “FUTURE READY”
  17. 17. ¿PARECE DESARROLLO DE FRONTEND? PARECE NO. ES.
  18. 18. “ RESPONSIVE GAME DEVELOPMENT ” ¡LITERALMENTE!
  19. 19. 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)
  20. 20. MÉTODOS DE RENDERING WEBGL CANVAS DOM + CSS3 SVG
  21. 21. MÉTODOS DE RENDERING WEBGL CANVAS DOM + CSS3 SVG
  22. 22. MÉTODOS DE RENDERING WEBGL CANVAS DOM + CSS3 SVG
  23. 23. MÉTODOS DE RENDERING WEBGL CANVAS DOM + CSS3 SVG
  24. 24. MÉTODOS DE RENDERING WEBGL CANVAS DOM + CSS3 SVG
  25. 25. HERRAMIENTAS
  26. 26. ¡GRACIAS! HTTP://WWW.ANDRESPAGELLA.COM @MAPAGELLA

×