Part of the Khronos Group
OpenGL.org

The Industry's Foundation for High Performance Graphics

from games to virtual reality, mobile phones to supercomputers

Results 1 to 5 of 5

Thread: Gui using only Opengl

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Junior Member Newbie
    Join Date
    Nov 2017
    Posts
    3

    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!

  2. #2
    Intern Contributor
    Join Date
    Mar 2014
    Posts
    59
    Quote Originally Posted by Harambe View Post
    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!

  3. #3
    Junior Member Newbie
    Join Date
    Nov 2017
    Posts
    3
    Quote Originally Posted by __bob__ View Post
    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.

  4. #4
    Member Regular Contributor
    Join Date
    May 2016
    Posts
    443
    Quote Originally Posted by Harambe View Post
    ive to do a button and a texture printed in 2D (for the menus and hud) and so on coded by me.
    Quote Originally Posted by Harambe
    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.
    Code cpp:
    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.
    Last edited by john_connor; 12-05-2017 at 07:27 AM.

  5. #5
    Junior Member Newbie
    Join Date
    Nov 2017
    Posts
    3
    Quote Originally Posted by john_connor View Post
    Code cpp:
    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_bo...ning-2d-and-3d, you find it usefull?

    and again, thanks for awnsering!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •