GUI From The Ground Up

Troy Corbin Developer Updates 1 Comment

With the advent of the inventory system in our last update, it was time to finally take a serious look at constructing a proper GUI system. You see, despite having a few menus with buttons you could click to end the game or continue, anyone with access to this early build of the game understood that the implementation was very buggy. Not only did I have to manually position each GUI element on the screen, but the kludgy implementation also meant that sometimes you have to click half a screen above the actual button to get it to do anything.

Starting The GUI Over

After peeking through my GUI system I decided that the best, cleanest and smartest way to approach it would be to completely re-write the system from the ground up. It has been slow going ( partly due to illness and the necessity to be social on my birthday ) but we finally have something in place which will truly end ure.

I’m somewhat basing the system on the concepts I learned doing web work. Specifically, each Box ( or Element ) tracks a number of positional settings, including padding and margin borders, as well as two offsets ( one imposed by the parent container, and one that is self imposed ). Despite being much more complex under the hood, the results on the screen are infinitely better: GUI Elements that go where they are told to go, container elements that form correctly around their contents, and organizational containers I could not have pulled off before ( like an automatic Horizontal or Vertical list ). I’ll soon be able to combine those containers into a Grid, which I’ll then use for the Inventory.

A Place For Words

I’ve also implemented a Text Box and a Text Input, which are critical GUI components for displaying and getting text data respectively. I’ve paid special attention to the Text Input, ensuring it is versatile enough to be used to display any key on the keyboard for times when remapping controls, while also supporting full editing tools like the Delete, Backspace, Home and End keys with a 100 line history you can access with the Up and Down arrow keys.

Pretty Fonts

In addition to all that, we have stopped using SlickUtil for font support and implemented the full Slick2D library. Slick2D offers font support that goes well beyond what SlickUtil offered, and offers a much cleaner rasterization of the font.

Sadly, despite all this progress, I still don’t have any new screenshots to show you. All of these GUI elements are boring to look at because they’re nothing new… these concepts were invented decades ago. Once I’ve added a few more important elements ( Check Box, ComboBox, Grid ) then we’ll finally implement important menus for Inventory and game settings. Once that is done, I suspect I’ll begin implementing crafting.

So despite my absence, we’re still at work!

Update 12/30/2015: Here’s some of what this GUI looks like today:

Character Screen UI as of 12/30/2015

Character Screen UI as of 12/30/2015

Inventory Screen UI as of 12/30/2015

Inventory Screen UI as of 12/30/2015


Troy CorbinGUI From The Ground Up

Comments 1

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.