# How to set HUD elements position and size depending of resolution [duplicate]

How can I set HUD elements' position and size when changing resolution and maintain the desired layout? All HUD elements (including menu items such as play button, setting button etc) need to get some scaling.

The best solution is using relative scales. CEGUI has a nice system for that, it might give you some inspiration:

http://cegui.org.uk/wiki/Unified_Positions_and_Sizes_System

• You may want to elaborate on what "relative scales" means so that the answer can stand on its own if/when the link is unreachable. It is also a complex problem with no "best" solution, claiming it is is just personal opinion. Jun 17 '14 at 7:43

Maybe you can make a class which takes the video monitor configuration, taking the resolution and then making methods to calculate the position of the elements on the monitor. A pseudo method would be something like:

bool writeText(std::string const& text) {
screen.write(text, screen.resolution-screen.resolution);
/* suppose that we want it on the left, the screen.resolution would return the     monitor resolution, subtracting by himself would result in 0, which is the left corner of the screen.
*/
}

bool spawnButton(int const& width, int const& height, std::string const& label) {
video.newButton(width, height, label, screen.resolution/2-(width/2));
/* Suppose the we want the button on the center of the screen, then is just take  the    screen resolution, divide by two minus the width size of the button divided by two.
*/
}

• screen.resolution-screen.resolution doesn't make much sense... Jun 16 '14 at 18:34
• Yea, I just expose the way to do the things to take the coordinates on the screen, you can make a method to take the left, the right, and the middle of the screen, the left can just be 0.
– ranu
Jun 16 '14 at 18:46
• Getting center of the screen was never a problem. Its screenResolution / 2 - (menuSize / 2) to get a centar. But when you increase resolution that same menuSize need to increase for both X and Y (same scaling for both X and Y). Meaning Menu wont get resized different for X and different for Y. Jun 17 '14 at 8:18
• @user2597689 of course, so why not run this function on a loop with a singleton object and an ID to verify if the button or whatever is already created? Or you could also verify the screen.resolution and other properties in the main loop of the game, and in the same loop call a function to redraw the objects on the screen on every iteration.
– ranu
Jun 17 '14 at 17:24