Jump to content

  • Log In with Google      Sign In   
  • Create Account

FREE SOFTWARE GIVEAWAY

We have 4 x Pro Licences (valued at $59 each) for 2d modular animation software Spriter to give away in this Thursday's GDNet Direct email newsletter.


Read more in this forum topic or make sure you're signed up (from the right-hand sidebar on the homepage) and read Thursday's newsletter to get in the running!


#ActualSimonForsman

Posted 25 October 2013 - 06:39 AM

No letterboxing. I think that looks bad.

 

From using %'s what I see is that the position (x,y) of the controls can always use straight up % and look the way I want. ie. x,y at 50% will always be the same position on any resolution because it's using 50% of it's parent and if no parent then that's calculating based on the screen width/height.

 

However using % for size (width, height) doesn't work correctly when done on a base resolution. ie. 50% width is not the same on a 4:3 vs 16:9. It'll appear much wider. However I don't want it to appear that much wider. I want it to look proportionate just like it does on my base resolution that I developed on. It will be wider than the 4:3 base resolution but not what 50% width would give you. Somehow it needs to know that 50% at 4:3 would = some other % at 16:9 to look basically the same on screen when I scale the control images.

 

I gave you a solution that does just that.

 

skip the percentages and use a coordinate system where the viewport is always 1 unit high and resolution.x / resolution.y wide and then place your objects relative to different corners,edges (or the center) instead.

 

so if you place a 0.5 units wide and 0.1 unit high healthbar 0.05 units down and 0.25 units to the left (to compensate for its width) from the top-center you just draw it at:

 

x = res.x / 2 + (-0.25 * res.y) //not a typo, we always multiply with the vertical resolution, the horizontal resolution only affects the origin position

y = 0 + (0.05 * res.y) 

 

no stretching, no letterboxing and element size will be the same at 1440x1080 and 1920x1080, a wider aspect ratio only gives you more clean space in the center of the screen (if you place GUI elements at the left and right edges)


#1SimonForsman

Posted 25 October 2013 - 06:38 AM

No letterboxing. I think that looks bad.

 

From using %'s what I see is that the position (x,y) of the controls can always use straight up % and look the way I want. ie. x,y at 50% will always be the same position on any resolution because it's using 50% of it's parent and if no parent then that's calculating based on the screen width/height.

 

However using % for size (width, height) doesn't work correctly when done on a base resolution. ie. 50% width is not the same on a 4:3 vs 16:9. It'll appear much wider. However I don't want it to appear that much wider. I want it to look proportionate just like it does on my base resolution that I developed on. It will be wider than the 4:3 base resolution but not what 50% width would give you. Somehow it needs to know that 50% at 4:3 would = some other % at 16:9 to look basically the same on screen when I scale the control images.

 

I gave you a solution that does just that.

 

skip the percentages and use a coordinate system where the viewport is always 1 unit high and resolution.x / resolution.y wide and then place your objects relative to different corners,edges (or the center) instead.

 

so if you place a 0.5 units wide and 0.1 unit high healthbar 0.05 units down and 0.25 units to the left (to compensate for its width) from the top-center you just draw it at:

 

x = res.x / 2 + (-0.25 * res.y)

y = 0 + (0.05 * res.y)

 

no stretching, no letterboxing and element size will be the same at 1440x1080 and 1920x1080, a wider aspect ratio only gives you more clean space in the center of the screen (if you place GUI elements at the left and right edges)


PARTNERS