PDA

View Full Version : Gui using only Opengl



Harambe
11-29-2017, 09:57 AM
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!

__bob__
11-30-2017, 07:10 AM
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!

The easiest way to have UI with openGL is to use ImGui https://github.com/ocornut/imgui
Very simple and powerfull!

Harambe
12-05-2017, 06:48 AM
The easiest way to have UI with openGL is to use ImGui https://github.com/ocornut/imgui
Very simple and powerfull!


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.

john_connor
12-05-2017, 07:19 AM
ive to do a button and a texture printed in 2D (for the menus and hud) and so on coded by me.


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.

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.

Harambe
12-05-2017, 08:44 AM
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.


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 https://www.opengl.org/discussion_boards/showthread.php/141806-Combining-2d-and-3d, you find it usefull?

and again, thanks for awnsering!