HUD / Menue

[etixpp]

Hello, i want to create a menue (like options, exit and so on) and a hud (Live bar, exp bar and so on) for my game, the thing is, when i draw it to a static position like -300,-300 from player position, it would be displayed right, but if the zoom lvl changes or the resolution, it would probably be fucked up. Can you give me some tipps?

And one more question, what are renderstates and how should i use them?

[Ixrec]

You can read the documentation to learn the details, but basically RenderStates is a struct that holds a BlendMode, a Transform, a Texture and a Shader.  Most of the time you won't need to use it because the Texture is included automatically when you draw a textured sprite, a shader can be passed directly to draw() whenever you actually use shaders, BlendMode defaults to AlphaBlend which is almost always what you want, and Transform is the matrix that encapsulates things like position/rotation/scale/etc (and you do not want to deal with these matrices manually).  So unless you really need to manipulate these things in a way that SFML doesn't already provide, you should never have to think about it.

Regarding the HUD, the short version is it's up to you what it should do, and you need to write the code to make it do what you want.  My impression is that most games give the UI elements a fixed size (so they get "smaller" at larger resolutions) and position them relative to the edges of the window (so they "get out of the way" at larger resolutions).  I'd do that unless you really don't like how it looks for some reason.  One common exception is that health bars for players/enemies might be displayed directly above the enemy/player (like in Terraria).

[etixpp]

Yes, obviously thats true, but the thing is, i have no clue how i can get the top left corner of the window, i mean the position it take, at example if i want to display the informations allways on the top left corner of the window, i could get the position of the player and say, ok its allways 300 top and 300 left for the top left corner, but if i zoom in or out or change resolution the top left corner wont be on the same relation to the player as before, so all in all my question would be, if there is a function or something i did not find yet, to allways get the coordinates of a corner of the window?

[etixpp]

well i foud something, i think playerposition x - getview().getsize().x /2 and nearly the same for y should work this out

[Ixrec]

Hmm, not quite sure what you're after, but I think the answer involves window.mapPixelToCoords() and/or window.mapCoordsToPixel().

Does it really have to be relative to the player rather than relative to the window frame?

[eXpl0it3r]

At best you just use two different views, one to display the game with all its transformations (zooming, rotating, moving) and one that is always the same and holds the HUD elements.

window.clear();

window.setView(m_gameView);
window.draw(map);
window.draw(player);
// ...

window.setView(m_hudView);
window.draw(expbar);
// ...

window.display();

[Grimshaw]

You're looking for sf::View..

[etixpp]

ye i already saw, anyways thanks for answers and fast help^^

[etixpp]

Hm i got one more question, what if i want to implement buttons or something? I tried sf gui but if i use sf gui in my sfml game it probably won´t work, because it doesnt use sfml to draw or?

Ofc i could render a button as image of something and if mouse gets klicked while the mouse point intersects with the button, the button event toggles, but isn´t there a easier way?

[nebula]

well, i would do it with rectangleshapes.
you got an image file that contains for example 3 states of the button:
not clicked, mouse over and clicked.
for every event you set the rectangleshape

[Ixrec]

Ofc i could render a button as image of something and if mouse gets klicked while the mouse point intersects with the button, the button event toggles, but isn´t there a easier way?

That seems pretty easy to me honestly.  Checking if the mouse cursor is inside a rectangle takes maybe a couple lines of code.  If you only need a couple buttons rather than a full-blown GUI (like Microsoft Word or Visual Studio or something) then it probably is easier to implement them yourself.  Even adding a mouseover state is pretty simple.  I've already done 3-state textured buttons (is that what you call them?) for my program without any real difficulty.

I only started running into issues when I tried making something a bit more complicated like a slider.

[etixpp]

Ofc i could render a button as image of something and if mouse gets klicked while the mouse point intersects with the button, the button event toggles, but isn´t there a easier way?

That seems pretty easy to me honestly.  Checking if the mouse cursor is inside a rectangle takes maybe a couple lines of code.  If you only need a couple buttons rather than a full-blown GUI (like Microsoft Word or Visual Studio or something) then it probably is easier to implement them yourself.  Even adding a mouseover state is pretty simple.  I've already done 3-state textured buttons (is that what you call them?) for my program without any real difficulty.

I only started running into issues when I tried making something a bit more complicated like a slider.

No doubt it´s easy but a gui isn´t only about buttons *lol*. There is a lot of stuff i need so i use SFGUI since some time and i am fine with it, topic is pretty old though^^