Gui using only Opengl

Hi guys, new here, i have just started using opengl in september at college and we are doing a little engine.

Thing is that my part to do now is all the UI for the next assigment.

In the past i made with some other friends in college a 2D Game and i did the UI aswell.
But we worked with SDL since no 3d was needed.
Now i’m stuck on how to create a simple 2d orthogonal projection and then fill it with buttons, input text and some images to make the menu or the hud.

If someone knows a well explained tutorial to create the UI entirely with opengl or something to quick learn how to do it I will be very thankful!

[QUOTE=Harambe;1289524]Hi guys, new here, i have just started using opengl in september at college and we are doing a little engine.

Thing is that my part to do now is all the UI for the next assigment.

In the past i made with some other friends in college a 2D Game and i did the UI aswell.
But we worked with SDL since no 3d was needed.
Now i’m stuck on how to create a simple 2d orthogonal projection and then fill it with buttons, input text and some images to make the menu or the hud.

If someone knows a well explained tutorial to create the UI entirely with opengl or something to quick learn how to do it I will be very thankful![/QUOTE]

The easiest way to have UI with openGL is to use ImGui GitHub - ocornut/imgui: Dear ImGui: Bloat-free Graphical User interface for C++ with minimal dependencies
Very simple and powerfull!

[QUOTE=bob;1289533]The easiest way to have UI with openGL is to use ImGui GitHub - ocornut/imgui: Dear ImGui: Bloat-free Graphical User interface for C++ with minimal dependencies
Very simple and powerfull![/QUOTE]

The thing is that we alreade use ImGui for the creation of our Engin, ive to do a button and a texture printed in 2D (for the menus and hud) and so on coded by me.

class UI_Element
{
private:
UI_Element* m_parent = nullptr;
std::vector<UI_Element*> m_children;

public:
virtual ~UI_Element() { for(auto& element : m_children) delete element; }
virtual void HandleMouseClick(int action, ivec2 location) = 0;
virtual void Draw() const = 0;
};

class UI_Button
{
private:
std::fuction<void(void*)> myfunc = [] (void* data) {};

public:
virtual ~UI_Button() {}
virtual void HandleMouseClick(int action, ivec2 location) override { myfunc(nullptr /* or some actual data to modify */); }
virtual void Draw() const override { /*... fill a vertex buffer somehow ...*/ }
};

and so on, everything that belongs to the UI needs to have 2 capabilities:
–> to be drawn
–> to handle input events of some kind (e.g. mouse click)

based on that, build a tree-like structure, the static singleton “UI” is “root”, and has several children elements. each childs screen position is relative to its parent so that you only need to move a menu without having to move all its components (buttons etc). response to input can be stored in std::function of some sort. by using void* as its argument you can give the button a hint to what data it has to modify.

1 Like

[QUOTE=john_connor;1289589]

class UI_Element
{
private:
UI_Element* m_parent = nullptr;
std::vector<UI_Element*> m_children;

public:
virtual ~UI_Element() { for(auto& element : m_children) delete element; }
virtual void HandleMouseClick(int action, ivec2 location) = 0;
virtual void Draw() const = 0;
};

class UI_Button
{
private:
std::fuction<void(void*)> myfunc = [] (void* data) {};

public:
virtual ~UI_Button() {}
virtual void HandleMouseClick(int action, ivec2 location) override { myfunc(nullptr /* or some actual data to modify */); }
virtual void Draw() const override { /*... fill a vertex buffer somehow ...*/ }
};

and so on, everything that belongs to the UI needs to have 2 capabilities:
–> to be drawn
–> to handle input events of some kind (e.g. mouse click)

based on that, build a tree-like structure, the static singleton “UI” is “root”, and has several children elements. each childs screen position is relative to its parent so that you only need to move a menu without having to move all its components (buttons etc). response to input can be stored in std::function of some sort. by using void* as its argument you can give the button a hint to what data it has to modify.[/QUOTE]

Big thanks! but… how i draw in 2d? I read that ive to use glOrtho but all i got is a black screen :S ç

I found this post that makes me an idea on how to do a mix sith 2d and 3d Combining 2d and 3d? - OpenGL: Basic Coding - Khronos Forums, you find it usefull?

and again, thanks for awnsering!