SLIDE 1
HTML5: The New UI Library For Games
> Chad Austin > Technical Director, IMVU
HTML5: The New UI Library For Games > Chad Austin > Technical - - PowerPoint PPT Presentation
HTML5: The New UI Library For Games > Chad Austin > Technical - - PowerPoint PPT Presentation
HTML5: The New UI Library For Games > Chad Austin > Technical Director, IMVU HTML IS WINNING Browser wars are hotter than ever > Features like canvas, SVG, CSS3, becoming standard > GPU accelerated compositing &
SLIDE 2
SLIDE 3
SLIDE 4
Browser wars are hotter than ever
> Features like canvas, SVG, CSS3,
becoming standard
> GPU accelerated compositing &
rasterization
> Tracing JITs
SLIDE 5
Terminology
> HTML = markup + CSS + JS + Canvas +
sockets + etc.
> Mozilla = Firefox = Gecko
SLIDE 6
HISTORY OF IMVU’S UI
SLIDE 7
2004-2007: C++ & OpenGL
SLIDE 8
C++, GL, Win32
> Cons
> Hard to find talent > Hard to maintain > Long recompiles and iteration times > Inflexible
SLIDE 9
2007-2009: Flash
SLIDE 10
Flash, Flex
> Pros
> Able to iterate > Easy animation, video
> Cons
> High memory usage, address space leaks > Looong mxmlc compile times > Buggy
SLIDE 11
2009+: HTML
SLIDE 12
Pros!
> Very fast iteration > Matched intended design to the pixel > Performance was fantastic > Render to texture and composite in 3D
scene
SLIDE 13
2009+: HTML
SLIDE 14
2009+: HTML
SLIDE 15
2009+: HTML
SLIDE 16
BENEFITS OF HTML
SLIDE 17
Lingua Franca
SLIDE 18
Hot Reloading, Firebug
SLIDE 19
jQuery, YUI
SLIDE 20
Advertising
SLIDE 21
DEMO
SLIDE 22
PERFORMANCE?
SLIDE 23
If your browser can handle this…
SLIDE 24
Performance
> Not a bottleneck for us > Even 3D overlays! > <1 MB per Gecko document loaded
> 1000s of friends, inventory items
SLIDE 25
Performance (Friends)
Some DOM ops are O(n), use b-tree
SLIDE 26
Performance (Inventory)
Be careful to release image elements when scrolled out of view
SLIDE 27
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++
SLIDE 28
WHO ELSE USES HTML FOR UI?
SLIDE 29
Wolfire – Overgrowth
SLIDE 30
Wolfire – Overgrowth (con’t)
SLIDE 31
Electronic Arts – Skate 3
SLIDE 32
Netflix on PlayStation 3
SLIDE 33
In-game Browsers
> Second Life > CCP – EVE Online > Funcom – Anarchy Online, Age of Conan > ArenaNet – Guild Wars 2
SLIDE 34
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
SLIDE 35
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/
SLIDE 36
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!
SLIDE 37