Jump to content

  • Log In with Google      Sign In   
  • Create Account

How to handle 2D interface position/size


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
1 reply to this topic

#1 rpiller   Members   -  Reputation: 683

Like
0Likes
Like

Posted 27 March 2013 - 10:04 AM

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, 27 March 2013 - 10:08 AM.


Sponsor:

#2 frob   Moderators   -  Reputation: 21331

Like
0Likes
Like

Posted 27 March 2013 - 12:20 PM

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.


Check out my personal indie blog at bryanwagstaff.com.




Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS