1

I am completely new to iOS development. I want to make a small game with the Sprite-Kit framework and I am already stuck at the xcasset catalog.

Say I have a 320x320 pixel image for my iPhone 4s that features a resolution of 960x480 pixels. I put this to "iPhone 2x" in the xcasset catalog, right (cp. following image) ?

enter image description here

Now, do I need for the "iPhone 1x" a 160x160 and for the "iPhone 3x" a 640x640 version of the image? What about the iPad ? What does "iPad 1x" and "iPad 2x" exactly mean in terms of pixels? Is "iPad 1x" also 320x320 and "iPad 2x" 640x640 in my example ?

EDIT-1: Thanks for the link to the possible duplicate. But there's also not discussed what exactly the iPad version are for and how they are related in terms of pixels.

EDIT-2: The resizing results with Asset Catalog Creator are not satisfying, although I used a 4096x4096 pixel image to produce the launch images (cp. following image):

enter image description here

Community
  • 1
  • 1
salocinx
  • 3,715
  • 8
  • 61
  • 110
  • possible duplicate of [Xcode 6 - xcassets for universal image support](http://stackoverflow.com/questions/26020979/xcode-6-xcassets-for-universal-image-support) – ssantos Apr 26 '15 at 12:27
  • Have a look at : https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html – BoilingLime Apr 26 '15 at 12:29
  • @BoilingLime: Your link is kind of off-topic. It only shows information about app-icons and launch-images. But I was asking about other image sets and how they are related to each other. But thanks anyway. – salocinx Apr 26 '15 at 12:45
  • Ok but you still the ration between the different devices. You can use a calculator to find out which size you need. Otherwise have a look to : https://itunes.apple.com/us/app/asset-catalog-creator-app/id809625456?mt=12 . I knows image's sizes are a pain in the ass on iOS. This tool is very useful and worth to pay for it ! – BoilingLime Apr 26 '15 at 12:52
  • @BoilingLime: Thanks for your reply. Ok I will check out the tool, although it's kind of meditation to resize some images beside coding ;-) But I think all what matters are different display resolutions of the different devices, where the 1-3G have 264 ppi, iPhone 4,5,6 have 326 ppi and iPhone 6+ 401 ppi. Thus resulting in 1x, 2x, 3x independent of the actual screen size in pixels... – salocinx Apr 26 '15 at 13:07
  • The tool I gave you automatically generate the complete image set. You just have to specify 1x size of the image you want. It's really complete, it allows you to generate, app icon, image set and launch image. This is a real time saver ! – BoilingLime Apr 26 '15 at 13:11
  • Yes I had a look at it. Looks promising... – salocinx Apr 26 '15 at 13:14
  • @BoilingLime: I bought that app, but the resizing algorithm is crap. It produces a lot of artefacts along anti-aliased edges :-( – salocinx Apr 26 '15 at 20:21
  • I never had this kind of issue. I always put the image with the best resolution I can and it works fine. – BoilingLime Apr 26 '15 at 20:50
  • @BoilingLime: I added a sample image produced by the app. As mentioned in the "Edit-2" in the original question, I used a very high resolution image to produce the launch images... – salocinx Apr 27 '15 at 10:00
  • @BoilingLime: " I knows image's sizes are a pain in the ass on iOS. " --- You're sooo right, I am now fighting since 3 days and came up with a unit scale [-0.5, +0.5] that should fit for all iDevices. – salocinx Apr 30 '15 at 18:48

2 Answers2

1

It looks like your Sky image isn't set for "universal devices" which is why it's asking about iPad images. See Apple's Asset Catalog Help for more info about why you'd want device-specific images.

Select the Sky image name, then hit Command-Opt-4 to open the Attribute Inspector. Where it says "Devices" set it to "Universal" and you should just see the "Universal" section with the 1x, 2x, & 3x image wells.

Also, your sample image sizes seem off. If your @2x image (for iPhone 4s) is 960x480 then the 1x image would be 480 x 240. (and your 3x image for use on the iPhone 6+ would be 1440 x 960.) Your 1x image should be whatever point size you want, the 2x should be twice that in both dimensions, and the 3x should be three times the 1x in both dimensions.

Timothy Sanders
  • 206
  • 3
  • 7
  • Thanks for your answer. I am very confused. I now have an image with the following sizes (1x 320x320, 2x 640x640, 3x 960x960). This should fill the width of my iPhone 4 screen in portrait mode - isn't it ? But it covers only about the half of the screen... I am using SpriteKit and the sprite's scale is set to 1.0 Some help really appreciated - thanks! – salocinx Apr 28 '15 at 09:52
  • @salocinx I'm not familiar with SpriteKit but I fired up a new SpriteKit project and took a look. The view created in the project was what I expected: 320 x 480 _points_ (and actually 640 x 960 _pixels_). The view loaded a SKScene from a file that was set to be 768 x 1024 points. My sprite loaded at 320 x 320 points and it loaded the 2x image from the Asset Set, as I expected. This meant the sprite was approximately half the scene width. I changed the scene width to 320, saved it, and now my sprite took up the full width of the resulting screen. – Timothy Sanders Apr 28 '15 at 16:41
  • Hey @salocinx did changing your SKScene width fix your problem? If so could you up-vote this answer? I'm new to posting on SO and could use the rep! Thanks! – Timothy Sanders May 02 '15 at 17:21
  • Sweet! Glad to have been of assistance. – Timothy Sanders May 02 '15 at 21:16
0

I think all that matters are the different display densities of those devices:

 - iPhone 6 Plus                       401 ppi 
 - iPhone 6                            326 ppi 
 - iPhone 5, 5c, 5s, iPod touch        326 ppi
 - iPhone 4, 4s, iPod touch            326 ppi
 - iPad mini (2G/3G)                   326 ppi
 - iPad (3G/4G), iPad Air              264 ppi
 - iPhone 1, 2, 3                      163 ppi

Thus resulting in 1x (264 ppi), 2x (326 ppi), 3x (401 ppi) independent of the actual screen size in pixels.

salocinx
  • 3,715
  • 8
  • 61
  • 110
  • I don’t think you need to know or care about the ppi. For example, if you are making a button, Apple recommends that it be at least 40x40. The 2X version would be 80x80 and the 3X version would be 120x120. So for an arbitrary image, I would make it at 3x. Test it in the simulator on the Plus to make sure it is the right size. Then resize it by 1/3 for 1x and 1/2 for 2x. Then add to the asset catalog. – JScarry Apr 26 '15 at 14:19
  • Thanks for your reply. I have posted the list above for the understanding why there are different image version needed and that it does not depend on the actual screen size in pixels. – salocinx Apr 26 '15 at 14:27