1
\$\begingroup\$

I'm currently working on a project and I'm happy with the UI design:

screenshot

Being the fool that I am, I decided to only design my UI for one resolution, and now that I want to have the user be able to change that resolution I've hit a wall.

So my question is, how can I scale this to fit any resolution? I'm programming it in SDL 2.

\$\endgroup\$
2
\$\begingroup\$

SDL2 actually supports this natively. While it caused me some artifacts while rendering tile-based maps, it works pretty nicely with everything else. I'm not 100% sure on this, but I think SDL also automatically transforms for an example mouse coordinates to work with the scaling nicely.

So, to enable scaling, you only need to call SDL_RenderSetLogicalSize(renderer, width, height); with the width and height values that you used to design the interface. SDL uses letterboxing for the scaling, however, so it will always keep everything in view.

While this might not be the optimal scaling method specifically for user interfaces, it is a quick and fast way to get your game resolution independent. You can continue developing the game while assuming the resolution is static, and SDL does everything else for you automatically. This is definitely something you should try out and see if it is good enough for your requirements.

Otherwise, as already pointed out, you could try out an actual UI framework.

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ Is there any way to prevent anti-aliasing with upscale? Or prevent 1px lines from being cut out from a downscale? \$\endgroup\$ – genfy Apr 13 '16 at 20:40
  • \$\begingroup\$ Basically you have one option: SDL_SetHint. To remove anti-aliasing, you should use the first scaling mode described here. \$\endgroup\$ – Tyyppi_77 Apr 14 '16 at 4:02
0
\$\begingroup\$

This requirement is not easy to fulfill. Of course you can upscale the design to a higher resolution, but this will make fonts, images just bigger, which normally does not too so nice. To avoid this you can try to define anchors for things like your text-box or your avatar-picture. When resizing the screen / window they should stay at the right ( for the avatar for instance ) or at the bottom ( for the text box ). And you need to define which areas can be resized automatically ( like the chat-box ).

If you don't want to implement these features on your own you can try to use a ui-framework like ImGui to do this.

| improve this answer | |
\$\endgroup\$

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.