I am having a problem in iphone 4. The images used in iPhone less than 4 are fine but when I upgraded to iphone 4 the images looks distorted.
Here is the link.
The image size I have used is 320 x 480.
http://img822.imageshack.us/img822/8431/download22.png
Thanks.
The fact is that the resolution of iPhone4 is 960x640 instead that 480x320 so the image is scaled with linear (or bilinear, not sure) filtering.. the result is what you get: a blurry image.
Just redo the image with the proper resolution to solve the problem, you mainly notice these kinds of artifacts because you have rasterized text on an image..
You obtain this effect whenever you resize an image to fit a wider area of pixels: the missing pixels must be filled somehow and filtering comes into play. So you will have to consider also that part of the screen is used by the top bar to have an exact sized picture.
Create a #2x suffix to each of your png that you use.
example:
Icon.png
Icon#2x.png
The runtime environment will choose the double-resolution on retina display devices.
It looks like your original image is 480x320, but you aren't accounting for the fact that the status bar is compressing your image slightly (or perhaps it does on the iPhone4 but on the older iPhones it is cropping instead).
I'd check the image view settings for that background image.
Related
I have a multiplatform iOS/Android game that I programmed in Cocos2d-x. I have only one set of images to use (I'm only after high res devices) that get scaled according to the device's resolution. For example all images are for the iPad but if you are using a Galaxy S then the image locations and scaling are affected by GalaxyS_screenWidth/iPadscreenWidth.
This works fine for all Android devices and on iPad, iPad2 and old iPhones, but with Retina iPhone there is a problem. On the iPhone 4 all my images look extremely pixelated, a result from the images being scaled to iPhone non-retina resolution then scaled back up to fill the screen.
I tried enabling Retina Mode and the images are half of their intended size (maybe due to the usage of get winsize() which uses points) and scaling manually causes other sorts of problems. I tried playing with a lot of options and attributes but to no avail, so what should I do now?
EDIT:
This is not only a graphics issue, as text gets automatically scaled down then up and appears pixelated.
EDIT 2:
Fonts are bitmaps so my bad. But I don't want to use retina as all images are already retina by default. All of my images are set up for the iPad so for iPhone 4 I just scale them down a bit. This works with Android phones.
For example I have an image, depending on screen resolution obtained through getwinsize():
If current resolution width is 1024 then image stays the same.
If current resolution width is 900 then image gets scaled by 900/1024, no problem.
If device is iPhone 4 resolution width is 480, so image gets scaled by 480/1024, then cocos2d-x automatically scales the resulting image by 2 thus the pixelation. I tried using getwinsizeinpixels, I tried multiplying the screen size, I tried many things but nothing worked out of the box unless I am to redo many of my code.
So the question is, how can I just let the damn engine treat the iPhone 4 as an Android phone with resolution of 960x640?
If you want Retina resolution images to look like Retina resolution images, then those images need to be in Retina resolution (960x480).
If you first scale down the image to 480x320 and then upscale it on the device, it will of course look blurred. You can't magically make the Retina pixels appear from a lower resolution image by scaling it up.
SI couldn't get to the bottom of it so I employed a hack. I enabled Retina Display then I scaled everything x2 through code except for the text. Sounds stupid, but it worked, and pixelation is gone. Thanks everyone who spent time trying to help me.
I tried enabling Retina Mode and the images are half of their intended size
when you enable retina support, cocos2d gets images by appending #"-hd" to their provided filenames. Such images are meant to be double the "visual" size (in iOS terms, pixels vs. points), so that they can be sort of scaled down to make full use of device resolution.
If you have a look at the CCDirectorIOS class, you will find there a couple of methods dealing with this, especially those dealing with the scalingFactor. I don't know what kind of changes you should do to make it work, but if you step into those methods and look at the value of various objects, you might find a way to modify cocos2D default behavior for your specific case.
If this seems to complicated, one thing you could try is changing the CC_RETINA_DISPLAY_FILENAME_SUFFIX so that cocos2d will not look for specially-named files for the retina iPhone, but just use the normal ones.
For example all images are for the iPad but if you are using a Galaxy S then the image locations and scaling are affected by GalaxyS_screenWidth/iPadscreenWidth.
Another thing you might try is not using winSize, but winSizeInPixels, so that when you scale down, you down do it down to the point resolution, but just to the pixel resolution (which is double the point resolution).
Hope this helps.
I understand there is a file naming convention for standard images and retina (higher resolution) images. This is achieved by naming the file as <filename>#2.jpg, as an example.
Now I just ran a test on the iPad simulator that seems to suggest that it would be better to just use the higher resolution, period. The test was this: I had one full-screen image and one retina full-screen image. The low-res image simply has a "1" on it. The hi-res image shows "2" on it. Then I had the hi-res image load to fill the entire screen of the iPad simulator.
Result: It seems like the entire retina image was displayed in the screen.
Expected result: I expected the hi-res image to be partly cropped - I assumed the screen was too small to display the entire retina image.
Obvious questions:
Is my test flawed (am I missing something)?
And if this test can be verified, then why should we include 2 sets of images (standard and retina) if we can simply use retina? The only thing I see is that the retina images consume more memory, so it might be too much for devices that don't have retina displays.
Whether or not the retina (#2x) image is used depends ONLY on the scale factor (the amount of pixels per point) of the screen. Both iPad and iPhone have the same behavior.
You never reference the retina images directly. Instead you load them by saying
[UIImage imageNamed:#"myImage"];
If you are on a retina display the retina version of the image (myImage#2x.png) will be chosen for you. In either case the image takes up the same number of points on the screen. Both the retina and non-retina displays have the same number of points.
I have been doing a bit of testing with images today and found that I could not make a blurry PNG image, which looked fine on my desktop appear non-blurry on the iphone without doing some strange things.
It wasn't until I made the images twice the resolution, then resized them within the iphone that they appeared crisp on screen. Is that normal practice?
What say if you have a background image that you want to be non-blurry? I don't see how I can do something like upload a background image and tell it to run at half the size...
Thanks for any pointers!
I found the answer.
It turns out that pixels are not the same on the iphone and are actually at a higher resolution.
In order to make images non-blurry, I needed to basically upload images 2-3 times regular size and then make their size smaller within the CSS.
For example, if I wanted a 50px image, I uploaded a 100px image and styled in within css to have a width of 50px.
It looks like the new iPads have even higher resolutions which means you may even want to upload higher resolution images to cater to those.
A bit lame I think, but it does look nice.
I might be misunderstanding you, but if you'd like to present a crisp image on a retina phone, you can place it in a UIImageView half it's size and set the contentMode to scale to fill.
I am showing a high resolution image in iphone 4 and i set the image view frame size as below :
imageFrameNormal.size.width = 470;
imageFrameNormal.size.height = 625;
but it showing full screen instead of this size. so plz can any one suggest how i show image in right size.
i am trying to check it in simulator.
Thx
You have to use the same sizes on retina and normal displays. For example, you have image view with size 100x100. On retina device you should use the same size 100x100 (no changes in your code). However you'd better use high-res image (2x size). For this you need to name it properly:
image.png - normal size image
image#2x.png - 2x size image.
When you call
UIImage* img = [UIImage imageNamed: #"image.png"];
image.png would be used on normal display and image#2x.png on retina (iOS does it automatically).
The retina display's coordinate system is not in pixels, but in "points". The iPhone display, whether retina or legacy will always be 320x480 points. When interacting with any parameters such as the frame, size, origin, etc., you will need to remember to use points instead of pixels. The OS will handle the "conversion" between points and pixels for you.
For a much more detailed explanation, see Points vs. Pixels in the Drawing and Printing Guide for iOS.
According to Apple's website, the iPhone 4 is 960-by-640-pixel resolution at 326 ppi. I made an image with these specs, however when I put it onto my iPhone as a background for one of my applications, it is way too big and you can only see the upper left corner of the image. How do I make it fit and how do I make a high resolution iPhone 4 background?
You need to give it the name "someImage#2x.png" with the important part being #2x so they can apply the scale correctly.
Realize though that you also need "someImage.png" which is half that size for devices without the retina display.
I always use the "someImage.png" file as the initial image and then the OS will automagically switch to the #2x image during runtime so don't worry about that. Just set it to the standard 320x480 or 480x320 and let the OS do the rest.
Are you using an UIImageView? You should have two versions of your images
image.png - normal 320x480 image for older phones
image#2x.png - for iphone4 with the 640x960 resolution
When you set the file location (be it programically or in Interface Builder) just tell it about the 'image.png'. The iPhone4 will automatically look for the '#2x' version.