Archive for the ‘OS X’ Category

That Vector Thing: Xcode 6, PDF assets, and unfortunate outcomes

During the iOS 8/OS X 10 10 Keynote, someone mentioned that Xcode assets would now support PDF vector art. I was thrilled. I’ve been waiting for a long time for vector art to form part of the Cocoa touch development arsenal. Unfortunately, the reality is not nearly as interesting as the promise.

Yes, you can add PDF art to asset groups but the size of the art is fixed. When you create a UIImage with a PDF source it gets rasterized. The result stretches with the underlying bits, not vectors:

Screen Shot 2014-06-09 at 1.31.38 PM

Compare that to the original art, which was 35×40 in size, scaled for preview on OS X:

Screen Shot 2014-06-09 at 1.31.52 PM

So what do you do? The simplest answer is to create multiple PDF images and treat them the way you would PNG images, whether using a simple retina pair or building icons and launch assets. So your asset’s contents can end up looking like this:

{
  "images" : [
    {
      "size" : "29x29",
      "idiom" : "iphone",
      "filename" : "AppIcon29x29.pdf",
      "scale" : "1x"
    },
    {
      "size" : "29x29",
      "idiom" : "iphone",
      "filename" : "AppIcon29x29@2x.pdf",
      "scale" : "2x"
    },
    {
      "size" : "29x29",
      "idiom" : "ipad",
      "filename" : "AppIcon29x29@2x~ipad.pdf",
      "scale" : "2x"
    },
    {
      "size" : "29x29",
      "idiom" : "ipad",
      "filename" : "AppIcon29x29~ipad.pdf",
      "scale" : "1x"
    },
    {
      "size" : "40x40",
      "idiom" : "iphone",
      "filename" : "AppIcon40x40@2x.pdf",
      "scale" : "2x"
    },
    {
      "size" : "40x40",
      "idiom" : "ipad",
      "filename" : "AppIcon40x40@2x~ipad.pdf",
      "scale" : "2x"
    },
    {
      "size" : "40x40",
      "idiom" : "ipad",
      "filename" : "AppIcon40x40~ipad.pdf",
      "scale" : "1x"
    },
    {
      "size" : "50x50",
      "idiom" : "ipad",
      "filename" : "AppIcon50x50@2x~ipad.pdf",
      "scale" : "2x"
    },
    {
      "size" : "50x50",
      "idiom" : "ipad",
      "filename" : "AppIcon50x50~ipad.pdf",
      "scale" : "1x"
    },
    {
      "size" : "57x57",
      "idiom" : "iphone",
      "filename" : "AppIcon57x57@2x.pdf",
      "scale" : "2x"
    },
    {
      "size" : "57x57",
      "idiom" : "iphone",
      "filename" : "AppIcon57x57.pdf",
      "scale" : "1x"
    },
    {
      "size" : "60x60",
      "idiom" : "iphone",
      "filename" : "AppIcon60x60@2x.pdf",
      "scale" : "2x"
    },
    {
      "size" : "72x72",
      "idiom" : "ipad",
      "filename" : "AppIcon72x72@2x~ipad.pdf",
      "scale" : "2x"
    },
    {
      "size" : "72x72",
      "idiom" : "ipad",
      "filename" : "AppIcon72x72~ipad.pdf",
      "scale" : "1x"
    },
    {
      "size" : "76x76",
      "idiom" : "ipad",
      "filename" : "AppIcon76x76@2x~ipad.pdf",
      "scale" : "2x"
    },
    {
      "size" : "76x76",
      "idiom" : "ipad",
      "filename" : "AppIcon76x76~ipad.pdf",
      "scale" : "1x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "arthelper"
  }
}}

That’s silly on several levels. For one thing, no matter how compact your vector art is, 17 copies of it can become substantially larger than 17 very tiny PNGs. (The 19 items in the following includes the app icon set folder and the JSON contents file.)

Screen Shot 2014-06-09 at 1.26.03 PM

 

Thinking myself clever, I tried creating a version where all items in the icon set pointed to the same image resource. I figured, why not have each item load the same material since it’s vector based to begin with. The tl;dr version is this: it didn’t work. Xcode would not load assets formatted in that way.

The only bright side arrives in the default image side of things. With default images, art follows many geometries — or at least at this time, who knows what it will be at the end of this summer, or by the time I finish catching up with the WWDC videos. Because of this and their naturally large sizes, my PDF tests regularly improved over the PNGs they replaced for launch images. It’s still pretty redundant for retina and non-retina screens, but it was less bad than a full suite of launch PNGs in my tests.

 

Art Helper: Batch Retina Pairs

Screen Shot 2013-03-29 at 2.23.44 PM

At Lyle Andrew’s request, I’ve added a batch processor utility into Art Helper. It’s still in testing (ping me by email if you’d like to help), but it works like this:

You pick a folder, it searches that folder for art files. They have to use an even pixel size in both dimensions. Art Helper then creates an output folder for the new pairs and builds them there. This way, he doesn’t have to drag in each item to process it.

Want new features? Just let me know and I’ll see what I can do. This is basically a crowd-sourced tool.

Art Helper 1.0.3 submitted to Mac App Store

Screen Shot 2013-03-12 at 8.30.56 AM

Art Helper generates Icon and Default files for iOS development and Iconset folders for OS X from base art that you supply. The new version:

• Adds Retina-pair creation. Build @2x (original resolution) and regular (quarter resolution, half in each direction) versions.
• Addresses Retina-generation bug (thanks to Matt Stevens and Lyle Andrews)

With luck, the update should go live in a week or two.