GDC 2016 is coming up, and I did a talk (How to Implement AAA Game UI in HTML and JavaScript) in last year’s GDC about my work building SimCity 2013’s UI system purely in HTML/CSS/JavaScript. I just realized I never bothered to upload the slides for it! Personally I hate it when other speakers do that, so I hope that one person who might have been interested in them could finally download them for reference!
The slides can be found here:
If you didn’t attend the talk, just for some context I believe we were one of the few rare studios that decided to use 100% web technology (HTML/CSS/JavaScript) for in-game UI. We embedded a web browser (through EA WebKit) and the whole game UI was basically a web page running inside the browser overlaid on top of the game. It’s not a perfect solution but it does have some advantages. I believe the UI/UX is usually considered to be one of the best parts of the whole game. Our UX designers’ hard work aside I do like to think the tech we used helped!
If you were at the talk last year, I added an extra video (showing how the WebKit inspector works in the game) and cleaned up some notes and details on the slides. My talk was actually reviewed quite poorly (ranked 32 out of 33 programming track talks) with a lot of complaints on my poor presentation skill and lack of details. Initial huge ouch aside, there were some constructive criticism as well. Hopefully lesson learned for next talk I give, whatever it is…
There was a part in the talk where I glossed over about Google Closure Compiler which we used to compress source code and perform optimizations. It has two modes: simple, and advanced (or technically a third one, “custom”, if you are willing to play with their difference compilation settings). Advanced mode does aggressive code transformation at the cost of requiring you to write code in a specific way. The most important part was that it basically forbids reflections (i.e. obj.property is different from obj[“property”] under the compiler). We stuck with simple optimizations because advanced mode required quite a bit of code rewrite and with a team the inertia became a bit large and it was hard to justify the time needed to re-architect some of the codebase (which used reflections) for unknown amount of gains.
I did get our core UI library compatible with advanced mode and ran some synthetic tests on them (mostly with hundreds of UI controls on screen, each with some animations associated with them). In those cases advanced mode actually improved the runtime performance by 20-30%! That said those code involved animating hundreds of timeline and were extremely JS math heavy with lots of function calls (which would likely be where the function inlining optimization helped). If you are intending to run heavy JS code and have a tight performance budget, consider using advanced mode! It may give you an extra performance boost, and using that mode does require some planning. We also didn’t look too closely into other more “modern” compressors like Uglify.js.
One last thing about the simple mode was that it didn’t really do enough variable renaming or dead code removal, so a lot of our debugging code was left intact. This may not have been a bad thing in the end as it allows the modding community to understand how the UI works better, but something to keep in mind. With advanced mode it doubles as an obfuscator which allows you to make your code a lot harder to reverse engineer or read. And it will remove your debug code as long as you look something like this (with the correct compilation flags):
if (GAME_DEBUG) {
// debug code
}
I still think using web-related tech in game has a lot of future! The amount of piggybacking of work done by thousands of contributors is pretty hard to beat. If you look at theming / customization ability of a lot of game engine’s UI systems, for example, they would look quite a bit more primitive than say CSS. Web tech is not perfect by any means (performance being one primary concern), but if your game need rich, complex 2D UI, it deserves a least a thought.
Update 2021-09-23: Fixed link to the slides so they don’t point to expired Google Drive links.