Sponsored By

Creating the GUI

A small update of what I'm currently working on: the GUI for Emancipation.

Armando Miguel Cerasoli Quintero, Blogger

April 22, 2014

3 Min Read

Original Post

These days I have been working on the GUI of my game. This is the second time I create a GUI, my first game also used a very simple UI but this time I need something more flexible.

Sometimes I get overwhelmed by software and all its complexity. I used to think that creating user interfaces was something really difficult to do and in some extent they are, but for that reason I always try to reduce all the accessories, colors, and eye candies of every software to get the foundation or the purpose of that software.

Today user interfaces are really complex in the sense that they are: animated, "intelligent", very intuitive and well organized. User interfaces is what people use these days to communicate with the software, there are no more shells, terminals or configuration files, but at the end they're just a way of gathering information from the user.

Gathering information from a console program is easier because you're already working on a pre-made application or more than just an application it's an environment with certain patterns. 

Working on console applications it's more or less like working on web applications, you send some kind of 'commands' to tell the console to display a message, the same as you do when working on a browser. When you want input from a user you also send another 'command' to the console and the console start getting keyboard input events until a certain character/key is pressed, normally Enter. In HTML is the same you create an input tag and the user can start writing on that field. But, when you're creating a videogame there are no such thing as input tags (like in HTML) or display message functions like those that the console-environment normally has. You have to create everything, and when I say everything is everything. Of course there are libraries like Allegro, that at least gives you a thin layer between raw OpenGL/DirectX and your game, but even though you need to create the rest yourself. For example in HTML if you want to create an input tag you just wite the tag with some attributes and that is it. A field appears somewhere and you can start typing.

Well, when programming a videogame, you need to draw first the rectangle that's going to be the background of the font, if you want a border you need to draw that too, where you want to draw it using pixels, load the font, and draw the font but making sure that the string isn't bigger than the background other wise you end up with something like this:

And those are just a few points. However the good thing about working on UIs it's that depending of your game will be a very used feature and it's actually like creating the game itself, I mean, if done well, you'll feel pretty proud of your work when you see that is used extensively with no problems.

Another good thing is like I was saying before they are just a way of letting the user send info to the game and they are pretty repetitive.

I have learnt a lot from HTML and I want to encourage everyone that is working on a UI to use some kind of markup language to create the panels or windows, widget and everything related to the UI.

This is of course applicable to other things too, but I think it's specially important when working with UIs. Currently on my game to initialize a GUI I use tinyXML2 a really good library to parse the XML. And I have implemented a XML structure pretty similar to HTML in order to create my panels.

Is not finished, but it's looking good so far:

Read more about:

Daily news, dev blogs, and stories from Game Developer straight to your inbox

You May Also Like