PNG Blurs edge when odd pixel height (ie 57px high)

Solar2D Daily Builds and Public Releases
#1

Ive noticed that loading a png (it had rounded corners, so transparent bits at the edges) was blurred / anti-aliasing badly along the top edge

setting the y position from say, 10px to 10.5 pixel fixes the problem so Im assuming this is a rendering bug for images with odd values for height (and maybe width not tested)

its an easy fix at the moment, make the images height an even number (works a treat) even if that means adding a 1px height transparent gap at the bottom of the PNG [import]uid: 5354 topic_id: 637 reply_id: 300637[/import]

#2

This is actually not a bug, it’s due to the fact that an image is positioned according to its center point by default. An image with an odd number of pixels has a center point at a 0.5 pixel value.

One solution is to position the image on a half-pixel value, as you’ve done here.

Another solution is to simply change the image’s registration point to one of the corners rather than its center, like this:

object:setReferencePoint( display.TopLeftReferencePoint )

Now you can position the image by its corner, and use full-pixel values.

See the section “Display Objects: Common Object Methods” in the API Reference (page 50 in current edition) for more details on this. [import]uid: 3007 topic_id: 637 reply_id: 1336[/import]

#3

Hi Evan

Further to my above comment I have just tried your solution when loading a png and it didnt work, the png was still blurred (with an odd px width). Resetting the ref only meant I had to add a 0.6 (instead of the 0.5 pixel width) to get the image looking correctly.

The only fix so far is even image widths and heights which look fine. Im thinking this is bug at this point.

Matt [import]uid: 5354 topic_id: 637 reply_id: 1368[/import]

#4

HI Evan

Are you sure? When an image is loaded and positioned with display.newImage(“image.png”, 21, 114) the value is automatically taken from the top left corner of the image so display.newImage(“image.png”, 0, 0) displays the image with its top left corner at the global 0,0 and the image if having an odd width / height is blurred

Matt [import]uid: 5354 topic_id: 637 reply_id: 1367[/import]

#5

Hi Matt, try using png’s with even (not odd) widths/heights.

The local origin of the image is the center of the image by default, so to align an image’s top left corner (per the parameters of the display.newImage call), we have to divide the width/height by 2. If they are odd, we’ll inevitably have a 0.5 pixel offset.

In the longer term, we’ll add some sort of snapToPixel property to make this a non-issue.

cheers,
walter

p.s. incidentally, if you do display.newImage( “image.png”, 10.5, 10.5) does the blurring go away?
[import]uid: 26 topic_id: 637 reply_id: 1422[/import]

#6

(Logged as bug #135) [import]uid: 3 topic_id: 637 reply_id: 2039[/import]