Welcome, Guest. Please login or register. Did you miss your activation email?

Author Topic: How to Create Simple GUI With SFML  (Read 13382 times)

0 Members and 1 Guest are viewing this topic.

memerson.d

  • Newbie
  • *
  • Posts: 4
    • View Profile
How to Create Simple GUI With SFML
« on: September 11, 2016, 08:05:07 pm »
I am trying to create simple menus for my game and level editor I am working on. I would like to implement this GUI without another library, but I am not sure where to start when making separate sections on the screen.

For example, In my level editor I would like a side bar with pictures of sprites to choose from. How do I separate these two areas while keeping the level area to scale? I considered using two separate views, one for the level and one for the GUI so it would be easy to scale the image of the level. I also thought that maybe I could just use a color filled shape or image for my "window" and then draw text and other GUI elements on top, but then I'm not sure how to keep the level to scale.

When searching online, all I found were people saying to use other libraries like imGUI. I am not asking for someone to write the code for me. I would just like to know if there is a best or most efficient way of doing this and what kinds of objects I should be using to accomplish this.

Thank you in advance.

Hapax

  • Hero Member
  • *****
  • Posts: 3381
  • My number of posts is shown in hexadecimal.
    • View Profile
    • Links
Re: How to Create Simple GUI With SFML
« Reply #1 on: September 12, 2016, 02:57:44 pm »
Using separate views for the "scene"/"level" and a UI overlay can make a lot of sense.
This way can allow you to (for example) let the scene lock aspect ratio while the UI scales to match the window or maybe the UI splits and locks to certain areas.

The only thing you need for a "clickable region" is a region to test if it's been clicked. That is most likely going to be a rectangular region so you can just use an sf::Rect and then use its contains method to see if the position the mouse was in when it was clicked in inside that region.
Note that this applies not only to clicking but also to touch, "fire"/"action" of a moving sprite (representing a form of cursor) whether that be joystick, keyboard or whatever.

Aside from that you will most probably want something visual to "click". This could be anything since the actual region is defined above so you could draw an sf::RectangleShape or sf::Sprite that matches the region exactly or it could be irregular.

Another option would be to use a rectangle shape or sprite and use its global bounds for the rect. This is less flexible and it's often more useful in the long run to separate the visual representation from its "collision box".
Selba Ward -SFML drawables
Cheese Map -Drawable Layered Tile Map
Kairos -Timing Library
Grambol
 *Hapaxia Links*

 

anything