issue with image scalling ? help !

Solar2D Advanced Graphics
#1

Hi experts,

I have issue with image scaling which I cant resolve and I need your kind help…

I created the background image as follows :

splash.png  (320 x 480)

splash@2x.png  (720 x 1140)

splash@4x.png  (1440 x 2280)

1- I used the standard config.lua which shown in (Tutorial: the Ultimate “config.lua” File)

2- my build file as follows :

[lua]

settings =
{
 orientation =
 {
      default =“landscapeRight”,
     content = "landscapeRight,
     supported = { “landscapeLeft”, “landscapeRight” },
  },
 

[/lua]

I used the following to call the background and display it which picks @4x for ipad

[lua]

local background = display.newImageRect(“splash.png”,360, 570)

[/lua]

my application should use landscape orientation but the issue I am getting the image centered and as portrait style. when I used the portrait, the image shows perfectly but the issue that my app does not work in portrait as there other stuff need to be adjusted if I use portrait.

can someone help in the issue ? I need to know if my image sizes are correct and how portrait and landscape sizes should be maintained.

I am confused between the image size (width + height) and it works with orientations

Regards

Abdul

#2

Any advice in this post. :slight_smile:

I just need to understand the size in the Photoshop when created the file and what I should put in lua config/build

Regards

Abdul

#3

Hi @alzaabi98,

Did you make any changes (even minor) to the config.lua file? Can you post exactly what you have currently for that file?

Thanks,

Brent

#4

Hi Brent,

I don’t think I changed any… here is my config.lua

[lua]

if string.sub(system.getInfo(“model”),1,4) == “iPad” then --iPad Configuration
    application =
    {
        content =
        {
            width = 360,
            height = 480,
            scale = “letterbox”,
            xAlign = “center”,
            yAlign = “center”,
            imageSuffix =
            {
                ["@2x"] = 1.5,
                ["@4x"] = 3.0,
            },
        },
        notification =
        {
            iphone = {
                types = {
                    “badge”, “sound”, “alert”
                }
            }
        }
    }

elseif string.sub(system.getInfo(“model”),1,2) == “iP” and display.pixelHeight > 960 then --iPhone5 Configuration
    application =
    {
        content =
        {
            width = 320,
            height = 568,
            scale = “letterBox”,
            xAlign = “center”,
            yAlign = “center”,
            imageSuffix =
            {
                ["@2x"] = 1.5,
                ["@4x"] = 3.0,
            },
        },
        notification =
        {
            iphone = {
                types = {
                    “badge”, “sound”, “alert”
                }
            }
        }
    }

elseif string.sub(system.getInfo(“model”),1,2) == “iP” then --iPhone 3,4 and Older iPod Touch
    application = 
    {
        content =
        {
            width = 320,
            height = 480,
            scale = “letterBox”,
            xAlign = “center”,
            yAlign = “center”,
            imageSuffix =
            {
                ["@2x"] = 1.5,
                ["@4x"] = 3.0,
            },
        },
        notification =
        {
            iphone = {
                types = {
                    “badge”, “sound”, “alert”
                }
            }
        }
    }
elseif display.pixelHeight / display.pixelWidth > 1.72 then  --Android, Kindle Fire, and Nook
    application =
    {
        content =
        {
            width = 320,
            height = 570,
            scale = “letterBox”,
            xAlign = “center”,
            yAlign = “center”,
            imageSuffix =
            {
                ["@2x"] = 1.5,
                ["@4x"] = 3.0,
            },
        },
    }
else
    application =
    {
        content =
        {
            width = 320,
            height = 512,
            scale = “letterBox”,
            xAlign = “center”,
            yAlign = “center”,
            imageSuffix =
            {
                ["@2x"] = 1.5,
                ["@4x"] = 3.0,
            },
        },
        notification =
        {
            iphone = {
                types = {
                    “badge”, “sound”, “alert”
                }
            }
        }
    }
end

[/lua]

I hope you can see something to fix this issue  :slight_smile:

regards

Abdulaziz

#5

Hi @Abdulaziz,

On further inspection, it appears that these results are normal. Your app is set up to support only landscape orientation, but your image is a “tall” image (portrait style), for example 720 x 1140.

Brent

#6

Thanks Brent ,

thanks for your advice. I did change the images to be landscape as well. They work fine in GalaxyS3 and iphone when I change the devices from the simulator but still they are not working properly in Galaxy Tab or IPAD. I used the following formula that I got from the mentioned site and it seems to work now fine .

[lua]

local xMultiplier = display.contentWidth/320 
local yMultiplier = display.contentHeight/480

print ("xMultiplier = " … xMultiplier )
print ("yMultiplier = " … yMultiplier )

–display.setDefault( “anchorX”, 0 )
–display.setDefault( “anchorY”, 0)

local bg = display.newImageRect(“background.png”,320*xMultiplier,480*yMultiplier)
bg.x = 160*xMultiplier ; bg.y = 240*yMultiplier

[/lua]

http://stackoverflow.com/questions/8651591/what-sizes-of-images-do-i-need-for-background-and-sprites-in-corona-to-support-a

I suggest to build one sample code for this issue as I see many people asked about it in different way. I know there is tutorials but still if there is a simple code with simple images, it will make the life much easier for all developers here. Thanks again for your continuous support.

Regards

Abdulaziz

#7

Any advice in this post. :slight_smile:

I just need to understand the size in the Photoshop when created the file and what I should put in lua config/build

Regards

Abdul

#8

Hi @alzaabi98,

Did you make any changes (even minor) to the config.lua file? Can you post exactly what you have currently for that file?

Thanks,

Brent

#9

Hi Brent,

I don’t think I changed any… here is my config.lua

[lua]

if string.sub(system.getInfo(“model”),1,4) == “iPad” then --iPad Configuration
    application =
    {
        content =
        {
            width = 360,
            height = 480,
            scale = “letterbox”,
            xAlign = “center”,
            yAlign = “center”,
            imageSuffix =
            {
                ["@2x"] = 1.5,
                ["@4x"] = 3.0,
            },
        },
        notification =
        {
            iphone = {
                types = {
                    “badge”, “sound”, “alert”
                }
            }
        }
    }

elseif string.sub(system.getInfo(“model”),1,2) == “iP” and display.pixelHeight > 960 then --iPhone5 Configuration
    application =
    {
        content =
        {
            width = 320,
            height = 568,
            scale = “letterBox”,
            xAlign = “center”,
            yAlign = “center”,
            imageSuffix =
            {
                ["@2x"] = 1.5,
                ["@4x"] = 3.0,
            },
        },
        notification =
        {
            iphone = {
                types = {
                    “badge”, “sound”, “alert”
                }
            }
        }
    }

elseif string.sub(system.getInfo(“model”),1,2) == “iP” then --iPhone 3,4 and Older iPod Touch
    application = 
    {
        content =
        {
            width = 320,
            height = 480,
            scale = “letterBox”,
            xAlign = “center”,
            yAlign = “center”,
            imageSuffix =
            {
                ["@2x"] = 1.5,
                ["@4x"] = 3.0,
            },
        },
        notification =
        {
            iphone = {
                types = {
                    “badge”, “sound”, “alert”
                }
            }
        }
    }
elseif display.pixelHeight / display.pixelWidth > 1.72 then  --Android, Kindle Fire, and Nook
    application =
    {
        content =
        {
            width = 320,
            height = 570,
            scale = “letterBox”,
            xAlign = “center”,
            yAlign = “center”,
            imageSuffix =
            {
                ["@2x"] = 1.5,
                ["@4x"] = 3.0,
            },
        },
    }
else
    application =
    {
        content =
        {
            width = 320,
            height = 512,
            scale = “letterBox”,
            xAlign = “center”,
            yAlign = “center”,
            imageSuffix =
            {
                ["@2x"] = 1.5,
                ["@4x"] = 3.0,
            },
        },
        notification =
        {
            iphone = {
                types = {
                    “badge”, “sound”, “alert”
                }
            }
        }
    }
end

[/lua]

I hope you can see something to fix this issue  :slight_smile:

regards

Abdulaziz

#10

Hi @Abdulaziz,

On further inspection, it appears that these results are normal. Your app is set up to support only landscape orientation, but your image is a “tall” image (portrait style), for example 720 x 1140.

Brent

#11

Thanks Brent ,

thanks for your advice. I did change the images to be landscape as well. They work fine in GalaxyS3 and iphone when I change the devices from the simulator but still they are not working properly in Galaxy Tab or IPAD. I used the following formula that I got from the mentioned site and it seems to work now fine .

[lua]

local xMultiplier = display.contentWidth/320 
local yMultiplier = display.contentHeight/480

print ("xMultiplier = " … xMultiplier )
print ("yMultiplier = " … yMultiplier )

–display.setDefault( “anchorX”, 0 )
–display.setDefault( “anchorY”, 0)

local bg = display.newImageRect(“background.png”,320*xMultiplier,480*yMultiplier)
bg.x = 160*xMultiplier ; bg.y = 240*yMultiplier

[/lua]

http://stackoverflow.com/questions/8651591/what-sizes-of-images-do-i-need-for-background-and-sprites-in-corona-to-support-a

I suggest to build one sample code for this issue as I see many people asked about it in different way. I know there is tutorials but still if there is a simple code with simple images, it will make the life much easier for all developers here. Thanks again for your continuous support.

Regards

Abdulaziz