[Resolved] User interface elements overlayed on window

[white_nitro0]

Hi,

I have recently started using SFML (I am actually using JSFML, but this question is generally applicable to all bindings) to build a top down shooter type game.

I am interested in building a user interface that displays things like a HUD, an inventory etc, but am not really sure how to separate these from interactive, collide-able game objects (e.g. if I draw a rectangle in the bottom right corner, what is to stop characters walking over it as if it were part of the map).

It seems like using views might be the way to go, but would this mean I have to draw my HUD somewhere miles away from the game area, then make a "Hud Viewport" look at it and display it on top of my game area?

Any examples or code snippets to get me thinking/started would be much appreciated!

[Nexus]

In every frame, you should first render your game world with its current view, then switch to the default view and render the GUI. That way, the user interface will always be on top and you don't have to move buttons as the game world scrolls.

[white_nitro0]

So something along the lines of (pseudocode):

window.setView(viewCenteredOnPlayer);

//do all of the game processing here

window.draw(allGameElements);

gui.setPosition(//top left etc);

window.setView(defaultView);

window.draw(gui);
 

Thanks for the fast response, I'll have a go at implementing that and let you know how it goes.

[white_nitro0]

Thanks, that worked a treat!

The only line that I missed was:

window.setView(viewCenteredOnPlayer);

at the very end so that my coordinate conversions etc were calculated as they were before.

[Nexus]

If the position of your GUI elements doesn't change, it's enough to set it once, before the game loop.

And you don't need to add window.setView(viewCenteredOnPlayer); at the end, if you do it at the beginning of the game loop (before rendering the world). I would separate world and GUI rendering to keep code more readable.

[white_nitro0]

The GUI will update as the game is played, so surely I need to draw the GUI once per frame?

At the minute I have a "Game" class, which has a draw method that is called in the main game loop.

draw(RenderWindow window){

     currentScene.draw(window);

     window.setView(defaultView);
     uiManager.draw(window);

     window.setView(mainView);

}

The currentScene then handles rendering of all of its objects, and the uiManager handles drawing the GUI. The window is passed down because a draw() call is made on each of the objects in turn by the currentScene and uiManager. Does this seem like a sensible approach (before I delve further and further into messy code

[Nexus]

Yep, that sounds reasonable. What I meant is that your code would be a bit more intuitive if you set the view before rendering (and it will also be correct for the first frame):

window.setView(mainView);
currentScene.draw(window);

window.setView(defaultView);
uiManager.draw(window);