# OpenGL GameGUI

## Recommended Posts

RorqualPilot    100
I have made myself a decent foundation for making my 2D Game. Now it comes to some basic UI. I have tried several: Tusk 2 Too basic, could not integrate due to some unresolved externals and does not provide any foundations for adding new widgets. CEGui Overkill for my purpose, hard to integrate to my mind, too much exceptions, hard to understand. guichan Forums only filled with pharmacy-spam, seems to be inactive. Any others out there for OpenGL? Or would it better to build myself some GUI? I need not much stuff: - Basic Inventory, Items are dragged from the Game into the UI. - Some Buttons - Messageboxes I have managed to make a message-box, but placing caption, Ok/Cancel-Buttons to it etc seems to be quite much effort with drawing all the stuff into the box. Here is some example how I draw the box which contains the message without caption:
    GLfloat color[4];
GLint matrixMode;
glGetIntegerv(GL_MATRIX_MODE, &matrixMode);

glMatrixMode(GL_MODELVIEW);
glPushMatrix();
glTranslatef(this->getPosX(), this->getPosY(), m_zorder);

glGetFloatv(GL_CURRENT_COLOR, color);
glColor3f(.7f, 0.0f, 0.0f);

glEnableClientState(GL_VERTEX_ARRAY);
glVertexPointer(3, GL_FLOAT, 0, &m_box_vertices[0]);
glDisableClientState(GL_VERTEX_ARRAY);

glColor3fv(color);

m_font->renderObject(m_text.c_str(), this->getPosX() + 25, this->getPosY() + 40 );

glPopMatrix();
glMatrixMode(matrixMode);

Wrong approach or well done? Thanks for your input. regards

##### Share on other sites
Sudi    761
Well all this is just rendering and actually is just one small part of GUI.

First you should write yourself a GUIRenderer which will save you a lot time replicating code and fixing bugs in every file. That renderer should be able to draw Rectangles, Images and Text to the screen when you just pass in the cordinates and the SizeOfRectangle/Image/Text. When you have that Renderer you can start building your ui.

First of all start with a empty Widget. It will be the base class for all GUI elements.
here some example code.

http://sudi.pastebin.com/f79c1132e

just a quick thought...its missing a lot but should give you a idea

##### Share on other sites
szecs    2990
A game GUI that simple is quicker to implement for your own, that learning to use a library.

Start with rendering: you have to see what you are doing, make the basic struct, that has the info for drawing, add other elements to it when needed.

Make the widgets function first, I mean toggles toggling, radios radioing, sliders sliding, and the "engine" of the GUI.

After you have done these, comes the hard part: how to associate game variables to the GUI? You can hard code it, it's just enough for a game GUI, but not enough for an editor GUI of course.

I hope that helps.

##### Share on other sites
zaneski13    104
If your rendering an inventory screen then its most likely going to be more unique than any GUI System out there has to offer. What I'm doing for my game GUI is I'm building my own. It's not that hard either. It just takes a lot of typing, but you could get it implemented in a day or so, depending on how advanced / unique it is. If you don't want to or don't have the time to build a GUI system from scratch I found QT widgets in the past. It supposedly good but I've never used it so I'm so sure.

I found this page which shows tons of different GUI Toolkit s that you can use. Just find the right one... http://www.atai.org/guitool/

However, my experience with GUI systems are that if you want your game to be completely unique you need to make your own GUI library. You can get really creative with it too. So my recommendation is to just make a GUI library from scratch. It shouldn't take too long either. Here's some class Ideas

Window
Panel (with a texture)
Textbox
Button
ImageButton
Slider
ScrollBar (if text is too long and doesn't fit on the window)
ToolTip
Image
etc.
Just Get Creative!

##### Share on other sites
cmc5788    122
I agree with the others who have suggested that coding your own GUI is generally the best solution -- it also tends to be very fun and rewarding, because when dealing with all the complexity of a 3d engine, the GUI is comparatively easy and the results come quickly.

This probably goes without saying, but you want to abstract the GUI renderer. Past that, it's all up to you -- it depends on what you need in terms of features. Like others have mentioned, it's good to have a basic "widget" or "element" class from which to derive all other things, also pretty typical are the concepts of containers and controls, etc.

I don't think anyone's yet talked about containers and controls, so I'll go a bit more into it. Basically, containers are objects that hold any number of controls, and can be parents or children of other containers. A control is a simple object that reports a single element of input back to the container holding it -- this would be something like a checkbox, slider, etc. A container, if it has a parent container, reports back the sum of the inputs of all its controls back to its parent container when it ceases to exist.

This allows for a system where one window may have a number of buttons and sliders and input boxes, and when this window is finished, it can report back the sum of all these individual options back to its parent window, which in turn may have other individual boxes and buttons AND additional children containers that will report groups of control states.

You may not need anything so complicated for your GUI, but this is the genereal theory of "windowing."

##### Share on other sites
szecs    2990
I suggest to go the general way:
Let every widgets/windows/tabs have their own drawing/clicking/moving/etc functions, more precisely pointers to functions, so you can expand you GUI, without the need to rewrite it. You can use generalized functions of course:
the same functions to draw pushbuttons/toggles/radio buttons/whatever, and same functions for these, but you can have unique functions too.

Yup, windowing isn't so hard either, as cmc5788 mentioned, you have to use some kind of parent-child relations between window-window, window-widget, even widget-widget (if you want to enable/disable a group of widgets, depending on a toggle, for example).

I use parents to define these relations, since I don't have too much stuff, so I can loop through everything to get parent IDs, of course you can have child vectors too.

So some conclusion: it's not hard, but probably hard work: I suggest extensive/intensive use of paper and pen.

##### Share on other sites
RorqualPilot    100
Thanks for all your suggestions. I will try to make one myself. :)
Tried Agar too, that looks pretty nice and I could integrate it first, but ended with very much memory-leaks.
I have already done some "menu-widgets" and now I will try to get all this into some hirachy where I can implement some automatism for rendering.
Thanks again.
o/

## Create an account

Register a new account

• ### Similar Content

• I assumed that if a shader is computationally expensive then the execution is just slower. But running the following GLSL FS instead just crashes
void main() { float x = 0; float y = 0; int sum = 0; for (float x = 0; x < 10; x += 0.00005) { for (float y = 0; y < 10; y += 0.00005) { sum++; } } fragColor = vec4(1, 1, 1 , 1.0); } with unhandled exception in nvoglv32.dll. Are there any hard limits on the number of steps/time that a shader can take before it is shut down? I was thinking about implementing some time intensive computation in shaders where it would take on the order of seconds to compute a frame, is that possible? Thanks.

• There are studios selling applications which is just copying any 3Dgraphic content and regenerating into another new window. especially for CAVE Virtual reality experience. so that the user opens REvite or CAD or any other 3D applications and opens a model. then when the user selects the rendered window the VR application copies the 3D model information from the OpenGL window.
I got the clue that the VR application replaces the windows opengl32.dll file. how this is possible ... how can we copy the 3d content from the current OpenGL window.

Thanks
• By cebugdev
hi all,

i am trying to build an OpenGL 2D GUI system, (yeah yeah, i know i should not be re inventing the wheel, but this is for educational and some other purpose only),
i have built GUI system before using 2D systems such as that of HTML/JS canvas, but in 2D system, i can directly match a mouse coordinates to the actual graphic coordinates with additional computation for screen size/ratio/scale ofcourse.
now i want to port it to OpenGL, i know that to render a 2D object in OpenGL we specify coordiantes in Clip space or use the orthographic projection, now heres what i need help about.
1. what is the right way of rendering the GUI? is it thru drawing in clip space or switching to ortho projection?
2. from screen coordinates (top left is 0,0 nd bottom right is width height), how can i map the mouse coordinates to OpenGL 2D so that mouse events such as button click works? In consideration ofcourse to the current screen/size dimension.
3. when let say if the screen size/dimension is different, how to handle this? in my previous javascript 2D engine using canvas, i just have my working coordinates and then just perform the bitblk or copying my working canvas to screen canvas and scale the mouse coordinates from there, in OpenGL how to work on a multiple screen sizes (more like an OpenGL ES question).
lastly, if you guys know any books, resources, links or tutorials that handle or discuss this, i found one with marekknows opengl game engine website but its not free,
Just let me know. Did not have any luck finding resource in google for writing our own OpenGL GUI framework.
IF there are no any available online, just let me know, what things do i need to look into for OpenGL and i will study them one by one to make it work.
thank you, and looking forward to positive replies.

• I have a few beginner questions about tesselation that I really have no clue.
The opengl wiki doesn't seem to talk anything about the details.

What is the relationship between TCS layout out and TES layout in?
How does the tesselator know how control points are organized?
e.g. If TES input requests triangles, but TCS can output N vertices.
What happens in this case?
http://www.informit.com/articles/article.aspx?p=2120983
the isoline example TCS out=4, but TES in=isoline.
And gl_TessCoord is only a single one.
So which ones are the control points?
How are tesselator building primitives?
• By Orella
I've been developing a 2D Engine using SFML + ImGui.
Here you can see an image
The editor is rendered using ImGui and the scene window is a sf::RenderTexture where I draw the GameObjects and then is converted to ImGui::Image to render it in the editor.
Now I need to create a 3D Engine during this year in my Bachelor Degree but using SDL2 + ImGui and I want to recreate what I did with the 2D Engine.
I've managed to render the editor like I did in the 2D Engine using this example that comes with ImGui.
3D Editor preview
But I don't know how to create an equivalent of sf::RenderTexture in SDL2, so I can draw the 3D scene there and convert it to ImGui::Image to show it in the editor.
If you can provide code will be better. And if you want me to provide any specific code tell me.
Thanks!

• 14
• 20
• 35
• 13
• 39