Why does XCode scale Vector images better than Illustrator or Photoshop?

Question

I tried using the new PDF feature of XCode that basically scales the image to 1x, 2x, and 3x. Unfortunately I'm also using Spritekit, so I'd rather use SKTextureAtlases than the Asset Catalog.

My problem is that the rasterized version of the pdf looks better than any exports from Adobe Illustrator (or Photoshop using Smart Objects).

Here's a link to an Imgur album with examples.

Specifically, the image exported from Illustrator is in 2 square sizes: 60px and 90px. The images in Xcode all have the same name but are in two different atlases: [email protected] and [email protected]. The PDF was exported at 30px square from Illustrator and then Xcode scales it to the 2x and 3x versions.

So why does the Xcode version look sharper (especially around the junction between the rounded corner and the flat side)?

Deplume

your link doesn't go to an album, it just goes to Google – Freewill

Thanks Ron. I fixed the link. – Deplume

@user2280092: Maybe this is due to Photoshop/Illustrator settings? – Transmarine

For this kind of job I created atlas dynamically from vector images. I use PaintCode to create methods rendering PNG images then add these images to atlas. – Transmarine

@Domsware That's what I thought too. However I've tried changing all of the settings I can think of but that hasn't worked. As for PaintCode, does it improve performance or is it about the same as using a normal atlas of PNGs? – Deplume

PaintCode does not improve performance but size of app. It allow to optimize the way bitmap are created. I don't have to worry about resolution as PaintCode handle all of this. – Transmarine

How the pictures you show on the link are obtained? In other words how do you obtain the PNG created from Xcode? – Transmarine

And please, could you insert images here? Maybe in the future you'll delete the external files and then images won't be available in this question. – Transmarine

@Domsware Both of the images are screenshots taken of the app running on an iPhone 4S. I took the screenshots through the Xcode "Devices" window. I wish I could get the PNG generated by Xcode in it's raw form because then I'd just use that. And I tried to post the images here but I don't have enough reputation. – Deplume

Let us continue this discussion in chat. – Deplume

Answer 1

I think this could be a resolution issue: Xcode does not have the resolution needed so it enlarge an image causing glitches.

When a SKSpriteNode is created without indication of size, the size of the texture is used. Thus if you SKSpriteNode have a size of 30x30 points, you have to bring a 60x60 pixels image for @2x and a 90x90 pixels image for @3x.

This also maybe be due to settings in Illustrator.

To have a true comparison on screen, you can display two SKSpriteNode with the same size of 30x30 points:

• the first of them have it's texture from atlas generated by Illustrator
• the seconde have it's texture from an image from assets created from PDF feature of XCode

Note that for this test you don't even need an atlas as atlas is intend for rendering optimizations.

Transmarine

Sorry I didn't get back to you sooner but I did test it and it's working now. Thanks for your time. – Deplume