Why a PNG image is sometimes blurred depending on its position in the view

Question

I noticed that when placing PNG images in a view using IB and / or animating these images in different positions around the view, the image can sometimes blur slightly.

In most cases, I can fix the blur by adding 0.5 pixels to the image position.

[lbLiteButton.layer setPosition:CGPointMake(140.5,159.5)]; 

Sometimes I have to configure both x and y, as described above. Sometimes I only need to configure x or y.

I remember reading somewhere that this is due to the size of the image and how the main animation works and what to do with half the pixels ... but I can’t find the article anywhere !?

The problem with the ".5 pixels" solution is that it is different for each PNG image depending on the size, so you cannot reuse custom animations because you need to customize it for each image.

• Is there a way to guarantee that no matter where I place or animate my image, I will not get blurry positions?
• Does anyone have any info on this?

Thanks!

Answer 1

The presentation-level position property is based on the anchorPoint property. By default, it is (0.5, 0.5), which means that the anchor point of the layer is in the center. If your view (and its layer) is an odd number of pixels wide or high, setting an integer value for the position will cause the original image to be non-integer, resulting in blurring.

To get around this, you could find a whole version of your position by taking the desired center position of the view, subtracting half the width of the view, rounding this value, then adding half the width of the view and repeating for height. You can also set an anchorPoint for your view layer (0,0) and place the view depending on its origin.

There is a possibility that this could also be due to inconsistency of the supervisor. To diagnose this, you can use the Core Animation tool in the Tools application and select the Color Inappropriate Images option. It should color any views or layers that are not pixel aligned in your application.

Answer 2

I had a similar experience with blurry text in a shortcut, and it was triggered by a superview of my labels having a subpixel offset. Thus, although the location in this view was holistic when it was adjusted for its parent coordinates, it had half a pixel or so that caused blur.

If you get it only occasionally, it may not be so. Is your supervisor moving or is it strange? I would say that the best thing to do is to find out in what circumstances this is happening.

Answer 3

IB has a mistake where sometimes (not often) just moving elements around will make them fuzzy - you most often see this with UILabels and UIImageViews (although this is probably exactly what is most obvious). I am sure that this is due to the points mentioned above, but the correction often consists in setting the location coordinates (x, y) for an element to 0.0, and then returning to the original values. This usually solves the problem (again, this is in IB).