4

I'm having a hard time putting all the information on image sizes for @1x, @2x, and @3x together. I've been using the scene editor in XCode with the scene size being 1334x750 (pixel dimensions of the screen of the iPhone 6). So when I size an image for a sprite in that scene, is that the size I should use for the @2x?

From what I've read in the documentation CGSize uses points, not pixels, so if I have an image that is CGSize(width: 50, height: 50), is this independent of my scene size in the scene editor?

Bottom line question: How does the CGSize dimensions translate to how I export my images for @1x, @2x, and @3x in pixels and what should the PPI be when I export?

claassenApps
  • 1,137
  • 7
  • 14
  • @claassentApps, if my answer is to the point then please check mark **accept answer** . Thanks – Faiz Fareed Nov 07 '16 at 20:16
  • @FaizFareed, I don't think it really answers my question - mine was more about what sizes (in pixels) do I need to export for a given CGSize (in points) and how many pixels per inch I should use when exporting. Granted, I haven't had a chance to listen to the videos you posted, but I'm not using AutoLayout, but using the scene editor in SpriteKit. – claassenApps Nov 07 '16 at 20:21
  • @FaizFareed you're miles off answering this question. This question lays at the very foundation of the deception inherent to bringing out retina without warning, and its ongoing ramifications throughout Xcode as each new screen feature is kept secret until its release, and the subsequent contrivances and arbitrariness this creates in how Xcode deals with these artificial problems. – Confused Nov 08 '16 at 05:46
  • @claassenApps the simplest way to help solve this problem is using points in defining your scene size (half of pixels) and then using 2x artwork (this is a pixel versus points reference ratio) and then controlling its size and positions in points, too. But this doesn't solve for all cases, just the most common ones. PPI is a function of the screen size and the pixel/point count. – Confused Nov 08 '16 at 05:49
  • And that's misleading, a little, because I'm only talking about non Plus sized phones. Plus sized phones are the 3x case, where a point is 3 pixels. minus some nightmare minor scaling afterwards. This is the first truly super stupid Tim Cook decision. He should have just ponied up for the higher resolution screens that permitted a true 3x pixels to points, if he cared about design and appearance. – Confused Nov 08 '16 at 05:52
  • @Confused, I just saw your comments - thanks. So if my scene editor screen size is set to 750x1334 (iPhone 6 - '@2x' size) and I size my images accordingly within the scene editor to say 100x100 points, and then I create a class that needs an image of that size using CGSize(width :100, height: 100), should my '@1x' resolution image be generated at 50x50 pixels since I was designing in the 750x1334 '(@2x') size, and my '@2x' resolution be generated at 100x100 pixels? I think I'm having a hard time describing my problem. – claassenApps Nov 29 '16 at 20:41
  • And I suspect @bobby is wrong about 1x being the size in StoryBoard or Interface Builder... that would only be true if you were designing for an iPhone 3GS or iPad mini first gen, or iPad 2 or earlier. – Confused Nov 29 '16 at 20:47

4 Answers4

3

Xcode can handle vector images, so you can forget about @2X and @3X images if you are able to export your images as PDF e.g. in Sketches export panel one of the options for export format is PDF, so create your artwork @1X and export as PDF, then in Xcode when you add the image to Assets.xcassets, you can set the images Scales attribute to Single Scale. Xcode will generate the required @2X and @3X images from your vector PDF at build time.

Mark Brownsword
  • 2,287
  • 2
  • 14
  • 23
  • I did not know this, I will have to give this a try. Could you perhaps provide a graphic showing that it truly is generating \@2X and \@3X, and not just taking an \@1X vector, converting to bitmap, then scaling – Knight0fDragon Nov 08 '16 at 16:15
  • 1
    @Knight0fDragon This [SO post](http://stackoverflow.com/questions/25818845/how-do-vector-images-work-in-xcode-i-e-pdf-files) explains how vectors work in Xcode. – Mark Brownsword Nov 08 '16 at 19:16
  • @MarkBrownsword, Is there a way to use vector artwork within a sprite atlas? I don't see some of the options to make them work when they're included in a sprite atlas. – claassenApps Dec 10 '16 at 16:39
  • @claassenApps not that I know of, it's only for components that use `xcassets` as source for images e.g. `tilesets`. – Mark Brownsword Dec 10 '16 at 22:20
1

The concept is simple. The size in Storyboard or Interface Builder should be the size of you asset in @1x format.

The retina display ( or the iPhone 6+ @3x size ) does not mean than you have much space than before, it means that you can draw 2 ( or 3 ) pixels where you draw 1 before.

So for a 50x50 px Image View, cou should have 3 assets : - Image@1x.png ( 50x50 px) - Image@2x.png ( 100x100 px) - Image@3x.png ( 150x150 px)

CZ54
  • 5,488
  • 1
  • 24
  • 39
  • Thanks for the post. So does the CGSize (using points) abstract the idea of pixels? - if the CGSize is 50x50 points, for '@1x', use 50x50 pixels, '@2x', use 100x100 pixels, and '@3x', use 150x150 pixels? How does PPI fit into all of this? – claassenApps Nov 07 '16 at 17:23
  • Yes indeed. A CGSize(50,50) will look exactly the same across alll the type of screens. For the second part, this is the magic of retina, the draw twice more pixels in the same inch space – CZ54 Nov 08 '16 at 08:47
  • @CZ54, bro Could you please help me to check out my question http://stackoverflow.com/questions/43955856/different-launch-screen-image-or-background-image-sizes-for-ios-devices ? – May Phyu May 14 '17 at 13:19
  • I know this is old but this answer needs tweaking. The iphone 6plus offers more surface area than the iphone 6 and the iphone 5, the simple idea of it is if you had the same app on all 3 devices and you put then next to each other, the image should be relatively the same size visually – Knight0fDragon May 14 '17 at 14:07
1

Suppose you have created an image in your assets library consisting of 3 sets of same image, @1x.png having size 50x50 pixels, @2x.png of size 100x100 pixels and @3x.png size 150x150 pixels.

you don't needs to worry about which one to use in your storyboard(because storyboard automatically using @1x.png), and which one to use for the targeted device like as iPhone6, or iphone7, or iPad(because by default programing all hardware finds out their pixels relative required image among those @1x.png, @2x.png and @3x.png)

for further instructions you needs to study Auto layout Programing Guide you can also view their apple's tutorial videos regarding Auto layout.

mysteries of auto layout part1

mysteries of auto layout part2

Faiz Fareed
  • 1,498
  • 1
  • 14
  • 31
  • bro Could you please to view my question http://stackoverflow.com/questions/43955856/different-launch-screen-image-or-background-image-sizes-for-ios-devices ? – May Phyu May 14 '17 at 13:26
1

@1x and @2x used to relate to the retina graphics change when iPhone 4 came out.

iPhone 3GS was 320x480, iPhone 4 was 640x960. This meant that the points per inch were literally the same, but the ppi was doubled, hence the @2x. When the iPhone 5 came out, the only thing that changed was the height, so the ppi was the same for the width, no problems here.

Then we hit the 6 and 6+. At this point, apple said screw it, try to keep ppi that correlate to previous iPhones without having keep the previous iphones usable area, or provide bigger screen pixels for bigger devices. Now @2x has lost its original meaning

But, to really throw us off, they made the iPhone SE, which went back to the ppi screen size of the iPhone 5, so @2x makes sense again.

Basically, when thinking of the @2x graphics, think about the 1st iPhone resolution size.

Now, you have a choice to make. You can give your apps more/less usable area, you can black box the extra usable area, or you can scale and take some kind of quality loss due to game pixels not being 1:1 with the screen pixels anymore.

Knight0fDragon
  • 16,609
  • 2
  • 23
  • 44
  • Could you please help me to view my question http://stackoverflow.com/questions/43955856/different-launch-screen-image-or-background-image-sizes-for-ios-devices bro? – May Phyu May 14 '17 at 13:25