This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
How to accommodate for the different screen resolution of iPhone 4?
What does the new resolution mean for existing applications?
Do the devtools make it easy to support new resolutions without changes, if so how? what happens to apps by those developers who dont do things properly to leverage this?
What are the rules for resolution compliance for app acceptance on the app store?
According to page 75 of the latest (2010-06-04) iPhone App Programming Guide.pdf:
On devices with high-resolution
screens, the imageNamed:,
imageWithContentsOfFile:, and
initWithContentsOfFile: methods
automatically looks for a version of
the requested image with the #2x
modifier in its name. It if finds one,
it loads that image instead. If you do
not provide a high-resolution version
of a given image, the image object
still loads a standard-resolution
image (if one exists) and scales it
during drawing.
When it loads an
image, a UIImage object automatically
sets the size and scale properties to
appropriate values based on the suffix
of the image file. For standard
resolution images, it sets the scale
property to 1.0 and sets the size of
the image to the image’s pixel
dimensions. For images with the #2x
suffix in the filename, it sets the
scale property to 2.0 and halves the
width and height values to compensate
for the scale factor. These halved
values correlate correctly to the
point-based dimensions you need to use
in the logical coordinate space to
render the image.
The new OS should (As Steve Jobs stated during the keynote) detect whether or not the app is built for the new res and scale accordingly. The new resolution is just double the old, so it should be a simple scale-up on the operating system's end.
All of the current UI elements will support the new resolution once iOS4 is released, so all a developer will have to do is update their custom images.
Related
If i want my application to be compatible with the Retina display, am i obliged to recreate all my images by doubling their sizes? even the icon?
if you will not use high resolution images your images will look pixelated/blurr.So better to use high res images as well.Some Key points are:
Displaying graphics depending on the device model can be done by duplicating image files and adding an ‘#2x’ suffix. So, when the normal image file is named ‘button.png’, the hi-res version should be ‘button#2x.png’.
You don’t need any additional code for this. In Interface Builder or your code, assign the normal version (without the suffix) to an object. The same goes for the application icon. The resolution of the 2x icon should be 114 by 114 pixels. You will need to add a separate ‘Icon’ property in the Info.plist file for this icon.
If for some reason you do want to perform a check in your code, you can do so by checking the scale factor of the display. Older models will return a scale factor of 1.0, while the iPhone 4 will return 2.0. You can check this with:
float factor = [UIScreen mainScreen].scale;
Depending on the type of application you’re developing further optimizations can be made to utilize the new retina display the best you can.
A very good information here
hope it help you :)
You're not obligated, it just will look very pixelated if you don't.
As for the icon, I believe you are obligated to provide multiple sizes when submitting to the AppStore.
Maybe you'll want to take a look at iRetiner.
You could also check this previous stackoverflow thread : how to set image for ipad application that support retina display
A summary of the icons and what is required can be found in the human interface guidelines. I highly recommend providing high resolution artwork for the retina display even though it is not required. Your default now should be to design artwork at the higher resolution, then scale down for older devices. I doubt Apple would choose to highlight an application as new and noteworthy if it looks pixelated on the latest devices.
I have an iPhone Xcode project that currently only contains images for retina display (twice the size as normal and with a #2x.png suffix). When I run the app on the iPhone Simulator (non retina) the images are still being displayed. Does this mean I don't need to worry about including two sets of images: retina and non-retina?
This all seems a bit odd. I would assume that no images would appear on a non retina device if there are no non-#2x files included.
Note: I have not tested my app on a non retina device. Just the simulator.
I'm pretty sure that iOS will just use the #2x and scale it down if you don't have a non-retina graphic. Although that's sub-optimal since you're letting iOS do the scaling at runtime which will be slower than including the non-retina graphic and also iOS might not do as good a job as scaling as your graphics editor of choice.
Even if it works, it's not good practice, and if you have a media heavy app definitely it would impact performance and battery life and memory foot print and ....
By the way, is it just that you don't have the 1x graphics available to you or you are concerned about your apps (download size) or ...
If you are assigning the images in Interface Builder, and you set the image property on a UIImageView to image#2x.png, for example, iOS will not know that it's a high resolution "2x" image. In fact, on a retina display, iOS will look for an image named image#2x#2x.png. Since it won't find it, it will set the scale factor of the image to 1.0.
The contentMode property (just "mode" in XCode) will decide if any scaling of the image occurs to fit the constraints of the UIImageView. You may wish to set the mode to "Aspect Fit" to get the high resolution image to scale as needed for both retina and non-retina displays. In general, the image will display as seen in Interface Builder.
If you are using UIImage's imageNamed or similar function to load the image, and just specify image (where "image.png" doesn't exist, but "image#2x.png" does), then iOS will actually find the image on a non-retina display, though the scale factor will be 1.0. As previously, you'll need to scale it to fit your view. The image will work normally on a retina device, and the scale factor will be set to 2.0, since iOS looks for a "2x" image first, and it doesn't matter if the other file exists or not.
This is from Apple's documentation on imageNamed:
On a device running iOS 4 or later, the behavior is identical if the
device’s screen has a scale of 1.0. If the screen has a scale of 2.0,
this method first searches for an image file with the same filename
with an #2x suffix appended to it. For example, if the file’s name is
button, it first searches for button#2x. If it finds a 2x, it loads
that image and sets the scale property of the returned UIImage object
to 2.0. Otherwise, it loads the unmodified filename and sets the scale
property to 1.0. See iOS App Programming Guide for more information on
supporting images with different scale factors.
If at all possible, you really should include both retina and non-retina images. Using higher-resolution images than necessary negatively affects memory and performance.
How is it possible to accommodate lower resolutions from Corona but primarily target high resolution devices?
I know you can specifically set content width and height via Corona, and scale the content, but this seems to be for scaling upwards (method detailed here http://blog.anscamobile.com/2011/01/use-dynamic-layouts-in-universal-builds-with-corona-sdk/).
I've been creating an iPad app but I'd not targeted any resolution - my app appears fine on iPad 1 / 2 and on iPhone 4, but not on the original iPhone.
There are two terms you need to pay attention to: dynamic content scaling and dynamic image resolution. The former refers to scaling the stage in Corona to fit on different displays, and the latter refers to swapping different versions of images on different displays. Here's documentation about both:
http://blog.anscamobile.com/2010/11/content-scaling-made-easy/#more-3756
http://developer.anscamobile.com/content/configuring-projects#Dynamic_Image_Resolution
First setup dynamic content scaling in config.lua so that the display will scale on different devices.
Then setup dynamic image resolution (also set in config.lua) so that you can swap in higher resolution versions of your graphics on devices with higher resolution. This is done through naming of the image files; basically, when you call newImageRect("image.png") in your code, it'll load image.png on lower resolution devices and image#2x.png on higher res devices.
(incidentally, while the dynamic image resolution configuration on the linked page uses the suffix "#2" I would recommend "#2x" because that is the standard suffix Apple uses. That is, in Corona you don't have to use Apple's standard, but it's less confusing if you do.)
I have a few questions about screen resolution, that I'm not clear on. These questions assume they my app will be running on iOS 4.0 and up, and on either iPhone 3GS or iPhone 4.
Should the size of the splash image (default.png) be (960x640) or (480x320)?
Should the size of the app icon (Icon.png) be (57x57) or (114x114)?
What about other graphics that I may use in my app, such a graphic that represents a button? Should I always create these images for the higher resolution, and have the app scale them down? In other words, if I want a button image to be displayed on the 3GS that is 200x40 - should I create the image at 400x80, so that iPhone 4 can take advantage of it?
Thanks!
A good guide to this can be found here: http://mobile.tutsplus.com/tutorials/iphone/preparing-your-iphone-app-for-higher-resolutions/
In general you just create 2 sets of images. Your original and then a new one twice as big with #2x in the name. So for image.png at size 32x32 you would have one that is twice the resolution called image#2x.png at size 64x64. In your app just always use the image.png in Interface Builder and when loading in code.
There is no need to detect the device. These images will automatically be picked up by the OS and subbed in as necessary.
Provide both sizes (960x640 & 480x320) for the splash image using the #2x method described above
Provide both icons (57x57 & 114x114) using the #2x method
For our apps we use a combination of the #2x images and just Scaling the large images. (More information on this can be found in the above article) We use the #2x images for bar buttons, icons, etc. But for UIImageViews we often just use the Scaling. There can be a performance hit for doing this, but for most apps I'd say this is negligible. The savings in file size sometimes make scaling the only option.
Related Questions:
Retina/non-retina images in UIImageView
Making an app Retina Display friendly
You need to provide both if you want them to look nice. For example,
Default.png -> (480x320)
Amd
Default#2x.png -> (960x640)
I'd like to design a background image for my app. The image should fill the iPhone screen.
What image size that will work for 3G and 4G?
A) 320 x 480.
B) 640 x 960.
I prefer to use B as it will have more quality, will 3G resize the image to fit?
Thanks for any help.
Simply author both sizes and save the hi-res with a #2x suffix in the filename (like background.png and background#2x.png). iPhone 4 will use the hi-res image, older devices will stick to the ordinary one. See the docs for +[UIImage imageNamed::
This method looks in the system caches
for an image object with the specified
name and returns that object if it
exists. If a matching image object is
not already in the cache, this method
loads the image data from the
specified file, caches it, and then
returns the resulting object.
On a device running iOS 4 or later,
the behavior is identical if the
device’s screen has a scale of 1.0. If
the screen has a scale of 2.0, this
method first searches for an image
file with the same filename with an
#2x suffix appended to it. For
example, if the file’s name is button,
it first searches for button#2x. If it
finds a 2x, it loads that image and
sets the scale property of the
returned UIImage object to 2.0.
Otherwise, it loads the unmodified
filename and sets the scale property
to 1.0. See iOS Application
Programming Guide for more information
on supporting images with different
scale factors.
Also read the appropriate part of iOS Application Programming Guide.
Although it is trivial to resize the image to the proper size, you should prepare both 320×480 and 640×960 (and probably you need a 1024×768 for iPad too). In this way the system can choose the best image for that model.
Basically, you create a 320×480 background.png for the older models, and a 640×960 background#2x.png for retina display. Then load the image with
UIImage* backgroundImage = [UIImage imageNamed:#"background.png"];
in this way, the system will choose the best resolution automatically.