With the recently-released new iPad (3rd generation) being equipped with a Retina Display, there’s now only one major category of Apple device without a very high resolution screen: the Mac. We’re sure to get a Retina Display Mac before too much longer, but you can actually preview how OS X may look on such a device right now.
Here’s what you’ll need:
- A Mac, running OS X 10.7 (Lion) or later.
- A new iPad (3rd generation).
- Air Display from Avatron, on both the Mac (free) and the iPad ($10).
- The Xcode Developer Tools (a free download from the Mac App Store), and an Apple Developer account (also free).
- A local wi-fi network, that both the Mac and the iPad are connected to.
Retina Display recap
Quartz Composer is a core technology of the macOS. Quartz Composer creations work in any QuickTime -aware application (beginning with Mac OS X 10.4), from the Quartz Composer application, or embedded into Cocoa or Carbon applications. HiDPI mode was initially available as an option in Xcode’s Quartz Debug utility, but since Mavericks has been accessible via a Terminal command. If you’re running Mountain Lion or older, check out this article at OS X Daily for instructions on how to enable HiDPI mode in OS X.
Let’s just briefly recall what a Retina Display is, in extremely simplified terms. A Retina Display is a screen that can display approximately twice as many horizontal, and twice as many vertical pixels (so four times as many pixels in total) as a regular display, in roughly the same physical area. It’s a high-resolution display.
Now, when you have a high-resolution display, you have two options for how your software (or operating system) makes use of it:
The easiest way to turn on the image-tinting option is from the Tools menu in Quartz Debug v4.2. Figure 5-3 The tinting option in the Quartz Debug Tools menu. You can also access the feature from the command line using Terminal. I used to use Quartz debug often, but in the last couple of times that I've used it I can make it work. Is anyone able to make it work? Did something change about how I should use it? Here's what I'm doing: 1. Quartz Debug Version 4.2 (180) 3. Open Quartz Debug 3. Verify that 'Enable Quartz Debug' is check in the panel. From Infinite Loop: To enable Quartz 2D Extreme in Tiger without using the Quartz Debug application, open a terminal window and type sudo defaults.
- You can draw everything using the same number of pixels as before, thus making making everything physically a quarter of its old size. That means that things will be tiny, and probably hard to read.
- You can draw everything at the same physical size as before, and take advantage of having four times as many pixels in that area to make everything four times as detailed. This is what iOS does with the Retina Displays on the iPhone 4/4S and the new iPad. This means everything looks much more beautiful, and the same physical size as it always was.
Here’s a composite screenshot showing the difference between regular and Retina-resolution app icons on an iPhone. The top row shows non-Retina icons at their original pixel-sizes, the middle row shows non-Retina icons scaled up to Retina dimensions, and the bottom row shows actual Retina icons. Note the increased detail in the Retina versions.
We can immediately understand that the screen is only half the story; the software has to be aware of the screen, and to be able to draw things using four times as much detail. iOS knows how to do that, and behind the scenes, OS X Lion knows how to do it too.
The high-resolution support on iOS has no particular name (it’s seamless), but its equivalent on OS X goes by the name HiDPI mode. It’s also hidden to normal people, and is visible only to developers (and presumably magical folk). Let’s switch it on.
Enabling HiDPI mode
HiDPI mode can be toggled using a developer tool called Quartz Debug, which is no longer included with the Xcode Developer Tools download. Thankfully, we can still download it simply enough. The easiest way to start is to launch Xcode, and then choose Open Developer Tool from the Xcode menu, then choose More Developer Tools…
Obtaining additional developer tools from within Xcode
You’ll be taken to the Apple developer site, and you’ll have to log in before seeing a list of additional downloads. The one you want is the Graphics Tools for Xcode. It’s a disk image, so download it then double-click it to mount the volume on your Mac.
Inside the disk image, you’ll find various apps. The one you’re interested in is called Quartz Debug. Launch it.
Enabling HiDPI using Quartz Debug on Lion
Quartz Debug has a window called UI Resolution, containing the checkbox we need. Check the box to Enable HiDPI display modes, then log out and log back in to your account (on your Mac) to make the change take effect.
You’ll now have some intriguing HiDPI resolution options for your Mac’s screen, in the Displays pane of System Preferences. They’ll make your screen virtually smaller, but things will be drawn in more detail.
Air Display
For now, leave your Mac’s screen resolution alone, and instead take a look at Air Display (once you’ve installed it - and rebooted - it’s also shown as a preference pane in System Preferences). You’ll want to ensure that the Use Retina resolutions when available and the Enable HiDPI resolutions checkboxes are checked.
Enabling HiDPI resolutions in Air Display for Mac
Air Display allows you to wirelessly use a connected iOS device as an extra screen for your Mac, as its name pretty much implies. Very useful. Just make sure your iPad (and your Mac, if it’s a laptop) is plugged into a wall socket; Air Display can drain your battery more quickly than normal.
Launch Air Display on your iPad, and then choose your iPad’s name from the popup in the Connect tab of Air Display’s pane in System Preferences on your Mac. Since you’re adding an extra screen, your Mac’s display(s) will briefly turn blue before returning to normal.
At this point, you’ll still be using regular (non-HiDPI) mode, so your iPad will be treated as a 2048 x 1536 pixel display. This will mean that everything on it will be tiny. Here’s the same Safari window shown side-by-side on a MacBook Air 11”, and a new iPad in regular mode:
You probably don’t want to be squinting at tiny details on a 9.7” iPad screen, so let’s make the most of that Retina Display instead. Open the Displays pane in System Preferences again, and you’ll see that there’s also a Displays pane on every screen your Mac is using (including the iPad). Move your Mac mouse pointer onto the iPad screen, and notice that there’s a HiDPI resolution option to choose. Click to to enable HiDPI mode for the iPad’s screen.
Regular and HiDPI resolution options for an iPad 3
Your screens will go blue briefly (perhaps more than once), and will then return to normal - but your iPad is now serving as a HiDPI external screen, which is essentially a Retina Display for your Mac.
Big is beautiful
If you launch some apps on the Mac and move their windows to the iPad screen, you’ll see (in certain cases; mostly with Apple-supplied apps) that they’re drawn in much more detail, with sharper text and more beautiful interface elements. Here’s a side-by-side comparison of TextEdit in both regular and HiDPI modes:
And here’s Safari:
Comparison of Safari in regular and HiDPI modes
Remember that the additional detail is of course at the expense of screen space; your screen is (virtually) four times smaller than in regular mode, but is also four times more detailed. Just as it is with iOS itself. Here’s a screenshot illustrating the difference, again using Safari:
Safari on iPad 3 via Air Display - regular vs Hi-DPI modes
![Quartz Debug Mac Quartz Debug Mac](/uploads/1/1/8/1/118142979/357550004.jpg)
Conclusion
Not all apps support HiDPI mode yet, so you’ll mostly be ogling system-supplied UI elements and factory-installed Apple apps for now, but it’s an enticing preview of OS X running on a Retina Display.
High-resolution screens (and interface rendering) are not only more attractive to look at, but provide considerable benefits for text readability, reducing eye-strain, accessibility for low-vision users, detail in games, and so on. Here’s hoping for a Retina Display-equipped Mac (perhaps a MacBook Air to start with) very soon.
If you enjoyed this article, you might want to follow me (@mattgemmell) on Twitter.
Home > Articles > Programming > General Programming/Other Languages
Page 1 of 1
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.
Like this article? We recommend Xcode 5 Start to Finish: iOS and OS X Development
Like this article? We recommend
Like this article? We recommend
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.
Quartz Debug Mac
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 1An 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 2Downloading 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 3To 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 4The RDM menu bar utility simplifies switching between standard and HiDPI display modes
![Quartz Quartz](/uploads/1/1/8/1/118142979/366695709.jpg)
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.
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.
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.
Macos Quartz Debug
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.
Related Resources
Quartz Debug Mac Download
- eBook (Watermarked) $28.79
- Book $35.99
Quartz Debug Download Mac
- Book $39.99