Home > Articles > Programming > General Programming/Other Languages

Detached Retinas: How to Develop and Test OS X Retina Apps on Non-Retina MacBook Pros

  • Print
  • + Share This
  • 💬 Discuss
Like this article? We recommend
Not everyone owns Retina MacBook Pros but when you’re deploying to the Mac App Store you need to ensure that your apps work as consistently on this target as they do on your home system. Learn how to add Retina emulation to your non-Retina development machine.

Not everyone owns Retina MacBook Pros. Although they are fabulous systems, for a variety of reasons I prefer a standard desktop computer. I tend not to spend a lot of my time on the road. I am a dyed-in-the-wool keyboard and display snob. The economics of non-laptop systems make sense for my business.

And, although I’m not personally a Retina user, several of my Mac App Store apps focus on Quartz 2D drawing—a system that takes Retina destinations into account even if all that you’re doing is resizing images to build icon sets and XCAssets folders. When you start drawing with a 128x128 canvas, you may end up producing a 256x256 file even if your app never intends to write to a screen of any kind. It’s a common gotcha bug, and one that you will not track down unless you test on Retina.

Apple’s High Resolution displays provide “a rich visual experience, allowing users to see sharper text and more details in photos than on standard-resolution displays.” They also represent a development minefield for anyone who wants to make sure their applications correctly account for screen optimizing.

As Figure 1 demonstrates, an image you expect to draw into set geometric boundaries may automatically resize beyond those when used on a high-resolution system. To catch these, you need to consistently move between normal and High DPI behaviors while testing.

Figure 1 An early Retina-specific bug in this folderol application drew only the bottom-left corner of the art onto the target folder

In Apple’s High Resolution Guidelines for OS X, Apple suggests using the Quartz Debug tool to help you track down 1x artwork being produced for Retina apps. For me, and for anyone who’s aiming to work with image file manipulation, it’s another feature in that app that’s invaluable: the HiDPI enabler.

To download a copy of the Quartz Debug app, sign in at the Mac developer site at http://developer.apple.com/mac. Scroll to the bottom of the downloads page and click the View all downloads option, as shown in Figure 2.

Figure 2 Downloading the Quartz Debug requires a few extra steps

In the Downloads for Apple Developers screen, search for Graphics Tools for Xcode. This package consists of graphics tools formerly bundled into the Xcode distribution. Apple released an updated version of these on March 10, 2014. Download the dmg, open it, copy the files to a development area on your machine, and launch Quartz Debug.

In the Quartz Debug tool, open the UI Resolution window and check the Enable HiDPI display modes. This option adds virtual display modes to your Mac, enabling you to emulate Retina high DPI monitors. When enabled, you must either log out and log back in or reboot your system, as shown in Figure 3.

Figure 3 To enable HiDPI modes, choose Window > UI Resolution and check the display modes box. Log out and back in or reboot your system to apply those changes

To switch between regular and Retina modes, I use a handy tool called Retina DisplayMenu (RDM), which was created and distributed by Reddit user PhoenixDev. RDM sits on your menu bar. Although it was developed for use on Retina Macs, it’s the perfect accessory for non-Retina development. After you enable HiDPI display modes, it offers easy access to both normal and virtual Retina resolutions, as shown in Figure 4.

Figure 4 The RDM menu bar utility simplifies switching between standard and HiDPI display modes

I’ve chopped off the bottom set of display modes here to make this screen shot fit. The list on the left actually goes on for about three times the height of options that you see. Because I run a two-headed Mac, I can set Retina HiDPI mode on one screen and leave the other screen in non-HiDPI mode, making testing even easier.

From inside applications, you test for Retina by checking a backing scale factor. This kind of test is best limited to development because you want to deliver code that works seamlessly on every target. Functions like the following help ensure that your tests are running as expected on the target you intended.

void TestForRetinaDisplay()
{
    NSLog(@"Retina display mode is %@", 
        ([[NSScreen mainScreen] backingScaleFactor] > 1.0f) ? 
        @"enabled" : @"not enabled");
}

Developer Matt Stevens helped me out a lot when Retina first debuted. He pointed out that fixed-size bitmap images would bypass any automatic optimizations that produce inflated output for simple drawing operations. The following method is based on some of the advice he offered me. Any inspirational elements are due to him. I solely own any bugs and poor practice.

typedef void (^BasicBlock)();

NSImage *ImageByDrawingBlock(CGSize targetSize, BasicBlock block)
{
    if (!block) return nil;
    
    NSBitmapImageRep *rep = [[NSBitmapImageRep alloc]
                             initWithBitmapDataPlanes:NULL
                             pixelsWide:targetSize.width
                             pixelsHigh:targetSize.height
                             bitsPerSample:8
                             samplesPerPixel:4
                             hasAlpha:YES
                             isPlanar:NO
                             colorSpaceName:NSCalibratedRGBColorSpace
                             bytesPerRow:0
                             bitsPerPixel:0];
    rep.size = targetSize;
    
    [NSGraphicsContext saveGraphicsState];
    [NSGraphicsContext setCurrentContext:
        [NSGraphicsContext graphicsContextWithBitmapImageRep:rep]];
    
    // Perform drawing
    block();
    
    [NSGraphicsContext restoreGraphicsState];
    NSData *data = 
        [rep representationUsingType:NSPNGFileType properties:nil];
    NSImage *image = [[NSImage alloc] initWithData:data];
    return image;
}

I regularly use a function like this to draw to exact target sizes. By embedding drawing commands in a block, this boilerplate drawing setup produces reliable output dimensions. This approach works well with complex drawing operations including the Core Image calls I rely on so heavily in my folderol app. This block-based solution ensures that my drawing calls produce a consistently sized result.

The most satisfying part of all this work relates to my OS X tool Art Helper. Art Helper was designed specifically to help developers create assets suitable for varying target resolutions.

In learning to work with Retina-based deployment, I finally ensured that Art Helper consistently produced its results even when run on HiDPI systems. A few singeing reviews (ouch!) helped ensure I was set on the Retina straight and narrow path for accurate image creation. Hopefully this write-up will help you avoid those reviews and move straight to Retina perfection.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus