Session Name: | How to Implement AAA Game UI in HTML and JavaScript |
Speaker(s): | Yee Cheng Chin |
Company Name(s): | Electronic Arts/Maxis |
Track / Format: | Programming |
Overview: | HTML UI has been slowly but steadily gaining in popularity as the choice for UI technology in games. However, due to performance and tooling issues, it has mostly been used only for menus and social features. This talk aims to show that it's possible to go all-in with using web technology for game UI by using Maxis' UI system built entirely in HTML/CSS/JavaScript, which shipped in SimCity (2013), as an example. This talk will cover the benefits of using existing web technology, how to integrate web UI into your game efficiently (in our case using EA WebKit), hardware acceleration, how to take advantage of tools such as JavaScript debugger, as well as potential issues such as memory bloat and efficient JS/C++ bindings. It will also demo Maxis' MUiLE editor as an example of building a JS-based UI editor for quick iteration without requiring designers know the intricacies of HTML and CSS. |