Sign in to follow this  
rpiller

How to handle 2D interface position/size

Recommended Posts

rpiller    839

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
frob    44904

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this