This member has provided no bio about themself...

RSS My Blogs

Creating GUIs

AMCerasoli Blog

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:

Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.

Level
Avatar
Avatar
Last Online
Country
Spain Spain
Gender
Male
Friends
Become friends
Member watch
Follow
Statistics
Rank
49,302 of 661,917
Visitors
1,465 (1 today)
Time Online
60 seconds
Activity Points
59
Comments
10
Site visits
345
Contact
Contact
Send Message
Homepage
AMCerasoli.com
Twitter

Latest tweets from @amcerasoli

#screenshotsaturday Help me Help me fill the world with buildings! Emancipation.amcerasoli.com T.co

May 24 2014

The GUI still need some work but this makes me really happy, I'm saving all the buildings on the server. Youtu.be via @YouTube

May 21 2014

More GUI! This is the prototype of the next panel I'm working on. T.co

May 15 2014

New post! Emancipation.amcerasoli.com

Apr 22 2014

Hello Twitter! #myfirstTweet

Apr 14 2014

Friends
shaulhadar
shaulhadar Online
Nooskewl
Nooskewl Online