creating a sidebar menu

[sc]

Hi guys,

I wondered if someone more experienced could point me in the right direction for this ? I have been searching the forum and tutorials, but so far I haven't really found what I'm looking for.

I would like to create an application with a sidebar menu, that contains clickable icons and input fields. See for example "Pioneers" http://img.photobucket.com/albums/v315/joshua_skelton/pioneers_climbing_small_zps65302f50.png.

I understand one can use GUI libraries and such, but my question is about the creation of the sidebar itself. Is that a second window, or a second layer, or ... ?

Thanks for the help !!!

[Hapax]

Hi!

The sidebar you describe would probably just be drawn on the same window. That particular rectangular area could be reserved for just the bar but it doesn't technically have to be permanent or rectangular.

For the screenshot you provided, the part of the display that isn't a part of the bar would be drawn in its place and the bar would be drawn in its own place. I would recommend drawing the "bar" (or any UI) after the rest as it could be obscuring some of the scene and be slightly transparent, for example.

For interacting with it, you can simply use sf::Rect's contains() method to see if a mouse position is inside that control's rectangle when the mouse button is clicked.

[Nexus]

To get something quickly running, draw a few sf::Shape or sf::Sprite objects to represent your UI elements. You don't need a separate window, but a separate view is advisable, so that your game map can use different coordinates.

Be aware that UIs are more complex than they appear. As soon as you want to handle input (mouse clicks, text typing, navigating with arrows/tab, ...), you'll easily have to write a lot of code. In that respect, using a library like SFGUI or TGUI is not the worst idea -- even if you don't end up using them, you get a feel about what they provide and how much effort it is to write something (even if it's simpler) yourself.

[sc]

Thank you both for your help ! 

So, just to make sure I understand ... You are talking about something like this, right ?!

window.clear();
window.setView(view_menu);
window.draw(rect1); //draw menu elements here
window.setView(view_map);
window.draw(rect2); //draw map stuff here
window.display();
 

[Nexus]

Yes. I'd recommend to read the tutorial about view carefully, so that you fully understand how to use them and get the best results.