image auto scaling problem

Audio and Graphics
#1

Hi,

I was wondering if anyone can help me figure this problem out. Currently I am loading a 1280x1920 png image:

local image01 = display.newImage( “Image01.png”)

The image shows up huge and zoomed in at one location. I had thought that auto scaling would take care of this. Am I wrong? Any help would be greatly appreciated. 

I then resized the image down to the “magic size” of 380x570. I loaded better, but the top portion of the image is now cut =/. Below is my config file:

application = {

    content = {

        width = 320,

        height = 480, 

        scale = “letterBox”,

        fps = 30,

        xAlign = “center”,

        yAlign = “top”

        --[[

        imageSuffix = {

            ["@2x"] = 2,

        }

        --]]

    },

#2

You always need to resize your image manually in the code to the size that you want. The only thing that dynamic scaling does is use a higher/lower resolution of the image according to the device.

A good way to resize the image is using the xScale/yScale property (here is a tutorial: http://www.adventuresofanentrepreneur.net/1/post/2013/01/image-in-corona-widthheight-contentwidthcontentheight-xyscale-and-stroke-border.html)

If you want to use dynamic scaling, you have to use display.newImageRect instead of of display.newImage. In the newImageRect function you have to specify the resolution of your image (in your case 1280x1920) . You can read about how to use Dynamic Scaling in the links below:

http://www.coronalabs.com/blog/2010/11/20/content-scaling-made-easy/

http://developer.coronalabs.com/forum/2012/03/12/understanding-letterbox-scalling

Renato

#3

ohhh man, the book I’ve been reading is completely misleading then =/

I tried to use the scale function to size it down correctly. My image dimension is 1280X1920, so if i divide that by 4, I get 320x480, which should be fine since it was defined in my config file. 

local image = displayImage("image.png)

image.xScale = 0.25

image.yScale = 0.25

It now shows a black background instead of just a closely zoomed frame of the whole image.

#4

Try setting the image position after scaling. So, try doing these:

local image = displayImage("image.png") image.xScale = 0.25 image.yScale = 0.25 image.x = display.contentCenterX image.y = display.contentCenterY

ps: in your code you were missing the last " after image.png

#5

You always need to resize your image manually in the code to the size that you want. The only thing that dynamic scaling does is use a higher/lower resolution of the image according to the device.

A good way to resize the image is using the xScale/yScale property (here is a tutorial: http://www.adventuresofanentrepreneur.net/1/post/2013/01/image-in-corona-widthheight-contentwidthcontentheight-xyscale-and-stroke-border.html)

If you want to use dynamic scaling, you have to use display.newImageRect instead of of display.newImage. In the newImageRect function you have to specify the resolution of your image (in your case 1280x1920) . You can read about how to use Dynamic Scaling in the links below:

http://www.coronalabs.com/blog/2010/11/20/content-scaling-made-easy/

http://developer.coronalabs.com/forum/2012/03/12/understanding-letterbox-scalling

Renato

#6

ohhh man, the book I’ve been reading is completely misleading then =/

I tried to use the scale function to size it down correctly. My image dimension is 1280X1920, so if i divide that by 4, I get 320x480, which should be fine since it was defined in my config file. 

local image = displayImage("image.png)

image.xScale = 0.25

image.yScale = 0.25

It now shows a black background instead of just a closely zoomed frame of the whole image.

#7

Try setting the image position after scaling. So, try doing these:

local image = displayImage("image.png") image.xScale = 0.25 image.yScale = 0.25 image.x = display.contentCenterX image.y = display.contentCenterY

ps: in your code you were missing the last " after image.png