The image on the right is the one that I produced in photoshop. I then stripped all text and put it in an image view, as soon as I did that there was a change in colour and the vertical line lost it sharpness. Has anyone else run into a similar problem? What do I do?
alt text http://grab.by/1DuZ
Are the dimensions correct? Is the position of the image an integer? If these cases antialiasing will slightly blur your image.
One thing to be careful of is that if your image is an odd number of pixels in either dimension then centering it onscreen will cause it to be misaligned. Imagine if you had a 1x1 image (just one pixel) and tried to center it perfectly onscreen. It can't be done because the screen is an even number of pixels wide and high. This is why it's best to always use even dimensioned images whenever possible.
Related
I have got this situation:
this is the photo: http://imageshack.us/photo/my-images/826/iconepe.png/
the two images are little 20 pixel x pixel, If I click on them, nothing happens, if I click oh the left on them, the link works. I should make images bigger?
My guess is that you are missing the buttons with your finger.
The comfortable minimum size of tappable UI elements is 44 x 44
points.
According to the iOS Human Interface Guidelines
If you need to keep the images this small, one workaround would be to increase the size (frame) of the button and keep the image (the image must be set as a button image, not background image). This way you'd have a bigger zone that will accept input and still use the same image.
Ask your designer to make the image bigger, by using a transparent space around it.. 20x20 is too small to touch.. Apple says that the avg finger tap is 44x44 (from WWDC). All table rows are recommended to be at least that height. Use a transparent padding to make your image atleast 44 * 44.
I have never seen this issue before, its very strange. Just wondering if anyone else has come across this too.
I have added a sprite to my game, its supposed to be the top left corner of a box to put text on to. I want to make it scalable without loosing anything so i have it broken up into sections. In the image above the one on top is the image itself, and then the one on the bottom is the image when its being drawn in the iPhone simulator.
Any idea why the last column of pixels on the right are altered? I have not scaled the image at all.
I don't know about Cocos2D, but in general terms what you've done here is to draw the image at a position that isn't an exact multiple of one pixel.
Consequently even without scaling you have resampled the image across a grid that doesn't coincide with the original image data, causing all pixels to be a bit off. It's just the right-hand edge is the most obvious case, since the resampling leaves you with a partial transparency here. But look at eg the two rows of purple pixels in the border: they're not the same, because your vertical alignment is off as well, causing a small amount of colour from the grey border below it to bleed into the lower row of purple.
Ok I actually figured it out this time. Cocos2D adds a bit of antialiasing to CCTextures. To stop it from doing this you need to call this:
[[mySprite texture] setAliasTexParameters];
to turn it back on you call this:
[[mySprite texture] setAntiAliasTexParameters];
When rotating a label, the text is rendered very ugly. Is there an convenient way to get the label aligned with the pixels? Maybe there is some way of rounding the transform of the view, so that it isn't misaligned?
If you use CGAffineTransformRotate or a similar function you won't see any artifacts in the text because the label is drawn first and then rotated in its entirety.
If you are seeing artifacts using a transform, then the most likely source is a transparent label background distorting the appearance of the text. If the background is variable, such as pin stripe or a picture, then rotating the text will put different pixels adjacent to the text which can muddle its outline and apparent color.
I came across a weird scenario in my code the other day:
I have a UIImageView that loads an image with setImage:. The UIImageView is prior initialized with a frame having the exact size of the image (41*41 px). I also set the content mode to UIViewContentModeCenter, which should ensure my image is never scaled.
Now when I look at my image view I see that the image is a bit cropped horizontally and it appears a little blurred (this is a telltale sign that some rescaling is happening in the background). If instead I initialize my image view with 1 extra pixel in width, all works perfectly (however my image view is now one pixel wider than my image).
Also if I initialize my UIImageView with initWithImage: that seems to work fine too. I checked this view's frame after initialization and I found it to be of the same size: 41*41.
So bottom line is I have a few workarounds for this issue, but I'm trying to understand what's happening here. The only explanations I can think of are:
There is a bug in the framework
The rendering of images doesn't work well for images of a particular size. I know that for examples textures are always powers of 2, though I doubt this has much significance for UIImageView.
For the record I'm compiling for OS 3.0 and the issue happens on both simulator and device.
Is the UIImageView contained inside any other views? One thing I've had before is blurred controls caused by fractional pixel offsets. i.e. if you calculate a frame using division and end up with a non-integer float value then UIKit can add some strange blurring at certain offsets and sizes.
So the image view may have an integer size, but it's absolute frame when taking the parent(s) into consideration may not be.
I am using a custom image as the background image for my buttons. I have noticed that the edges of the buttons are cut off sometimes. My buttons vary in size but the behavior doesn't seem to be dependent on the button size. I am creating the buttons programatically. The image I am using is pretty large to cover the entire background.
Can someone please let me know what could be the issue?
More info
Setting the content mode to UIViewContentModeScaleToFill still cuts of the images. Also tried resizing the image but doesn't make a difference.
Thanks.
Did you try setting the button's dimensions to fit exactly the image?
Is the image just cropped or also blurry (cause it's being resized)? Have you toyed around with UIView's contentMode property for the button?
If you did, did you try increasing/decreasing the width or height by a pixel? I sometimes had blurry buttons even though its dimensions were exactly the image's. Adding or removing an extra pixel sometimes helped.
I finally resolved this by creating a 3x3 px image with the background color as the button's color and a 1 px border surrounding the image. Then used the UIImage method stretchableImageWithLeftCapWidth:topCapHeight: to create an image with the desired border size of 1 px.