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