I am presently typing away on a new Retina Display MacBook Pro, and it is an interesting experience. The visual clarity is stunning. It is akin to the feeling of going from Atari to Nintendo, or Nintendo to Nintendo 64, or standard def to Hi-Def. I just didn’t realize what kind of poor quality I was looking at before.
But it isn’t all rainbows and sunshine. All of Apple’s applications look stunning. But many 3rd party apps look bad (including Java apps), and web browsing is horrific. The problem is high-DPI, and how Apple went about solving the HDPI problem.
On Retina MacBook Pro displays, there are some 220 pixels per inch. If you rendered everything 1-to-1 on such a display, the text (and everything else) would look tiny. You’d need a bionic eye (or a magnifying glass) to read anything on the screen. Or at least, really young eyes. So instead, everything needs to be scaled up.
For vector graphics and text, this is pretty straightforward. You just scale things up and render at the higher resolution and things look great. But for images it isn’t so simply. Scaling images produces a blurry result. And that, in fact, is the experience of using a retina display when browsing websites. You will come to some websites where the text is crisp and the images are all blurry. Other websites have some crisp text and some blurry text, ostensibly either because intentionally or unintentionally the web site is rendering text to an image and then the image is being scaled. And it makes for a horrendous user experience.
In Apple’s applications (starting with the iPhone and iPad with their retina displays), the solution to the problem is for the application developer to supply two images instead of one for each image asset. For example, the splash screen will be supplied with two images, one at normal resolution and one at 2x the resolution. The files are named the same but the 2x one is named according to some convention, such that at runtime the platform will lookup the 2x version on retina behind the scenes. In such a way, your application says “fooImage.png” but “fooImage@2x.png” is looked up instead when on a machine with a retina display.
At the moment, all Java applications (including FX) are pixel-doubled, such that everything (text, images — everything) are doubled and look blurry. But since I’m going to be working on a retina MacBook for the next several years, we’ve got to fix this situation. Driving me UP THE WALL. Our plan is to follow Apple’s lead, and automatically attempt to load the @2x image if one is available, and to otherwise signal to Mac OS X that we’re a high-DPI aware application and it shouldn’t pixel double everything on us.
One thing to be aware of here is that Canvas and ImageWriter are not going to be able to deal with high-DPI right off the bat. Your application is written as if it is on a normal display, but Canvas ends up needing to be pixel doubled. In the future we’ll add API so you can detect this situation and draw into a larger canvas (or automatically scale everything up for you).
I can’t wait for FX to be in hi-res!