• Advertisement
Sign in to follow this  

How to handle 2D interface position/size

This topic is 1763 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I have a 3D game with an engine I'm using and that's all great. It'll work across all mobile devices because 3D doesn't have positioning problems like 2D does.

 

What is the best way to handle 2D UI position/size on such a wide array of devices that have different resolutions and aspect ratios?

 

The way I'm thinking is by defining percentages for x, y, width, & height for all UI controls. This would be % of the screen width/height so that all sizes end up looking and in the same position on all the same aspect ratios. This means however I have to setup the positioning & sizes for each possible aspect ratio. That might be only a handful (3:2, 4:3, 16:9, 128:75 (samsung galaxy tab 7 inch)), but it's still a ton of boring positioning and sizing. It also doesn't work all that well with the main menu image. Do I really have to make a different main menu image for all ratios so that it doesn't get distorted when I make it cover the entire screen? Right now that's 4 different main menu images because of the 4 listed above aspect ratios.

 

The approach I have seems like it would work, but I have to ask if there is an easier way to handle all of this? Is there a way I can define all of this stuff once and it'll just work on all aspect ratios/resolutions and look the same?

 

Thanks

Edited by rpiller

Share this post


Link to post
Share on other sites
Advertisement

it's still a ton of boring positioning and sizing

Welcome to the world of UI development.

 

Is there a way I can define all of this stuff once and it'll just work on all aspect ratios/resolutions and look the same?

You can have a fixed "safe area" in your screen and then fill everything outside that safe area with a graphic or with black bars.  Not pretty, but it is functional.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement