There are a lot of different ways to create user interface for games. Which one to use will depend mostly the information that we need to display and the interaction requirements. So let’s take a look first at some screenshots taken from different games:
The first thing to notice is the amount of information the UI includes. In the first screens, the UI displays various indicators, pop-up messages for objectives or notifications, and maybe a map. In these cases, the interface is simple enough that can be coded in whatever programming language it’s being used in the rest of the game without too many complexities. Keep in mind that I’m not saying that they are easy to program though.
In contrast, the rest of the images show interfaces with not only more information, but also different kind of interaction as well. There are several panels with text and images, collapsible skill trees, windows that can be moved, sized or even restyled according to the player preferences.
As the interface complexity rises, we need simpler ways to create and modify them probably without having to recompile the entire game in the process. For example, World of Warcraft uses Lua to define user interfaces.
Why HTML
In the last then years there has been a lot of process towards rich user interfaces in web applications. Just take a look at the Sandbox Demo in the Ext Project Website to understand what I’m trying to say here.
By building our interfaces on top of HTML and JavaScript we not only can achieve impressive results, but also it will speed up the development process. Most of the interface requirements can be coded and tested without even starting the game. And if CSS is used as well, the entire look & feel can be changed on the fly.
What is Awesomium?
Awesomium is a windowless Web-Browser framework that renders web pages into a memory buffer that can be later used as a texture for a 3D object. Being a branch of Google Chromium project, it supports HTML 5, CSS, Javascript and even Flash.
Awesomium is really simple to use. The framework loads a URL (or file URL) and a listener object is used to respond to the different events like new requests, mouse and keyboard events, JavaScript callbacks, etc. Look at Awesomium Basic Concepts Guide for a more in depth explanation.
If you’re still skeptical about what can be achieved with HTML interfaces and this framework, just take a look at the video below:
How is Awesomium used in Crimild?
I’m using the Awesomium Framework as part of the Sandbox Project, but I’m planning on extracting the integration classes into its own library so it can be used in other projects as well.
On one side, a listener object reacts to interface events, like creating new objects when the corresponding button is pressed or starting and pausing the simulation. In addition, I’ve included a basic script editor tool using the CodeMirror2 HTML source code editor.
Another advantage of HTML interfaces is that we can include these kind of widgets with very low effort. The interface is rendered into an Image object that is later used a texture for a rectangle geometry that is displayed on top of the 3D world.
There is a downside on this approach, though. I’ve noticed some performance loss each time the UI is refreshed. It is by no means a showstopper as the Sandbox still runs at a very high FPS rate, but it is something to keep in mind when designing the UI for our games.
Stay tuned to know more about the Crimild/Awesomium integration in the future.
CRIMILD 