Question

I’m working on a UI which needs to work in different aspect ratios, 16:9, 16:10, 4:3

The idea is conceptually simple: Everything is centered to the screen in a rough 4:3 area and anything outside this portion of screen has basic artwork, so something like this:

(not drawn to scale)

Where the pink area represents whre all the UI objects are positioned and the blue area is just background and effects.

The trick is in usability, if I pass in coordinates (0,0) in a 4:3 aspect ratio environment (0,0) would be the top left of the screen. However if I’m in a 16:9 environment (0,0) needs to get renormalized based on the new aspect ratio for it to be in the appropriate place. So my question is: How can I achieve this?

edit: for clarification this is basically for a UI system and while I listed the ratios above as 4:3, 16:9, 16:10 it should be able to dynamically adjust values for whatever aspect ratio it is set to.

edit 2: Just to add more details to the situation: When the positions fo rsetting are passed in they are passed in as a % of the screens current widht height, so basically setting position x would be: [pos x as portion of screen]*SCREEN_WIDTH where screen width is the width of the current screen itself.

Answer 1

The obvious answer seems to be an offset. Since 4×3 is 16×9, it appears you want a 16×9 screen to have 2×9 bands to the left and the right. Hence, the X offset should be (2/16) * width.

For 16×10 screens, the factor is slightly more complicated: 4×3 is 13.33×10, so you have edges of width 1.67, and the X offset should be (1.67/16) * width = (5/48)* width.