Retina graphics vs non-retina graphics management - objective-c

I am about to launch a new app and would lik eto increase quality of the graphics. In my case the graphics is the logo and the custom buttons. I do not know if this impact Core Plot but that is also part of the package.
There is quite a few posts about this but there are still things i do not fully understand.
I am reading this quote from "amattn":
It's trivial:
1.Only include #2x images in your project.
2.Make sure those images have the #2x suffix.
The system will automatically downscale for non-retina devices.
The only exception is if you are doing manual, low level Core Graphics drawing.
You need to adjust the scale if so. 99.9% though, you don't have to worry about this.
From this post: Automatic resizing for 'non-retina' image versions
My question in regards to this is:
1. Should i do the testing on retina simulator only, as if i place a #2 grapic on
non-retina it will be too big? ...or is there an other way of doing it?
2. Should i always use a ImageView or is it OK to drag the image on the screen,
this is the logo i am talking about?
3. What about custom made buttons with images, how should i do with those?
4. What is the normal process to manage the different screen sizes, do people
add images for all displays or using this type of process?

Should i do the testing on retina simulator only, as if i place a #2 grapic on non-retina it will be too big? ...or is there an other
way of doing it?
It doesn't really matter which simulator you test on because as long as your non-retina and retina graphics are named correctly (image and image#2x) the correct image will be displayed automatically.
Should i always use a ImageView or is it OK to drag the image on the screen, this is the logo i am talking about?
When you drag and image from the project directly onto a view in interface builder you don't really see it happen but it has automatically created and image view which is containing the image your dropped in.
What about custom made buttons with images, how should i do with those?
[myButton setImage:[UIImage imageNamed:#"myFileName"]];
As shown in the above code you should always use the non-retina fle name when you reference the image a UI element should use. That was if iOS detects the device is retina it can automatically use the #2x version in its place.
What is the normal process to manage the different screen sizes, do people add images for all displays or using this type of process?
Yes, including multiple image resolutions common practice and is required for iPhone apps (not sure about iPad) to include both retina and non-retina images. But regardless of the requirements, you should definitely support both device resolutions to keep your customers happy!

Related

iOS Universal Image Assets

For a new project my client wants to cover all iPhone and iPad sizes. For icons and sprites I'm not really gonna change the shapes of the images, but I'm in a bind with assets for my background images.
Looking at http://iosres.com I was wondering if there is some logic to cover both Landscape and Portrait 3:4 and 9:16 in one asset or should I simply make a set of iPhone and iPad and use UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad to figure out what to show before loading my views?
Also I'm wondering what's most effective for all the different device sizes. I know from experience that an iPad 3 wouldn't like to have a background image loaded on 4k resolution and that you want to avoid pixel differences so it won't trigger scaling in UIImageViews. Will iOS automatically figure out that the iPad 3 will use like the #1x variations, whereas the iPad Pro will load the #3x versions?
Yes iOS will automatically figure out which image to load at runtime and load #1x #2x or #3x depending upon the type of device. You don't need to do anything like UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad for each image.
Edit:
You can also add ~ipad suffix in image names so iOS will pick the appropriate background image for iPhones and iPads. i.e. image_name#2x~ipad.png and image_name#2x.png.

OS X Screensaver: Retina Thumbnail Image

I'm developing a screensaver for OS X using Xcode's screensaver template. By inspecting the package contents of system screensavers, I've found that the thumbnails used in the System Preferences list of screensavers are derived from two files in the screensaver bundle:
thumbnail.png (90x58)
thumbnail#2x.png (180x116)
I have created two images of these sizes and placed them in my screensaver bundle. However, the System Preferences panel on my retina screen appears to load the non-retina asset. Here is a screenshot of the System Preferences panel next to a QuickLook preview of the thumbnail#2x.png image:
I'm out of ideas. Anyone know what could be causing this and how I can stop it? Things I have tried:
Using tiffs instead of PNGs. -- Same result.
Naming the retina-sized asset thumbnail.png -- Same result.
Turned off "combine high-resolution artwork" in Xcode's build configuration. -- Same result.
Deleting the thumbnail assets altogether. Interestingly, the System Preferences panel does not go back to drawing a default thumbnail icon. Instead, it draws an empty white rectangle. This led me to believe there might be caching going on, so I spent some time trying to find where that would be. Cleared preferences, etc.
Oddities
If you inspect a system screensaver's package bundle, you'll find that the two thumbnail files don't report dimensions in the Finder. And if you open them with Sketch, they BOTH appear as 90x58 to that app. (Although Photoshop shows the #2x asset as 180x116). The thumbnails from the system screensavers have the gloss effect already applied, whereas my thumbnail gets that effect automatically even though the image asset does not contain it.
I'm starting to think there's something fishy about the way the panel loads/draws these images. Maybe somebody knows something I don't?

Why does iPad preview use wrong image?

My question is, why does the iPad preview use a different image than the storyboard for wRegular hAny?
I'm trying to set up a universal app with a menu that will use larger buttons for iPad. In the asset catalog, I've specified the standard image size for wAny x hAny, and loaded a larger image for wRegular x hAny.
The story board looks fine for all size classes, with the wRegular x hAny using the iPad image, and everything else using the iPhone image. But the previews all use the iPhone image, including the iPad preview, despite the storyboards showing the correct images. In the screen shots below, the story board is shown to the left, preview to the right.
Can someone tell me what I'm doing wrong here? I'm trying to avoid using explicit image sizes for each class - is that what I should be doing?
Any help would be greatly appreciated. I've read everything I can on using different image sizes, and still cannot figure this out.
enter code here
You can't have a different images by size class for the same button in Interface Builder. It looks to me like you set the image of the button to be the iPad one first in Regular/Any, then set the iPhone one afterward in Any/Any which changed what you did in Regular/Any.
In this image, see how the Font has a + symbol to the left of it, but Image doesn't? That's for specifying the value per size class. Since Image doesn't have that, it's not a value saved for the specific size class.

iOS UI Custom button images

I'm developing a iOS app that is using custom UIButtons with round shape. I wanted to add Image to these buttons and would like to know if I use IB to select an image from my project, do I have to also worry about 2x retina images for retina display?. What should be the image size for both non-retina and retina devices (all iPhones (including iphone 5) and iPad including mini) when I embedded them from IB?
Is there a best resource available on the Internet to get these pngs files for buttons?
Yes you should use all the images. you should just add the images with proper names to the resources folder. And just select the non-retina image rest the compiler will take care of.
http://www.idev101.com/code/User_Interface/sizes.html
The above link will help you with the images sizes
It is easy. Goto interface builder and on the right hand panel you will see this -
All you need to do is first configure your button as custom then include a image file in your project through xcode and then you can select that image in the dropdown in background or image property.
Note that all this is possible to do through code also, its just that IB makes it interactive. Hope this helps.

Managing resources in a universal ios app

I am developing a cocos2d game. I need to make it universal. Problem is that I want to use minimun amount of images to keep the universal binary as small as possible. Is there any possibility that I can use same images I am using for iphone, retina and iPad somehow? If yes, how can I do that? What image size and quality should it be? Any suggestion?
Thanks and Best regards
As for suggestions: provide HD resolution images for Retina devices and iPad, provide SD resolution images for non-Retina devices. Don't think about an all-in-one solution - there isn't one that's acceptable.
Don't upscale SD images to HD resolution on Retina devices or iPad. It won't look any better.
Don't downscale HD images for non-Retina devices. Your textures will still use 4x the memory on devices that have half or even a quarter of the memory available. In addition, downscaling images is bad for performance because it has to be done by the CPU on older devices. While you could downscale the image and save the downscaled texture, it adds a lot more complexity to your code and will increase the loading time.
There's not a single right answer to this question. One way to do it is to create images that are larger than you need and then scale them down. If the images don't have a lot of fine detail, that should work pretty well. As an example, this is the reason that you submit a 512x512 pixel image of your app icon along with your app to the App Store. Apple never displays the image at that size, but uses it to create a variety of smaller sizes for display in the App Store.
Another approach is to use vector images, which you can draw perfectly at any size that you need. Unfortunately, the only vector format that I can think of that's supported in iOS is PDF.