Simple Image-less UI

[Flexman]

Well, if using DrawRect() all you have to do is Bind() a texture before hand and DrawRect() paints your texture instead of a plain colour value. So there's plenty of scope for using plain drawing functions as described by an XML file with textures if you want to do that.

 

I have a hard time with all the event stuff that has to go with it. Actually it's so bad I want to stop thinking about it now and go out into the sunshine and try and fix the car.

[Rick]

Interesting. Yeah, the events are a pain to get all sorted out if you really want to be as thorough as possible. I've given my attempt at my fair share of GUI's with a few libraries and it's a pain.

[Josh]

9 Images for each element, is there a link where I can read about that method?

Top left, top (stretched across), top right, middle left, center, middle right, bottom left, bottom, bottom-right.

[Dozz]

Thanks Josh, I was half thinking that was the answer, but thought surely mirroring images and selecting edge pixels to stretch would be used and the 9 images were something really trick I was missing out on

[Krankzinnig]

As I have stated before, its all about a blend of images and using these primitive 2D drawing commands. This way your not using a huge image just for a box. I got another example here that might illustrate what I am talking about better:

 

 

This is now fully functional UI. You can drag it around by the title bar and the button responds. I have this thrown automatically on errors with a corresponding error code so my team can handle support issues easily. For my in game UI I am using a minimal compass svg image and some other basic info. My inventory and etc will all be drawn as the dialog is.

[Rick]

This way your not using a huge image just for a box

 

I think you have the wrong impression about the 9 image way of things (which I guess is what I was referring to). You would never use a huge image with that technique. It would be made up of smaller images that get tiled/stretched/whatever other tricks you can do to make what looks like your huge image.

 

You GUI looks nice, but your games theme seems to be more fantasy and the GUI is kind of more futuristicish/OSish.

[Josh]

With the approach I am describing, the top-middle, middle-left, center, middle-right, and bottom-middle images would get stretched horizontally, vertically, or both, depending on which section it is. That was you can have gradients or whatever, and they will fill the entire area of the element. The advantage is you can make your GUI once, then an artist can reskin it to make a theme appropriate for any game. This can be used to make interfaces that look more like a game interface:

 

 

Code once, infinite reuse.

 

Alternatively, you might choose to tile the edge and center images instead of stretching them.

[Krankzinnig]

Yeah I get your point but think about Valve, they have a really clean UI for login, error dialogs, notifications. This is what this class is for. In no way shape or form would it replace the in game UI or any other visually important UI. Basically, my main menu wont be a rendered rectangle with text. Its going to be a pretty image based layout as seen above in the screenshot Josh posted. But I don't see the need for a overly flashy box to tell the user they are missing a dll file. I guess using the word UI was too broad, they are more or less my notification dialog's. You know, the ones your not constantly staring at.

 

Btw, almost done implementing my SVG loader woo!

[Rick]

Yeah, I think we understand what you are saying too, but then what you are doing is almost making 2 GUI's. One for development and 1 for the game when you could use the one for the game as your dialog also (the skin for that would just be lines so it looks like what you have). That way you are reusing your 1 way of doing a GUI to satisfy both needs.

 

Valve's GUI is clean but if you say that same GUI in 3 of their different games you'd probably be like wtf Also it kind of fits their game theme.

 

Anyway what you have looks nice.

[Krankzinnig]

Yeah, I am producing multiple titles with a team. So we will reuse the dialogs but change colors and icons. So keeping that UI class in the engine is really handy. Also thanks for the compliment.