Still not understanding image scaling... please help

Getting Started Newbie Questions
#1

He guys, I still cant seem to figure out the dynamic image scaling…

I read the tutorial for the ultimate config file as well as the modernizing tutorial. I have also watched the corona sdk youtube tutorials for content area and the dynamic image scaling…

I am using the iPhone 5 as my base device, so I have designed a background image of 640 x 1136

Here is a video where I try to show you guys what it is i am using, according to everything I have read, I would expect the image to fill the screen of the iPhone 5, but as you can see there is still a lot of black area.

https://youtu.be/DmAMsIZ93J8

maybe im just not understanding it correctly, but maybe you guys can help me figure it out

#2

Forget your screen size for the moment. You’re telling Corona SDK in config.lua to create a screen content area that is 800 content unit points wide * 1200 * aspect ratio high. It works out that your content area will be 800 x 1422 (print the values of display.actualContentWidth and display.actualContentHeight to verify).

Your working screen is 800x1422. You are drawing a 640x1136 image on to an 800x1422 area. It simply doesn’t fill the screen.

On an unrelated note, the modernizing tutorial was designed for “letterbox” not “zoomEven”. It shouldn’t change much, but …

Because phones (outside of the iPhone 4/4s) are long and thin (16:9 aspect ratio) and iPads are short and wide (4:3 aspect ratio), your background should be big enough to fit both shapes, understanding that part of the background isn’t going to show on either device.

 The config.lua you have will generate either an 800x1422 area for phones or a 900 x 1200 area for iPads. (Various Android tablets will fall somewhere in between). Therefore you background image should be 900 x 1422 to fit all screens.

Then let Corona deal with the actual screen size. Don’t plan your art to screen sizes. Plan it for your config.lua base area.

#3

Thanks Rob!

#4

Hey Rob, once last question… How do you determine if the images with the @2x suffix is being used? as I switch devices it appears as though the higher resolution images are not being used.

I used print(display.imageSuffix), but I would like to be able to see if a specific image is using the correct suffix, not just the display

Thanks

#5

In your config.lua you have @2x set to 1.3. That means when a device’s physical screen is 1.3 * 800 pixels wide or larger (1040 pixels) it will use the @2x assets. So 0-1039 px wide device (measured in portrait mode) gets the default, 1040+ gets @2x.

Rob

#6

Forget your screen size for the moment. You’re telling Corona SDK in config.lua to create a screen content area that is 800 content unit points wide * 1200 * aspect ratio high. It works out that your content area will be 800 x 1422 (print the values of display.actualContentWidth and display.actualContentHeight to verify).

Your working screen is 800x1422. You are drawing a 640x1136 image on to an 800x1422 area. It simply doesn’t fill the screen.

On an unrelated note, the modernizing tutorial was designed for “letterbox” not “zoomEven”. It shouldn’t change much, but …

Because phones (outside of the iPhone 4/4s) are long and thin (16:9 aspect ratio) and iPads are short and wide (4:3 aspect ratio), your background should be big enough to fit both shapes, understanding that part of the background isn’t going to show on either device.

 The config.lua you have will generate either an 800x1422 area for phones or a 900 x 1200 area for iPads. (Various Android tablets will fall somewhere in between). Therefore you background image should be 900 x 1422 to fit all screens.

Then let Corona deal with the actual screen size. Don’t plan your art to screen sizes. Plan it for your config.lua base area.

#7

Thanks Rob!

#8

Hey Rob, once last question… How do you determine if the images with the @2x suffix is being used? as I switch devices it appears as though the higher resolution images are not being used.

I used print(display.imageSuffix), but I would like to be able to see if a specific image is using the correct suffix, not just the display

Thanks

#9

In your config.lua you have @2x set to 1.3. That means when a device’s physical screen is 1.3 * 800 pixels wide or larger (1040 pixels) it will use the @2x assets. So 0-1039 px wide device (measured in portrait mode) gets the default, 1040+ gets @2x.

Rob

#10

There is a lot of post on config file. There are old (2013), corona move fast. 

https://coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/ (it didn’t work, there is an error and I don’t know how to resolve it “&gt”)

http://spiralcodestudio.com/corona-sdk-pro-tip-of-the-day-36/ (didn’t work to, when we compare the result of https://github.com/Lerg/smartpixel-config-lua/blob/master/testscaling.lua we don’t have the same value)

Can it be update?

Thanks in advance

#11

> is HTML for > 

Just change any < chars to < and any > characters to > and you should be good to go.

Rob

#12

thank you @Rob !

I have a new problem ^^ (on simulator)

The suffix is nil

local aspectRatio = display.pixelHeight / display.pixelWidth

application = {

 content = {

     width = aspectRatio > 1.5 and 800 or math.floor( 1200 / aspectRatio ) ,

     height = aspectRatio < 1.5 and 1200 or math.floor( 800 * aspectRatio ) ,

     scale = “letterBox”,

     fps = 30, 

        imageSuffix = {

            ["@4x"]=3,

            ["@4x"]=2

     }

 },

To resolve the problem, I set 

["@4x"]=30, ["@4x"]=-1

On simulator I have a borderless 1080x1920 (the problem is not from the equation of width or height because we have the same bug if you set width=800 and height=1200.

I think  the problem in  preloadtexture is from here :slight_smile:

#13

do you mean display.imageSuffix is nil ?

when scaling factor is 1, display.imageSuffix is nil

#14

yes is nil. It’s a nil value

#15

There is a lot of post on config file. There are old (2013), corona move fast. 

https://coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/ (it didn’t work, there is an error and I don’t know how to resolve it “&gt”)

http://spiralcodestudio.com/corona-sdk-pro-tip-of-the-day-36/ (didn’t work to, when we compare the result of https://github.com/Lerg/smartpixel-config-lua/blob/master/testscaling.lua we don’t have the same value)

Can it be update?

Thanks in advance

#16

> is HTML for > 

Just change any < chars to < and any > characters to > and you should be good to go.

Rob

#17

thank you @Rob !

I have a new problem ^^ (on simulator)

The suffix is nil

local aspectRatio = display.pixelHeight / display.pixelWidth

application = {

 content = {

     width = aspectRatio > 1.5 and 800 or math.floor( 1200 / aspectRatio ) ,

     height = aspectRatio < 1.5 and 1200 or math.floor( 800 * aspectRatio ) ,

     scale = “letterBox”,

     fps = 30, 

        imageSuffix = {

            ["@4x"]=3,

            ["@4x"]=2

     }

 },

To resolve the problem, I set 

["@4x"]=30, ["@4x"]=-1

On simulator I have a borderless 1080x1920 (the problem is not from the equation of width or height because we have the same bug if you set width=800 and height=1200.

I think  the problem in  preloadtexture is from here :slight_smile:

#18

do you mean display.imageSuffix is nil ?

when scaling factor is 1, display.imageSuffix is nil

#19

yes is nil. It’s a nil value