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.
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.
What is Awesomium?
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.