Jump to content
  • Advertisement
Sign in to follow this  
Master thief

Wondering how to build a somewhat complex UI...

This topic is 901 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I'm trying to make the UI for resource management functionalities, which are also what makes up most of the game I planned to make. However, I'm a bit lost on how exactly to do it.

 

I'm not sure of all the stuff this will imply, but I could think of these:

  • A manager (the game class itself, probably, containing a stack of all the in-game screens)
  • A container (a screen, if you will, containing an amount of Panels (screen parts))
  • Panels (like viewports, in a way, containing any of the stuff below)
  • Buttons (multi-purpose, with a Sprite icon - much like the ones here above the forum post editing box)
  • Text Buttons (with a label - I wonder if they could double as clickable dialogue responses)
  • Text Boxes (NPC dialogue, item descriptions, story telling, etc)
  • Lists (containing non-clickable Text Buttons as indices (for stock items lists), or clickable Text Buttons (for dialogue choices), or even mini-panels (a third type of button) with a mix of elements (for example, an NPC list, and each index with a name and some stats and a mini-portrait))
  • Portraits (containing a large image of an character - to exist alongside/inside a player/NPC inspection panel)

Now, I don't really know if I can extend those functionalities like that (text button -> dialogue choice, etc). I don't know how to plan to implement all this, in terms of polymorphism and inheritance, interfaces, etc. I did this once in raw c++ in a console app, but I didn't finish it, so I never knew if it would work in the end.

 

I'm using c++/SFML now, but I'm more interested in understanding this conceptually (or in pseudocode). If I understand it in that way, I'll probably manage to implement it on my own.

 

What classes could I have and which could derive from which, and which could have versatile functionality, is what I'm trying to figure out. Also trying to figure out the way to repeat less code. Any help or suggestions or ideas, or whatever, would be greatly appreciated.

Edited by Master thief

Share this post


Link to post
Share on other sites
Advertisement

The most common way is to have a base class (Control , Widget , Window) .. and every UI element derive from it.

The base class will have a virtual OnMouseEvent(..) and every UI element will implement it .

For the keyboard events I like to have a focus element , so lets say you click on a text box , and in the OnMouseEvent() of the text box you do something like

GUISystem -> SetFocus(this) and this will pass all the keyboard events to the element you set .

 

And the third important thing is the callbacks. Let's say you register a callback for "CLICK" to some button , and the button will call it in OnMouseEvent().

This is the base and you can extend from there.

Share this post


Link to post
Share on other sites

Callbacks is something that's still rather advanced for me. Though I've already read a few things about them, I might end up using them.

 

Do you know of any JRPG tutorials that implement menus? I had never noticed before, but it seems most of them neglect to teach that.

I'd like to take a peek at their implementation.

Share this post


Link to post
Share on other sites

I decided to go with something like this. It's similar to what I had done before.

Except I made Panel derive from sf::View instead (SFML View(port) class).

It seems to me this should work. We will see...

 

. 8h5Fvzi.jpg

 

(Greyed out items are just things I thought of, but don't know if I can implement or if I even need to)

Edited by Master Thief

Share this post


Link to post
Share on other sites

The most common way is to have a base class (Control , Widget , Window) .. and every UI element derive from it.

The base class will have a virtual OnMouseEvent(..) and every UI element will implement it .

For the keyboard events I like to have a focus element , so lets say you click on a text box , and in the OnMouseEvent() of the text box you do something like

GUISystem -> SetFocus(this) and this will pass all the keyboard events to the element you set .

 

And the third important thing is the callbacks. Let's say you register a callback for "CLICK" to some button , and the button will call it in OnMouseEvent().

This is the base and you can extend from there.

 

This, except that I think it's better for the parent of every widget to maintain the focus for its level of the GUI hierarchy, rather than a global focus for the GUI. Then, each widget in the hierarchy just passes the key/text input events down to its child that locally has focus.

 

Another important concept is the delegate. In my case this is just a struct with a collection of std::function callbacks that respond to events for each type of widget. This is way better than the inheritance solutions required by many GUI toolkits.

Share this post


Link to post
Share on other sites

Another important concept is the delegate. In my case this is just a struct with a collection of std::function callbacks that respond to events for each type of widget. This is way better than the inheritance solutions required by many GUI toolkits.

are you hooking up those delegates somehow automatically, or by hand?
it is always a little bit worrying to me to maintain it by hand, as one missed "free" and you have a call to a wild pointer.
but I also dislike using external "generator" tools like in Qt that generate binding-code (as I'd prefer to have it all self-contained).

I admit, I'm a very bad tools/ui coder. A good starting point to improve I guess :). Has anyone suggestions for books to buy? there are tons to learn Qt, wxWidgets etc. but barely focus on gamedev. I've bought some ages ago "3D Games" [Policarpo] because of the UI code, which showed some nice basics, but wasn't really going into depth.
(sorry for slightly highjackin this thread)

Share this post


Link to post
Share on other sites

 

Another important concept is the delegate. In my case this is just a struct with a collection of std::function callbacks that respond to events for each type of widget. This is way better than the inheritance solutions required by many GUI toolkits.

are you hooking up those delegates somehow automatically, or by hand?
it is always a little bit worrying to me to maintain it by hand, as one missed "free" and you have a call to a wild pointer.
but I also dislike using external "generator" tools like in Qt that generate binding-code (as I'd prefer to have it all self-contained).

 

I'm doing it by hand, it seems like it would be hard to automatically bind those in C++. I haven't encountered any problems so far - It's only ~100 lines of simple code (getters and setters) to configure a complex UI.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!