Best GUI

[DigitalHax]

Hey all,

I have started some minor milestone development (Using vanilla C++) in which I have made a simple menu system where upon hitting escape, the mouse appears, and the control stops. I want to have some GUI (maybe a few buttons)

appear.

 

Now I don't know much on this topic, but I want people's opinion on it. What is the best gui for Leadwerks?

 

Thanks in advance...

[Road Kill Kenny]

Best Gui is to make your own system using the existing in built leadwerks commans and also OpenGL if ur feeling adventurous. I seem to do ok just with the LE commands tho.

 

Its not too difficult and you will never have more control than that.

[Clackdor]

I was actually very wary of implementing my own GUI. I looked at CEGUI and a few others and thought the learning curve was too high for what I wanted to do. I reluctently started to develop my own using Paint.net (for design) and the LE commands only. Turns out it was much easier to do it this way. I am only implementing push buttons and progress bars so far, but I think do-it-yourself is the way to go, at least until you get into some more advanced GUI usage.

[Road Kill Kenny]

Yah its pretty simple. No point using bloated external Gui's. The buety of it is once you've coded the classes its done. You won't have to do it again.

[DigitalHax]

Ok... Now how would you create something like buttons?

[Road Kill Kenny]

Hint:

 

LE::MouseHit(1)

LE::MouseX()

LE::MouseY()

LE::DrawImage()

 

Edit: Ok Ok you need a function something like this

//startPos is the top left starting point of a UI Element
//dims are the dimensions of a UI Element
int IsMouseInBoundingBox(LE::TVec2 startPos, LE::TVec2 dims){

if(MouseX() >= startPos.X && MouseY() >=startPos.Y && MouseX()<startPos.X+dims.X && MouseY() <startPos.Y+dims.Y) { //Check if the mouse is within the Button Bounding Box

return 1;   //return 1 if mouse is within the box
} else {
return 0;  // return 0 if mouse not in the box
}
}

 

Ok so you might be wondering why that function is just about mouse position and doesn't check if it is clicked.. Well thats becasue I have a hover skin to all my buttons. This is probably the core function that is used for pretty much every UI element I create. Its pretty simple but it works.

 

So thats all I'm giving ya. You'll have to be creative with the rest

[smashthewindow]

I was actually very wary of implementing my own GUI. I looked at CEGUI and a few others and thought the learning curve was too high for what I wanted to do. I reluctently started to develop my own using Paint.net (for design) and the LE commands only. Turns out it was much easier to do it this way. I am only implementing push buttons and progress bars so far, but I think do-it-yourself is the way to go, at least until you get into some more advanced GUI usage.

 

CEGUI doesn't have that big of a learning curve actually, but it's REALLY bloated library (CEGUI dlls are more heavy than Leadwerks dll...)

All you have to do is design everything in the provided layout editor and only use C++ code to set callback functions.

[Rick]

I've just been making my buttons and labels as static images mostly because using fonts for text seems to be a pain if you think about your window scaling and wanting your GUI to scale with it since from what I can tell fonts don't scale, you would have to make a ton of fonts for different resolutions and pick which one you want. Using static images I'm able to create really big controls like buttons or labels, and then scale them down while keeping their ratio so they still look the same.

 

Now doing all this with a complex layout can be a pain to pre-calculate positions or doing it by trial and error and restarting your program every time you make a change so I store all my GUI information in sqlite and I have a 2 second timer that looks for changed values that I did during run-time so their properties can be reassigned at run-time to show the change immediately in the game. This has worked out amazingly! I also treat position and size as % of the parent where 0,0,GraphicsWidth(),GraphicsHeight() is the base "desktop" parent. This too has worked out well for scaling the GUI with different screen sizes and since I'm using Lua I can see this real-time in the editor as I resize the editor.

 

When I'm finished with this game I'll try to release this system so others can just plug their own image controls in a sqlite db and see it work.

[DigitalHax]

Hint:

 

LE::MouseHit(1)

LE::MouseX()

LE::MouseY()

LE::DrawImage()

 

Edit: Ok Ok you need a function something like this

//startPos is the top left starting point of a UI Element
//dims are the dimensions of a UI Element
int IsMouseInBoundingBox(LE::TVec2 startPos, LE::TVec2 dims){

if(MouseX() >= startPos.X && MouseY() >=startPos.Y && MouseX()<startPos.X+dims.X && MouseY() <startPos.Y+dims.Y) { //Check if the mouse is within the Button Bounding Box

return 1;   //return 1 if mouse is within the box
} else {
return 0;  // return 0 if mouse not in the box
}
}

 

Ok so you might be wondering why that function is just about mouse position and doesn't check if it is clicked.. Well thats becasue I have a hover skin to all my buttons. This is probably the core function that is used for pretty much every UI element I create. Its pretty simple but it works.

 

So thats all I'm giving ya. You'll have to be creative with the rest

 

Thanks Ken,

 

I had the idea of possibly making my own sort of GUI in the first place, but I guess that is the sort of concept code I needed to get started.

 

But thanks to everyone! I guess I just had no idea about how easy it could be to make something like this.

[Road Kill Kenny]

Yeh I agree with you on that Rick.

 

Storing it in SQlite and pretty much making it editable in runtime (or make some sort of editor) helps a heck of a lot. compiling every time you want to move it really sucks.

 

Also I agree with you on the percentage. Your dimensions and positions of each UI Element has to be proportional to the screen resolution.

 

The way I do it is that every time the graphics resolution changes and at start up I make a aspect ratio variable for x and y

float rx = GraphicsWidht()/[MaxSupportedWidth];
float ry = GraphicsHeight()/[MaxSupportedHeight]];

 

Generally All my UI Elements I create their base dimensions as if it were a screen resolution of MaxSupportedWidth x MaxSupportedHeight

 

Now all you have to do is when you set the position of the UI element (i.e. TVec3 startpos, TVec3 dims in my above example) you have to multiply them by the relevant ratio.

 

startPos.X*rx

startPos.Y*ry

 

however for dims it must only be rx otherwise you will streth your buttons to be out of proportion.

 

dims.X*rx

dims.Y*rx

 

I also add in a float variable called UISize. This is so that the player can change the general size of their UI if they want to. So I just multiply all positions and dims by UISize as well.

[Dozz]

Another way is to use objects in the 3D environment positioned relative to the cam & pick to get the 'button' under the mouse. This opens up complex shaped buttons, animation & scaling to different resolutions is easy. Typing text on the button however isn't as simple as in 2D.