Is there a proper way to scale images in Corona? I have been using newImageRect to size my images relative to the screen width and height, and it normally looks great on the simulator. However, running it on my Android device produces bad results. The images look blurry and distorted. I tried to make my source images bigger (much bigger) and it still came out looking back on the device.
Yes, there’s proper ways to scale images. How to make an image scale to fit fullscreen, and look “right” on all devices takes a couple steps though…
Are you using content scaling? This is done via your config.lua, and is used to make a “virtual” screen, so that your app can treat all different screen sizes as one “virtual” size…
If you haven’t messed around with Coronas content scaling, take a look into it. If you’ve got something setup, how about posting your config.lua and the code that produces weird scaling?
I got my config from an official corona blog post, but here it is anyways:
if string.sub(system.getInfo(“model”),1,4) == “iPad” then
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
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
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
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 = 540,
scale = “letterBox”,
xAlign = “center”,
yAlign = “center”,
imageSuffix =
{
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
notification =
{
iphone = {
types = {
“badge”, “sound”, “alert”
}
}
}
}
end
What resolution is the device you are testing on?
480 * 800
Pixels / inch = 240
Is this by any change a landscape app? If it’s calculating your scale factor based on the short side, its 480/320 = 1.5, so your @2x resources should be used. However if it’s calculating your scale factor based on the long side, its 800/540 = 1.48 which would use your 1x resources. Try changing the
["@2x"] = 1.5,
to
["@2x"] = 1.4,
for the last block (the one that handles Android) and see if that improves it. You might want to use 2.8 instead of 3.0 for the @4x assets.
Rob
It is a portrait game. I tried as suggested and it improved just a little.
Yes, there’s proper ways to scale images. How to make an image scale to fit fullscreen, and look “right” on all devices takes a couple steps though…
Are you using content scaling? This is done via your config.lua, and is used to make a “virtual” screen, so that your app can treat all different screen sizes as one “virtual” size…
If you haven’t messed around with Coronas content scaling, take a look into it. If you’ve got something setup, how about posting your config.lua and the code that produces weird scaling?
I got my config from an official corona blog post, but here it is anyways:
if string.sub(system.getInfo(“model”),1,4) == “iPad” then
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
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
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
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 = 540,
scale = “letterBox”,
xAlign = “center”,
yAlign = “center”,
imageSuffix =
{
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
notification =
{
iphone = {
types = {
“badge”, “sound”, “alert”
}
}
}
}
end
What resolution is the device you are testing on?
480 * 800
Pixels / inch = 240
Is this by any change a landscape app? If it’s calculating your scale factor based on the short side, its 480/320 = 1.5, so your @2x resources should be used. However if it’s calculating your scale factor based on the long side, its 800/540 = 1.48 which would use your 1x resources. Try changing the
["@2x"] = 1.5,
to
["@2x"] = 1.4,
for the last block (the one that handles Android) and see if that improves it. You might want to use 2.8 instead of 3.0 for the @4x assets.
Rob
It is a portrait game. I tried as suggested and it improved just a little.