blured images in win32 app.

Hi,

When i make builds for ios or android the images are super sharp.

i make 3 versions of each image, normal, 2x and 4x and use config to change the images depending of the aspectRatio.

how to do this in windows builds? my images are always zoomed witch makes blur. they are not super sharp as android or ios versions.

Regards,

Carlos

First, you’ll want to use daily build #2831 or higher.  In that build, we added what’s called “DPI Awareness” to Windows apps.  What this means is that if your Windows display settings is set up to to DPI scaling, then your app will no longer be scaled up by Direct3D and will instead appear pixel perfect instead.  It’s kind of like Apple’s retina feature.

Second, make sure that your image suffix scale values match your extension names in your “config.lua”.  Meaning that it should look like this…

imageSuffix = { ["@2x"] = 2.0, ["@4x"] = 4.0, }

Meaning that you should set “@2x” to value such as 1.5.  The reason is because Corona Win32 apps will attempt to best-fit your desktop window into the monitor it was launch in based on these image suffix scales.  If your scale values match the post-fixed image suffix scales, then your app will then load images at pixel perfect resolution.

I hope this helps!

hi, joshua.

Thanks for the reply.

My config is:

local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 320 or math.ceil( 480 / aspectRatio ), height = aspectRatio \< 1.5 and 480 or math.ceil( 320 \* aspectRatio ), scale = "letterBox", fps = 30, imageSuffix = { ["@2X"] = 1.48, ["@4X"] = 3.0, }, }, }

i had to put 1.48 because in some android devices if i put 1.5 the blured images appear also.

my corona build is 2016.2862.

So what you are saying if i play with this values i could correct the problem right?

Right.  That there is the problem.  Corona’s “Dynamic Image Resolution” feature expects you to set th @2x and @4x suffixes to 2.0 and 4.0 respectively.  It was never really designed for you to set them to higher or lower values, even though it will blindly accept them anyways (our renderer has no choice but to assume you’ve configured it correctly).  And the biggest issue with setting the scale to a lower value is that in the worst case scenario, your images will be scaled down.  And if scaled down far enough, you’ll lose pixels in your image.  This can be an issue on any platform and I don’t recommend it.  In the case of Android, the solution is to add more image assets of different resolutions.

So, first, I recommend that you change you image suffix scales to this…

imageSuffix = { ["@2X"] = 2.0, ["@4X"] = 4.0, }

But your config also has another problem where you are dynamically setting the content width and height.  This can cause scaled/blurry images as well.  Think about it.  Your base images that do not have an image suffix scale are designed to be display for a particular pixel resolution, such as 320x480.  In order for them to be displayed pixel perfect, you would need to set your content width and height to that base pixel resolution of 320x480 as well.  If you didn’t, and say set the content width and height to 400x600, then your images designed for a lower 320x480 pixel resolution will end up being scaled up and appear blurry.  Makes sense, right?  This is effectively what’s happening in your app.  Setting your content width and height dynamically goes against the design of our Dynamic Image Resolution feature because it selects image files (ie: 2x, 4x, etc.) based on the currently configured content width and height, when really you want this feature to choose an image file that is exactly 2x or 4x pixel resolution bigger than the base image files.  And the only way to do this is to hard code the content width and height.

(Based on your code, you happen to only change the content width and height based on aspect ratio.  So, the above is likely only an issue on Android and if you configured your desktop app to be resizable or support fullscreen mode.)

thanks for the explanation joshua. I never had a problem with this config with android or ios. all my images have 1x, 2x, 4x, my backgrounds have 1440x2280 (with bleed),  the 1.48 and 3.0 prevents that they scale to much and pass to the next resolution if the screen is larger than entended resolution. now i know where the problem is i can play a little with it to see what will be the best solution :slight_smile:

thanks again.

Carlos.

One more thing.
​There is also a “chicken & egg” issue here too.  On mobile (Android, iOS, and WP8), the pixel size of the screen is pretty much always constant.  But on desktop, Corona will read your “build.settings” and “config.lua” files before the Corona Lua APIs become available in order to dynamically decide what the pixel width and height of the desktop window should be.  Meaning that the pixel width and height of the window has not been set yet.  But your “config.lua” wants to dynamically set the content width and height based on the pixel width and height which are not available yet.  And that’s the “chicken & egg” issue here.  It can’t work that way for desktop apps.  In fact, any calls to Corona’s Lua APIs within the “config.lua” will raise a harmless Lua runtime error on startup for desktop apps (it won’t crash the app).  Now, we also know that a lot of Corona developers do this.  So, if a Lua error does happen in the “config.lua” on desktop app startup, then Corona will default to the window width and height you set in the “build.settings”, load all Corona Lua APIs, and then read your “config.lua” 1 more time now that Corona’s Lua APIs are available.
 
So, a good way to compensate for the above and to take advantage of our Win32 desktop window auto-sizing based on your image suffix scales is to do it like the following.  This will also prevent the harmless Lua runtime error on startup.

-- Hard code the following without using Corona APIs. application = { content = { width = 320, height = 480, scale = "letterBox", fps = 30, imageSuffix = { ["@2X"] = 2.0, ["@4X"] = 4.0, }, }, } -- For desktop apps, Corona's Lua APIs are not available the 1st time this -- file is read. This avoids harmless Lua runtime errors on startup. if not display then return end -- Only do the following on mobile or in the Corona Simulator. -- We do not want to do the following for desktop apps. local platformName = system.getInfo("platformName") if (platformName == "Win") or (platformName == "Mac OS X") then if system.getInfo("environment") ~= "simulator" then return end end local aspectRatio = display.pixelHeight / display.pixelWidth if aspectRatio \<= 1.5 then application.content.width = math.ceil(480 / aspectRatio) end if aspectRatio \>= 1.5 then application.content.height = math.ceil(320 \* aspectRatio) end application.content.imageSuffix["@2X"] = 1.48 application.content.imageSuffix["@4X"] = 3.0

I hope this helps!

worked like a charm thanks again Joshua :slight_smile:

First, you’ll want to use daily build #2831 or higher.  In that build, we added what’s called “DPI Awareness” to Windows apps.  What this means is that if your Windows display settings is set up to to DPI scaling, then your app will no longer be scaled up by Direct3D and will instead appear pixel perfect instead.  It’s kind of like Apple’s retina feature.

Second, make sure that your image suffix scale values match your extension names in your “config.lua”.  Meaning that it should look like this…

imageSuffix = { ["@2x"] = 2.0, ["@4x"] = 4.0, }

Meaning that you should set “@2x” to value such as 1.5.  The reason is because Corona Win32 apps will attempt to best-fit your desktop window into the monitor it was launch in based on these image suffix scales.  If your scale values match the post-fixed image suffix scales, then your app will then load images at pixel perfect resolution.

I hope this helps!

hi, joshua.

Thanks for the reply.

My config is:

local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 320 or math.ceil( 480 / aspectRatio ), height = aspectRatio \< 1.5 and 480 or math.ceil( 320 \* aspectRatio ), scale = "letterBox", fps = 30, imageSuffix = { ["@2X"] = 1.48, ["@4X"] = 3.0, }, }, }

i had to put 1.48 because in some android devices if i put 1.5 the blured images appear also.

my corona build is 2016.2862.

So what you are saying if i play with this values i could correct the problem right?

Right.  That there is the problem.  Corona’s “Dynamic Image Resolution” feature expects you to set th @2x and @4x suffixes to 2.0 and 4.0 respectively.  It was never really designed for you to set them to higher or lower values, even though it will blindly accept them anyways (our renderer has no choice but to assume you’ve configured it correctly).  And the biggest issue with setting the scale to a lower value is that in the worst case scenario, your images will be scaled down.  And if scaled down far enough, you’ll lose pixels in your image.  This can be an issue on any platform and I don’t recommend it.  In the case of Android, the solution is to add more image assets of different resolutions.

So, first, I recommend that you change you image suffix scales to this…

imageSuffix = { ["@2X"] = 2.0, ["@4X"] = 4.0, }

But your config also has another problem where you are dynamically setting the content width and height.  This can cause scaled/blurry images as well.  Think about it.  Your base images that do not have an image suffix scale are designed to be display for a particular pixel resolution, such as 320x480.  In order for them to be displayed pixel perfect, you would need to set your content width and height to that base pixel resolution of 320x480 as well.  If you didn’t, and say set the content width and height to 400x600, then your images designed for a lower 320x480 pixel resolution will end up being scaled up and appear blurry.  Makes sense, right?  This is effectively what’s happening in your app.  Setting your content width and height dynamically goes against the design of our Dynamic Image Resolution feature because it selects image files (ie: 2x, 4x, etc.) based on the currently configured content width and height, when really you want this feature to choose an image file that is exactly 2x or 4x pixel resolution bigger than the base image files.  And the only way to do this is to hard code the content width and height.

(Based on your code, you happen to only change the content width and height based on aspect ratio.  So, the above is likely only an issue on Android and if you configured your desktop app to be resizable or support fullscreen mode.)

thanks for the explanation joshua. I never had a problem with this config with android or ios. all my images have 1x, 2x, 4x, my backgrounds have 1440x2280 (with bleed),  the 1.48 and 3.0 prevents that they scale to much and pass to the next resolution if the screen is larger than entended resolution. now i know where the problem is i can play a little with it to see what will be the best solution :slight_smile:

thanks again.

Carlos.

One more thing.
​There is also a “chicken & egg” issue here too.  On mobile (Android, iOS, and WP8), the pixel size of the screen is pretty much always constant.  But on desktop, Corona will read your “build.settings” and “config.lua” files before the Corona Lua APIs become available in order to dynamically decide what the pixel width and height of the desktop window should be.  Meaning that the pixel width and height of the window has not been set yet.  But your “config.lua” wants to dynamically set the content width and height based on the pixel width and height which are not available yet.  And that’s the “chicken & egg” issue here.  It can’t work that way for desktop apps.  In fact, any calls to Corona’s Lua APIs within the “config.lua” will raise a harmless Lua runtime error on startup for desktop apps (it won’t crash the app).  Now, we also know that a lot of Corona developers do this.  So, if a Lua error does happen in the “config.lua” on desktop app startup, then Corona will default to the window width and height you set in the “build.settings”, load all Corona Lua APIs, and then read your “config.lua” 1 more time now that Corona’s Lua APIs are available.
 
So, a good way to compensate for the above and to take advantage of our Win32 desktop window auto-sizing based on your image suffix scales is to do it like the following.  This will also prevent the harmless Lua runtime error on startup.

-- Hard code the following without using Corona APIs. application = { content = { width = 320, height = 480, scale = "letterBox", fps = 30, imageSuffix = { ["@2X"] = 2.0, ["@4X"] = 4.0, }, }, } -- For desktop apps, Corona's Lua APIs are not available the 1st time this -- file is read. This avoids harmless Lua runtime errors on startup. if not display then return end -- Only do the following on mobile or in the Corona Simulator. -- We do not want to do the following for desktop apps. local platformName = system.getInfo("platformName") if (platformName == "Win") or (platformName == "Mac OS X") then if system.getInfo("environment") ~= "simulator" then return end end local aspectRatio = display.pixelHeight / display.pixelWidth if aspectRatio \<= 1.5 then application.content.width = math.ceil(480 / aspectRatio) end if aspectRatio \>= 1.5 then application.content.height = math.ceil(320 \* aspectRatio) end application.content.imageSuffix["@2X"] = 1.48 application.content.imageSuffix["@4X"] = 3.0

I hope this helps!

worked like a charm thanks again Joshua :slight_smile: