I've created a GUI for my XNA game and now I'm stuck with a problem. My GUI element positions are designed for a max resolution of 1920x1080, and if I try changing it to 640x480 they disappear from the screen. What I can change to keep them there?


You can do several things:

-Make your GUI resolution indepentent, scale and position everything based on relative screen positions, this is often a lot of work.

-Render your GUI to render target A of a fixed resolution (720P is often chosen), render your game to the screen, get the texture from render target A and render it upscaled/downscaled over the screen (make sure alphablend is turned on). This way you can work with fixed distances and still have it play nice with all sorts of resolutions.

Make sure to test your approach on a lot of resolutions and beware of mixing aspect ratios. Also mind the text, when downscaling too much it might become unreadable.


When positioning your GUI elements, use variables for the X and Y positions, that will vary depending on the size. Setting these positions to an equation like the one below is call relative positioning or relative space.

X = ScreenWidth / 5 - 5

This would put image at a X of one fifth of the ScreenWidth, with a 5 pixel offset. When developing really tight GUI's even the offsets can be relative.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.