Re-scaling graphics in Zoom mode

I am using Zoom mode

 width = 320, height = 480, scale = "zoom", fps = 30,

Things look pretty good except for certain things like the logo, which (obviously) stretched.  Is there a way to get the scale factor or ration and then figure out how to scale the graphic so it looks normal?  Or, at least, more normal?

I don’t have a good enough grasp of the math and the language right now to figure it out, so if anyone has, please let me know.

Hi @john.cressman,

FYI, “zoom” is not a valid scale setting. Perhaps you mean “zoomEven”? There is also “zoomStretch” but I do not recommend that anybody uses it, since it warps images on different screens.

Personally, “letterbox” is my favorite scale mode and I find it the easiest to work with.

Take care,

Brent

I think it is zoomStretch, since it is stretching the images.  The problem with letterbox is, I can’t have black borders.  Of course, our Marketing department is also freaking out about the logo stretching too.

But there must be a way to figure out the how much it has been stretched.

There are three basic ways of filling the screen…

1.  Use “zoomEven”.  We will zoom the content area to make sure there are no border.  Since we are making the content area bigger, part of your scene may be off screen.

  1. Use a fixed content area, like 320x480, use a background based on 360x570 knowing that on some devices some of the background is off screen.  Then you can use display.contentOriginX and display.contentOriginY to position your data relative to the top, left corner.

  2. Use a dynamic content areas.  Read this tutorial:  http://coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

then read this tutorial next:  http://coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/

You will still need a background that will bleed off the screen, but in this verison 0, 0 is top left and display.contentWidth, display.contentHeight is bottom, right.

  1. Use #2 above, but use plenty of “if” statements to load in different backgrounds based on the image,

Rob

I changed to the config from #3 and it does maintain the aspect ratio but some of the screens only populate PART of the screen.

Most of the stuff looks fine… but the finely placed graphics in the main menu and the burn calculator both don’t seem to scale.

Any way that I can get them to scale as well?  Some special formula or something?

Hi John,

Images will not dynamically select unless you use “display.newImageRect()” to display them. If you used “display.newImage()” then you should switch to the other.

http://docs.coronalabs.com/api/library/display/newImageRect.html

Brent

Hi @john.cressman,

FYI, “zoom” is not a valid scale setting. Perhaps you mean “zoomEven”? There is also “zoomStretch” but I do not recommend that anybody uses it, since it warps images on different screens.

Personally, “letterbox” is my favorite scale mode and I find it the easiest to work with.

Take care,

Brent

I think it is zoomStretch, since it is stretching the images.  The problem with letterbox is, I can’t have black borders.  Of course, our Marketing department is also freaking out about the logo stretching too.

But there must be a way to figure out the how much it has been stretched.

There are three basic ways of filling the screen…

1.  Use “zoomEven”.  We will zoom the content area to make sure there are no border.  Since we are making the content area bigger, part of your scene may be off screen.

  1. Use a fixed content area, like 320x480, use a background based on 360x570 knowing that on some devices some of the background is off screen.  Then you can use display.contentOriginX and display.contentOriginY to position your data relative to the top, left corner.

  2. Use a dynamic content areas.  Read this tutorial:  http://coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

then read this tutorial next:  http://coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/

You will still need a background that will bleed off the screen, but in this verison 0, 0 is top left and display.contentWidth, display.contentHeight is bottom, right.

  1. Use #2 above, but use plenty of “if” statements to load in different backgrounds based on the image,

Rob

I changed to the config from #3 and it does maintain the aspect ratio but some of the screens only populate PART of the screen.

Most of the stuff looks fine… but the finely placed graphics in the main menu and the burn calculator both don’t seem to scale.

Any way that I can get them to scale as well?  Some special formula or something?

Hi John,

Images will not dynamically select unless you use “display.newImageRect()” to display them. If you used “display.newImage()” then you should switch to the other.

http://docs.coronalabs.com/api/library/display/newImageRect.html

Brent