Implementing a decent GUI

Newbie & Debugging Questions
#1

Hey there!

I have been trying to implement a GUI for my game, but it isn’t working out as nice as I had hoped. I took a look at some different
helpers for this, but it seems like TWL (for instance) offers so much more than what I need, and I’m not prepared to use HTML and CCS to layout my GUI.

So, I thought I could implement my own with the goals being
[1] Easy setup
[2] Extendable
[3] Single-threaded, and updated through a simple gui.update(input, delta) call.

However, this is not working out in my favor. I like swing (sue me), so I thought I could do something of the sorts. Swing is really hard to get an overview of though, so that I had to quit.

I wanted to make objects as interactive as the user intends, through interfaces and only send the updates they need. This seems impossible though.
I really don’t want to have to update everything (entire gui). I could update just whatever the mouse is hovering over, but I don’t know if all that checking would be worth it (a gain in execution speed), and that also eliminates the possibility for animation to take place on a component that does not have focus.

So, JGO, I ask you for advice on this. What is your opinion?

#2

I’ve only been using TWL, and I agree that it’s not a perfect solution. It took me weeks/months just getting the basics working. It IS powerful, but also really hard to get into since you pretty much have to look in the source code every time you want to, well, do anything. I wouldn’t recommend it, but I found no real alternative to it so it’s what I’ve been using lately. Sadly, all I can do is +1 your question…

#3

First, it depends whether your game runs with Swing/Java2D or OpenGL. Then, on the kind of widgets you need.
In any case I would definitely discourage writing your own complete UI system. That is very complex fulltime task for several people and you won’t get into game programming any longer.
I ended up with a Swing based lobby and an OpenGL game view, where the latter uses some crappy self programmed buttons plus progress bar. I also started using LibGdx buttons for one view, but already lost motivation when I didn’t understand the class hierarchy.

#4

I am using OpenGL. What else would you suggest? It seems that learning any of the bigger systems for GUI is just as complex a task, as writing my own components for the few things I need.

I need only a few windows with labels, and a textbox that has a vertical scrollbar.

#5

I would first look for a suitable ready-to-use solution. Programmers notoriously underestimate efforts (me included).

#6

This is find to be very true, usually. In all other cases, I have been able to find some ready-to-use solution. This one however, I couldn’t hence the original problem. The only choice seems to be TWL, Nifty and SUI. Of those, SUI is the only one that doesn’t require voodoo to work, but it’s so horribly half and incomplete.

#7

I’ve got my entire UI boiled down to… two classes. Pretty much. Configured with XML (yuk) but it doesn’t have to be. The classes are Area and Screen. What happens inside Areas is kinda up to further code but for doing buttons and panels etc. such as found in Revenge of the Titans - everything - it works.

Cas :slight_smile:

#8

The most common GUI elements you’ll need in a game are Buttons and Labels and both of those are fairly easy to do yourself. I’ve written my own for Java2D just because I wanted custom images and didn’t want to deal with a java.awt.Button. Blah blah blah reinventing the weal blah blah blah, it works :stuck_out_tongue:

#9

Is that using TWL?

I need some draggable elements too. How did you update your elements?

#10

I had the screen rendering at a constant framerate then just checked input from the mouse. This is a bit easier in Java2D since you have MouseListener, using OpenGL (LWJGL?) you’d have to get input at a constant rate as well. Draggable wouldn’t be to hard (I assume):


// Psuedo-code basic idea
if(mouseDown && mouseMoved)
   button.setPos(button.getX() + moveX, button.getY() + moveY)
#11

No TWL, just literally, two classes: Screen and Area. I extend Screen and override a couple of methods like onClicked and onHovered etc. to deal with things. Screen (and all its Areas) is ticked once per frame, but I use LWJGL input events to actually capture multiple things per tick should they be occurring to quickly.

Cas :slight_smile:

#12

The thing is: How do I know how much it moved? I only have static input, every frame. It could be handles though, with a few extra variables.

Do you have children, or do you add everything directly on to the Area/Screen?

#13

I’ve made several GUI libs in the past, none of them very complex.

What I’ve learned:

  • If your game just needs buttons and labels, it’s easier to do it yourself. A basic text field is also not very difficult.
  • If your game needs draggable windows/panels that correctly clip their children, things will start to get a bit more complicated. Still, home-brew might be the way to go.
  • If your game requires a proper focusing system, multi-line text editing, theme editor, table widgets, or anything else of that sort, then you are way better off spending the time to learn TWL.

TWL is very powerful but I agree it’s not the ideal solution if all you want is a very quick and dirty UI.

#14

No children, just a flat bunch of rectangles. I’ll be the first to admit it’s not ideal but they even lay themselves out correctly and dynamically resize :slight_smile: It’s a fiddly, complicated bit of monolithic code but 90% of the time it’s all I need.

The actual behaviour is dealt with in overridden methods in derived Screen classes. I’ve built a few extra widgets that specialise the behaviour in certain areas - like volume control selectors - but it’s painfully simplistic otherwise. It’s fairly trivial to do stuff like dragging I suppose.

Anyways, that’s how far you can get with two big classes that simply deal in rectangles and clicking.

Cas :slight_smile:

#15

System.out.println(Mouse.getDX() + Mouse.getDY());

I wrote a GUI for our new Map Editor.

http://img259.imageshack.us/img259/9186/alka2.jpg

Did it similarly to what Cas does.

I have like one button class which has all the basic functionalities and I extend when I need special stuff.
Basically, when you think about it, every interact-able element is a button… even a list item or menu option.

#16

Pimping my own stuff, but I can’t help it. :wink: libgdx has a 2D scene graph called scene2d. There is a package of classes called scene2d.ui that are for building UIs. It is quite lightweight for the level of power you get. Some large apps have been built with it, so it is reasonably mature. However, it is currently not well documented. Also, I’ve been spending the past week refuctoring it (full time instead of working on my projects :(). I’ll be done in a few days (I’ve been saying this for a few days :(). At that point it will have nice javadocs, and articles/tutorials will be in the works.

Real high level, the Skin class stores resources (texture regions, colors, button styles, etc) that can be looked up by name. Each widget takes a style from the skin (or created by code). The style is a simple POJO specific to that widget which defines texture regions, etc. Both simple and very complex layouts are done via TableLayout, which (surprise) makes it easy to do table based layouts.

#17

Sometimes I think you plan to address each and every need a java game developer could have and write some great libs to help. It’s mind blowing.

#18

I guess I look at what I would need to build games, and go and do that. When I’m done, I panic and find something else I might need if I were to actually build games. :wink: Tool projects are smaller in scope, easy to get excited about and be done. A full game project has lots of bits that aren’t fun to build. :frowning:

#19

Write video playback tools… =DD

#20

Video Playback sucks. This is why I hate playing the old Final Fantasies with their stupid videos. I like to jumped or be able to fast forward the scene (Last Story). Real Time is always the best way (Of course it’s a bit work to make the run, but it would make more work for me to do a video which is also super static).

@Topic
TWL for complex guis is the way to got imho. The lack of Wiki (a real one :p) and Tutorials is really sad, since you need to look into the code (as theagentd said). But MatthiasM is quite helpful with all my problems so far (Aaaaand there are many xD) so it works for me.
I even do a lot of my own widgets and override. Something I hated on Swing… a lot.