Since the induction of 6 and 6 plus its the first time I'm starting to work on a new app. Now I'm a bit confused about the use of graphical assets for my app. See for 5/5S things were pretty simple. If I have to make an image view of lets say 180 x 30 points then my image would of 2x resolution that would be 360 x 60 and would fit pretty good inside my image view. Now since 6 and 6 plus have different screen sizes than 5/5S and different resolutions, what is the recommendation here. Should I keep the image view size same on all three devices that is 180 x 30 points. If so, what image resolutions should I be using for the 3 different devices. It would be 2x for 5/5S but what about 6 and 6 Plus and how will Xcode determine to load those automatically? Or should I use different image view size that is larger than 180 x 30 for 6 and 6 plus? Im confused here that how this all works. Help is highly appreciated. Thanks
So your image view size should always be the same amount of points on the phone. Your image will be in the assets and will be different based on the device.
So if on the non retina screen you had 180x30 and on the 5s retina you used 360x60, you would keep the same 2x(360x60) for the 6 and then 3x for the 6+(540x90)
Just add the images to your assets in the correct buckets and it should be taken care of for you.
You should keep your image view point sizes the same but you should add a new pixel resolution for all of your images (3x) which will be used for the 6+. Although the 6+ is slightly less than exactly 3x resolution, the OS does some scaling so that you can just give a 3x image and it will work correctly.
A couple of Xcode versions ago Apple added asset catalogs that make it incredibly easy to manage having multiple resolutions. Just simply drag the correct images into their correct resolution bucket and it will work automagically. Much simpler than having to append #2x and #3x to all of your images like in older versions.
Related
The apple guides haven't helped me too much with this but I am starting to get serious about IOS development and was taken aback when I saw images go from #1x to #3x.
One source I found said they were based on sizes. For example:
If you are working on an inferred VC size and your image is 30x30 and you run that on a iPhone6 then your image should be 30x30 for #3x, 20x20 for #2x, and 10x10 for #1x.
Another source I said mentioned that it was based off the images resolution and not the size of the image.
Could someone clear this up for me and explain how to make sure my images look professional for all screens?
Thanks in advance!
When the first iPhone (and SDK) came out, all images were 1x (1 pixel of the image = 1 pixel of the screen), because that's all we had to care about. On that phone there were 166 horizontal or vertical pixels per inch (dpi). So to display an image that stretched from the left edge to the right edge, our image would need to be 320 wide (because that's what Apple told us - we didn't have to count pixels) by whatever height we wanted. Let's say 100 pixels tall. We'd name that image MyPhoto.png (because Apple told us the iPhone OS worked best with PNG images) and we'd display it.
When the iPhone 4 came out with the retina display, its retina display had 2 times the horizontal and 2 times the vertical resolution of the older phones. So now we needed higher resolution images to get the best looking interface. We were still displaying just a 2" wide image, but it would need twice the number of horizontal pixels and twice the number of vertical pixels (4 times the total number of pixels) to fill the same space. So now our image needs to be 640 pixels by 200 pixels. Since our app would still need to support the older phones as well as the new phones, we didn't want to just replace the old image with the new one. We needed a way to support both. So the old images kept the same name they had before (we didn't append "#1x") and the new images got the "#2x" filename extension to indicate they were twice the resolution. So we'd name this larger image MyPhoto#2x.png.
A common question is why not use just the higher resolution images on both old and new phones? With scaling, both appear to work great. The problem primarily is that the iPhone, especially the older phones, had very limited memory to work with. Using images that are 4 times larger than they need to be is really hard on that limited memory. That's why we had to have both 1x and 2x images in our apps.
For our sanity, we would still just use 1x while designing the interfaces. So screens remained 320 pixels wide in our code, even if we were going to display them on a retina display that was 640 pixels wide. If we wanted to draw a 1 pixel wide line on the retinal display, we'd make it half a pixel wide in our code.
With the larger screen of the iPhone 6 Plus, Apple had to pack even more pixels on the screen to maintain the high resolution customers came to expect. So now we're into 3x images. However, the iPhone 6 Plus doesn't really have three times the number of horizontal or vertical pixels. But again Apple has kept us sane by just asking us to supply "#3x" images, and it worries about scaling them down a bit on the device. As before, we still need to support smaller screen resolutions too, so we still include "#2x" and the 1x images in our apps.
So, to continue our example, the #3x image would need to be three times the width and height of the 1x image. So now we need a 960 wide by 300 pixel tall image. We'd name it MyPhoto#3x.png.
Notice that although I mentioned earlier something about a 166 dpi display, that's not really important when creating these images. In your photo editing app you don't really care if the image is 166 or 72 dpi or anything else. The only important part is the number of pixels in width and height of the final image we export.
So to answer your question (hopefully), you'll want to include all three of these images in your iPhone compatible apps. You can skip the #3x image for iPad-only apps, because there's no 3x screen yet for the iPad. But continue to think only in the 1x size when working in Interface Builder and code.
For example, now to display a 1 pixel wide line on the iPhone 6 Plus, you'd draw a 0.33 wide line rather than a 1 point line. Of course, you still want to support all of the other screen resolutions too, so you'd use code like this to set your line width:
let lineWidth = 1.0 / UIScreen.mainScreen().scale
This will give you 1.0 for the non-retinal iPhones, 0.5 for the iPhone 4, 5 & 6, and 0.33 for the iPhone 6 Plus.
So I am creating a Sprite Kit game and I want to have the same look on every device(no iPad, for now), as if it was the same scaled image.
So far I have my background images figured, 4 images for every screen size, chosen at runtime by checking the height of the screen. All my other images are designed for iPhone 6 plus, so I have #3x and #2x(66.6% of the #3x original image), that means I have iPhone 6 plus and iPhone 6 pixel perfect images.
The problem: Ran on iPhone 5/5s or 4/4s the images don't change size, they are as big as on iPhone 6, which is normal, they use the #2x. I want the images to scale by screen size. I know I have 2 options: use 4 sizes for every single image or scale the images by "screen height" / 667(iPhone 6). Both solutions are not good, because the first makes the app bigger and the second involves checking if it is iPhone 6 plus(use the #3x) and then scaling every single image, also both add a lot of code, I strive for clean code.
The first solution is acceptable, only if there is no other. Sorry for the long explanation, just want you to know what's going on.
I'm building an app that designers only gave me one canvas size for (9x16 aspect ratio at 1242x2208). I started an app that doesn't fully leverage the iPhone 6+'s screen space. Instead, all devices will use the same layout and assets. I did this by removing the #3x launch screen image. The goal is to use the same point system for all devices (320x568 - including for iPhone 4S - the 320x568 will be in a scroll view to fit all the content since the app is designed for 9x16 aspect and the 4S is not).
With that said, for simplicity of the question, lets say I have a full screen image (320x568 points). What are the 3 necessary pixel resolutions I need for 1x, 2x, and 3x?
When I use an app like Prepo that takes a 3x image and scales it down to 2x and 1x automatically for me, this is what happens:
I add a 3x asset at 1242x2208. It spits out:
#2x with px dimensions of 828x1472
#1x with px dimensions of 414x736
That doesn't seem right to me, but then again the whole iOS retina resolutions thing confuses me quite a bit. Shouldn't the 1x resolution end up being 320x568?
It may be that you are mentally confusing apples with oranges. Let's say you have an app that is to run on both iPhone 4s and iPhone 6 Plus (the extremes). Then you have two concerns:
Resolution. The 4s screen has 2 pixels per point, while the 6 Plus screen has 3 pixels per point. Images must come in a 3x size for the 6 Plus and a 2x size for the 4s in order to look good on both screens. This is something that the Asset Catalog will help you with.
Layout. The two screens have different sizes and different proportions. Things will need to grow and shrink in order to fit nicely and look good on both. This is something that Auto Layout (constraints) will help you with.
The two things are both involved where images are to be displayed on the screen, but in two different ways. You will have different resolution images, and they will be displayed in differently sized UIImageViews that adjust the image's display size.
I simply want to display a title page to a game. I want to use pre-rendered images. It needs to work with all iPhones and iPads. So far I am using these assets as screenshot below
I have used these sizes:
In 1x place image with resolution of 320 x 480.
In 2x place image with resolution of 640 x 960.
In Retina 4 2x place image with resolution of 640 x 1136.
In 3x place image with resolution of 1242 x 2207.
Only the iPhone 4 and 5's show correctly. Both 6 and 6Plus are completely wrong.
for iPad:
1x image of 760*1024
2x image of 1536*2048
Only the iPad 2 displays correct. The Air and Retina are completely wrong.
I have read through all the documentation I can find both on here and searching for hours on Google. I am unsure what simple thing I must be overlooking. Am I trying to do something that is not possible? I am only testing on the simulator and thinking it could be an issue with that?
Also I may have a misunderstanding then as I was under the impression that #3x was for iPhone 6 and 6+. If not, what are #3x for?
For some reason Image Sets in Asset Catalogs do not include a size for iPhone 6 or iPhone 6+, so when using a full screen image you may need to handle it manually via code.
What I'm doing (and it's not pretty but it works), is to include another Image Set for iPhone 6 (I all it imageName_47), and another one for iPhone 6+ (I call it imageName_55). Then in code, detect the screen size and swap the image to the best size. You'll only need the #2x version for the _47 one, and the #3x version for the _55 one.
is it not enough to supply just 3x resolution image (e.g for a view or button) in Xcode so that it looks good on iPhone 5,6,and 6plus devices
( i.e leaving 1x and 2x in an image set blank )
My reasoning is that 1x image may look blurry on 6 plus but 3x image should look fine on 5
Basically i am asking so that i can communicate the same to my graphic designer and he should be fine with supplying a singe size rather than three sizes for all images
This got asked and answered many times regarding 2x assets, and the answer hasn't really changed (but it's hard to track down duplicate questions when I'm posting from my phone).
If you ship assets with a higher scale factor than the target device, they will display just fine. But downscaling them in real time has performance costs—they use more memory, they take longer to upload to the GPU, they take GPU time to render. Some of these costs are trivial, others aren't. (Remember, a 2x image is 4x the data of a 1x one, and a 3x image is 2.25x the data of a 2x one.) And they add up for every image in your app.
Most importantly, the devices with lower scale factors are the ones with less CPU/GPU/memory resources to spend on downscaling.
So, what to do? Well, if you don't want to have your artist deal with multiple scale factors, just order the 3x artwork and scale it yourself in Photoshop (or heck, even Preview) before you ship. It might not look as nice as if your artist tweaked it for each size, but it'll look about as good as real-time scaling without the run-time performance costs.
Or, with Xcode 6, you can put a PDF in your asset catalog, and Xcode will automatically generate PNGs for each size at build time. (This is an Xcode feature, not an iOS one, so it works even if you're targeting iOS 7.)
The problem with this idea is that in iOS 8 the iphone 4S is still supported and it has a different aspect ratio than every other iPhone. It renders at 320x480 at 2x so creating images to fit this wouldn't look grainy. The other 3 screen sizes would work if you go with the 3x scale which would be 1920x1080 for every page and just downscale the size for the 4in and 4.7in screens. You will likely need 2 story boards for the app (one for 3.5in and then the other for the 3 other screen sizes). Auto-sizing wouldn't really work in this case unless you changed the image of the UIImage because it would have a shortened length while maintaining the same width.
EDIT: changed the iPhone 6+ screen size to account for the 1.15x down scaling
and changed the rendering factor to match the comment below