Is there any smart way to make user interface?

15 posts

Flag Post

Hello. I am currently trying to make a user interface in my game and it is killing me – while i dont need that much features, my user interface code looks like a wall of “if” statements(for each situation, on each mouseEvent function or for buttons). And it is also hard to work with each element of interface, changing it position, size e.t.c., especially if it is dynamically added(like creating a textfield to display unit stats if unit was selected). These are some problems out of many.

So, is there any easier, smarter way to do this instead of wasting time on each element of user interface? A library or some kind of eye design→code tool? If not, could you describe your approach to creating user interface, i keep getting the feeling that i am doing it completely wrong?

 
Flag Post

You are doing something wrong. Post the code where you have those massive if statement walls.

 
Flag Post

Mostly I just break my UI up into classes – the menu class extends Sprite and populates itself with buttons and sub-menus.

I haven’t tried any UI libraries myself, but there are things like Feathers. However, it’s probably about as easy to create a wall of if statements using a framework as without.

Before looking for a framework, it’s probably worth cutting down the number of situations a single UI element has to deal with.

 
Flag Post

I tried making a UI system myself, and was going alright. Here was my structure, can anyone give advice?

(a navbutton is a button that changes the active menu)
Main
-MenuController (child of Main)
-has menus,input,navigation between menus,navbutton functions
-Menu (extends MenuController)
-has navbuttons,buttons,button functions

But what is an efficient way to store all the functions that a menu might need to call? At the moment, I’ve just got an array into which I pass the menu or buttons ID to get a function which is to be executed. This is annoying because I can’t pass arguments (or can I?) to function objects and I have to make 2/3 dimensional array to account for things like “go back to previous menu”. I tried making a visual menu editing/converting to data tool, which is alright, but I still feel as if there should be an easier way.

To boil it down:
If I’ve got lots of buttons, what is the best way to store the function for each button? It seems as if the menu should store all the buttons’ functions, rather than the buttons themselves, but that ends up with a huge array of function objects which are rather annoying.

 
Flag Post
Originally posted by feartehstickman:

If I’ve got lots of buttons, what is the best way to store the function for each button?

What’s wrong with using event listeners? They’re a little slow for hundreds-of-times-per-second tasks, but they work just fine for button clicks. Or roll your own listener system if you’re using blitting.

Originally posted by feartehstickman:

It seems as if the menu should store all the buttons’ functions, rather than the buttons themselves

Why does it seem like that to you? To me it seems like the buttons should keep track of their own callbacks.

 
Flag Post

At the moment, there’s one mouse event listener on the menu container class which works out what’s been clicked and goes from there. I could add event listeners to everything, but that wouldn’t really be any different to the large array of functions that I already have.

The problem with making buttons responsible for their own functions is that most buttons affect things outside themselves. Should the button be telling the menu to tell the menu container to change to a different menu?

 
Flag Post

No. All a button should ever say is: “I’ve been clicked!”

Whatever handles the button should know what to do with that. Event listeners, bubbling, they work, use them.

 
Flag Post

Interface elements should be in a display tree that matches their obvious hierarchy, i.e. for a simple game menu: Menu → Menu button (→ Text/Image on button), or a HUD: HUDHUD element (health or whatever) → Health bar, text, image. That way you can move/hide the whole element or parts of the tree easily.

Events should be handled with the AS event mechanism (i.e. EventDispatcher and addEventListener).

I don’t have any magic to design my UIs, I construct them manually from a collection of component classes I’ve built up (for buttons, scrollbars, text areas etc) so there is a certain amount of long code required to construct, place and attach event handlers to all the UI elements. You can’t really avoid that, just change where the properties are defined.

 
Flag Post

Ok then. It seems as if I’m at least on the right track. Perhaps I should sacrifice speed for usability and identify all my functions via strings rather than by ints in an Array…

 
Flag Post

You have also asked whether you can pass a parameter to a function objects. Yes you can, call functionVar.apply(thisSubstitute,argsArray).

 
Flag Post

Ahh. So that’s it. I saw apply in the docs and wondered if it might be what I was looking for but I couldn’t quite get my head around it. So, are these two the same thing?

function.apply(this, [6,7,"yes"]);
function(6,7,"yes")
 
Flag Post

Should be identical, right.

 
Flag Post
Originally posted by feartehstickman:

Ok then. It seems as if I’m at least on the right track. Perhaps I should sacrifice speed for usability and identify all my functions via strings rather than by ints in an Array…

You can put functions directly into an array (or a vector).

 
Flag Post
Originally posted by BobJanova:

Interface elements should be in a display tree that matches their obvious hierarchy, i.e. for a simple game menu: Menu → Menu button (→ Text/Image on button), or a HUD: HUDHUD element (health or whatever) → Health bar, text, image. That way you can move/hide the whole element or parts of the tree easily.

Events should be handled with the AS event mechanism (i.e. EventDispatcher and addEventListener).

I don’t have any magic to design my UIs, I construct them manually from a collection of component classes I’ve built up (for buttons, scrollbars, text areas etc) so there is a certain amount of long code required to construct, place and attach event handlers to all the UI elements. You can’t really avoid that, just change where the properties are defined.

Lets say i have a simple HUD on screen. I dont understand the HUDHUD element part. How will it help me to change all at once easily? Wont just adding all HUD elements to special sprite hud holder solve this?

 
Flag Post
Originally posted by a3lex33:
Originally posted by BobJanova:

Interface elements should be in a display tree that matches their obvious hierarchy, i.e. for a simple game menu: Menu → Menu button (→ Text/Image on button), or a HUD: HUDHUD element (health or whatever) → Health bar, text, image. That way you can move/hide the whole element or parts of the tree easily.

Events should be handled with the AS event mechanism (i.e. EventDispatcher and addEventListener).

I don’t have any magic to design my UIs, I construct them manually from a collection of component classes I’ve built up (for buttons, scrollbars, text areas etc) so there is a certain amount of long code required to construct, place and attach event handlers to all the UI elements. You can’t really avoid that, just change where the properties are defined.

Lets say i have a simple HUD on screen. I dont understand the HUDHUD element part. How will it help me to change all at once easily? Wont just adding all HUD elements to special sprite hud holder solve this?

You have a HUD Class (it holds all your HUD stuff). In it you have added 3 buttons, 2 textboxes and an image. These are all children of the HUD Class, and therefore, you can do things such as make the HUD Class invisible and all your HUD elements will become invisible to. If you have different bits of your hud which are seperate (eg. health bar, map), you can go: HUD Class contains two HUDElements which each contain three buttons and a picture. Then you can remove bits of the HUD, or the whole HUD at once.
Originally posted by BobJanova:
Originally posted by feartehstickman:

Ok then. It seems as if I’m at least on the right track. Perhaps I should sacrifice speed for usability and identify all my functions via strings rather than by ints in an Array…


You can put functions directly into an array (or a vector).

That’s what I have at the moment. The only issue is how to populate the array with functions initially (without having to type in 100s manually). I managed to make a sort of interface to do it for me though. Perhaps it’d be easier to store them in a string-identified array or a dictionary.