Dynamic image scaling issue

4 replies [Last post]
vitalyx
User offline. Last seen 7 years 7 weeks ago. Offline
Joined: 11 Apr 2011

Images may get scaled a little bit in cases where they shouldn't, which affects their perceived quality.

The refresh icon on the left is a screenshot from Nexus One:
display.newImageRect("refresh.png", 48, 48)

The refresh icon on the right is a screenshot from iPhone:
display.newImageRect("refresh@1.5.png", 72, 72)

In both cases the very same 72x72 image is used: "refresh@1.5.png".
For Nexus One it is loaded indirectly by the dynamic image scaling.
But they look different!

If you don't see it, here is a scaled up version of the above image:

Here is a test project to reproduce the bug. Check it out in the emulator for both the iPhone and Droid/Nexus.

Replies

vitalyx
User offline. Last seen 7 years 7 weeks ago. Offline
Joined: 11 Apr 2011

It looks like a universal problem, which is most obvious with small images:

Here, a 9x9 image is loaded with newImageRect specifying its dimensions. You would assume no scaling will take place, yet the result is horrible.

The dot should look like this:

I have updated the test project to reflect this.

Another observation: removing width and height values from config.lua fixes ugly rendering of refresh icon, but the dot image still stays ugly.

vitalyx
User offline. Last seen 7 years 7 weeks ago. Offline
Joined: 11 Apr 2011

Can somebody from Ansca look into this? It is a glaring issue. Easily reproducible in the emulator and on device with the attached example(tested with Windows/Android).

peach pellen
User offline. Last seen 7 years 33 weeks ago. Offline
Alumni
Joined: 12 Apr 2011

Hey,

Images should not be an odd number of pixels - resizing your dot to 8x8 or 10x10 will eliminate the issue.

Peach :)

vitalyx
User offline. Last seen 7 years 7 weeks ago. Offline
Joined: 11 Apr 2011

Indeed. Thanks a lot! Is that also true for images in sprites?

But what about jagged edges of the 72x72 refresh icon? They can be quite apparent with some backgrounds, e.g. translucent ones:

EDIT: never mind, it has to do with the way Inkscape renders SVGs when you export them to PNG.

In case someone's interested, the solution is to render a larger image in Inkscape and then downscale it to desired resolutions in Photoshop, ImageMagick or whatever.

Viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.