HTML5: The New UI Library ForGames>  Chad Austin>  Technical Director, IMVU
HTML IS WINNING
Browser wars are hotter thanever>  Features  like canvas, SVG, CSS3,    becoming standard>  GPU accelerated compositing ...
Terminology>  HTML   = markup + CSS + JS + Canvas +    sockets + etc.>  Mozilla = Firefox = Gecko
HISTORY OF IMVU’S UI
2004-2007: C++ & OpenGL
C++, GL, Win32>  Cons   >  Hard  to find talent   >  Hard to maintain   >  Long recompiles and iteration times   >  I...
2007-2009: Flash
Flash, Flex>  Pros     >  Able to iterate     >  Easy animation, video>  Cons    >  High memory usage, address space ...
2009+: HTML
Pros!>  Very fast iteration>  Matched intended design to the pixel>  Performance was fantastic>  Render to texture and...
2009+: HTML
2009+: HTML
2009+: HTML
BENEFITS OF HTML
Lingua Franca
Hot Reloading, Firebug
jQuery, YUI
Advertising
DEMO
PERFORMANCE?
If your browser can handle this…
Performance>  Nota bottleneck for us>  Even 3D overlays!>  <1 MB per Gecko document loaded   >  1000s   of friends, in...
Performance (Friends)  Some DOM ops are O(n), use b-tree
Performance (Inventory)Be careful to release image elements when scrolled out of view
Today’s Drawbacks>  Elaborate animation still easier in Flash    than SVG/Canvas/JS>  3D: WebGL not prime time yet>  Tr...
WHO ELSE USES HTML FORUI?
Wolfire – Overgrowth
Wolfire – Overgrowth (con’t)
Electronic Arts – Skate 3
Netflix on PlayStation 3
In-game Browsers>  Second Life>  CCP – EVE Online>  Funcom – Anarchy Online, Age of Conan>  ArenaNet – Guild Wars 2
Getting Started>    WebKit http://webkit.org/ vs. Gecko      https://developer.mozilla.org/en/Gecko>    We chose Gecko, ...
Wrappers>    http://ubrowser.com/>    http://wiki.secondlife.com/wiki/LlMozLib>    http://wiki.secondlife.com/wiki/LLQt...
Recap>  HTML  and web technologies are    advancing quickly>  Already suitable for in-game UIs>  Rapid development and ...
Questions?      chad@imvu.comhttp://engineering.imvu.com        We’re hiring!
HTML5: New UI Library for Games - Chad Austin
Upcoming SlideShare
Loading in …5
×

HTML5: New UI Library for Games - Chad Austin

5,973
-1

Published on

Published in: Design, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,973
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
38
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

HTML5: New UI Library for Games - Chad Austin

  1. 1. HTML5: The New UI Library ForGames>  Chad Austin>  Technical Director, IMVU
  2. 2. HTML IS WINNING
  3. 3. Browser wars are hotter thanever>  Features like canvas, SVG, CSS3, becoming standard>  GPU accelerated compositing & rasterization>  Tracing JITs
  4. 4. Terminology>  HTML = markup + CSS + JS + Canvas + sockets + etc.>  Mozilla = Firefox = Gecko
  5. 5. HISTORY OF IMVU’S UI
  6. 6. 2004-2007: C++ & OpenGL
  7. 7. C++, GL, Win32>  Cons >  Hard to find talent >  Hard to maintain >  Long recompiles and iteration times >  Inflexible
  8. 8. 2007-2009: Flash
  9. 9. Flash, Flex>  Pros >  Able to iterate >  Easy animation, video>  Cons >  High memory usage, address space leaks >  Looong mxmlc compile times >  Buggy
  10. 10. 2009+: HTML
  11. 11. Pros!>  Very fast iteration>  Matched intended design to the pixel>  Performance was fantastic>  Render to texture and composite in 3D scene
  12. 12. 2009+: HTML
  13. 13. 2009+: HTML
  14. 14. 2009+: HTML
  15. 15. BENEFITS OF HTML
  16. 16. Lingua Franca
  17. 17. Hot Reloading, Firebug
  18. 18. jQuery, YUI
  19. 19. Advertising
  20. 20. DEMO
  21. 21. PERFORMANCE?
  22. 22. If your browser can handle this…
  23. 23. Performance>  Nota bottleneck for us>  Even 3D overlays!>  <1 MB per Gecko document loaded >  1000s of friends, inventory items
  24. 24. Performance (Friends) Some DOM ops are O(n), use b-tree
  25. 25. Performance (Inventory)Be careful to release image elements when scrolled out of view
  26. 26. Today’s Drawbacks>  Elaborate animation still easier in Flash than SVG/Canvas/JS>  3D: WebGL not prime time yet>  Tracing JITs hungrier than Lua/C++
  27. 27. WHO ELSE USES HTML FORUI?
  28. 28. Wolfire – Overgrowth
  29. 29. Wolfire – Overgrowth (con’t)
  30. 30. Electronic Arts – Skate 3
  31. 31. Netflix on PlayStation 3
  32. 32. In-game Browsers>  Second Life>  CCP – EVE Online>  Funcom – Anarchy Online, Age of Conan>  ArenaNet – Guild Wars 2
  33. 33. Getting Started>  WebKit http://webkit.org/ vs. Gecko https://developer.mozilla.org/en/Gecko>  We chose Gecko, most use WebKit (EA’s PS3 port: http://gpl.ea.com/skate3.html)>  Leverage entire stack: stream pixels from HTTP into texture
  34. 34. Wrappers>  http://ubrowser.com/>  http://wiki.secondlife.com/wiki/LlMozLib>  http://wiki.secondlife.com/wiki/LLQtWebKit>  http://www.khrona.com/products/awesomium/>  http://berkelium.org/
  35. 35. Recap>  HTML and web technologies are advancing quickly>  Already suitable for in-game UIs>  Rapid development and iteration>  Worked for us, may work for you!
  36. 36. Questions? chad@imvu.comhttp://engineering.imvu.com We’re hiring!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×