Hi,
I often hear about having to resize all images if they are going to be displayed on a Mac with a Retina display.
Could someone please tell me the difference between my app being run on a retina display and a non-retina display.
For example, if I had two 15" Macs, 1 with Retina display and 1 without, would my whole app appear smaller on the retina display - or is it somehow only images which change size?
I fully understand the concept or pixel resolution (i.e. 1024 x 768) etc. but for some strange reason I can’t quite grasp the concept of Retina displays.
Just guessing here based on what I have seen in other topics.
If you write an APP and do NOTHING SPECIAL in regards to Retina… it will look and run the same on both types of machines.
But to look “snappier” on a RETINA machine, you need to supply TWO sets of any graphics… 1x and 2x size (with the assumption that the 2x size ones are better looking and not just “blown up” using photoshop)… and you have to modifiy the PLIST of the app to indicate to OSX that it is indeed a Retina ready app. There may be more… .but my understanding is that is the gist of it.
Basically the retain display has twice as many pixels in that 1024x768 image being displayed (so the actual image is 2048x1536 being scaled down) so if you have an icon that is 32x32 on a normal screen, it needs to be scaled up and then drawn (try it in Preview or Paint or GIMP)…
An app with no Retina adjustments will look ‘pixelated’ on a Retina screen. Then if you make the application Retina, the OS controls will draw correctly, and depending on how you draw to canvasses they can look fine also, but 72 dpi images look pixelated.
A Retina screen’s resolution is 144 dpi, where as a normal Mac screen is 72 dpi. So all the control size are the same size, but they require twice as much information to draw. So if you want to draw a 32 x 32 pixel image, you need a 64 x 64 pixel image and draw it into a 32 x 32 space. Then it’s being drawn at 144 dpi.
This does require that your artwork be recreated, simply upsizing a 32 x 32 image to 64 x 64, will result in blurriness (even on a non-retina screen).
The best way I’ve found is to use the Retina Kit (which is my third generation Retina code), and to include two png images in your application. One with a regular file name and the other using @2x “image.png” becomes “image@2x.png”. Almost all my app artwork is created in vector, so I simply export the first one at the normal resolution, while the @2x image is twice the size.
The Retina Kit is all based upon Apple APIs, so as long as you’re using the Retina Kit and have these two images, the OS will automatically use the correct image when it’s required.
If you go to this page http://www.apple.com/macbook-pro/features-retina/ Then move the magnifying glass around you can see the difference between a Retina screen and a non retina screen. But the main issue is, when someone has a Retina mac, and apps are not Retina ready, they look wrong and in theory this will decrease customer confidence in your app. Although I have seen really crappy ‘half’ retinarized apps still get some good reviewer on the App Store.
You can set a regular display to show a retina resolution. I think I got the original code from the mailing list, but a quick Google search resulted in enough info about this. And then you need a build script to enable Retina in your app. AppWrapper does this, too.
Be warned when setting a regular display to Retina, it halves your screen size and doesn’t actually reflect Retina performance. With a real Retina display, it’s pushing 4 times as much data to the display and nearly everything updates slower than a non-retina display!
Although I did discover yesterday, how in some circumstance I can make drawing static images actually much faster on a Retina display than on a non-retina display… It’s going to take a bit more work to be able to share the code, but it does involve the use of CGLayers. I had a scene that took 138,000 milliseconds to render on a real Retina display ( 50,000 on a non-Retina display ) and by switching to CGLayers, it then only took 3,800 milliseconds on Retina, and yet 13,000 on a non Retina display!
When I get the time, I’m hoping to roll this into my Retina Kit, so not only will it make it easier to Retinaify a Xojo application, but will also improve the performance of displaying static images.
So basically, the actual window chrome, list boxes, buttons etc. will all look normal, but pictures and button icons etc may become distorted due to upscaling?
Yes. All native controls will automatically work, as long as you turn on Retina support in your app’s plist (this just tells the OS that your app works in Retina). The only thing you need to do extra is for any pictures or icons your app uses (custom controls, etc.). For many apps, just turning on Retina support and compiling as Cocoa is all you need to do.
You can read about it in full in my article on the topic, Issue 10.6, but in essence the plist is a file that’s generated by Xojo and ends up inside your application’s bundle. You can open that in a plist or text editor and add the appropriate setting like this:
I made a standalone app that does this for you for in my article – you can download it for free via that page above. It just lets you drag and drop your app onto it.
But of course, now that we have Xojo and it allows IDE scripting, a far better way is to add a build script so that this happens automatically each time you run/build your app.
To do that, create a new build script in the IDE with this code:
Make sure you move this build script so it happens after the build stage (since it needs the app to already be built in order to modify it). You can set in the IDE whether the build script happens for debug apps or only built apps. (I wrote about IDE scripting in Issue 11.4 if you want to read more about that.)
How do I actually turn on Retina support in Xojo? And where is the plist?[/quote]
Also for reference, this is covered in User Guide Book 4: Development, Chapter 2: Cross-Platform Development, Section 3.5: OS X Features/Retina Displays.
In my app I draw a gradient by taking a starting colour and ending colour and calculating the lines of colour that I need to draw on each line to get from start to finish. So for example I may have a canvas that is 100px tall, but I want a gradient in the top 40px of it (not the whole canvas). This works fine with not retina apps as I just draw the 40px gradient.
My question is, will this automatically be taken care of when making the app retina ready or will I need to detect a retina display and adjust my code to paint the gradient 80px high?
Are you drawing this gradient directly into the canvas? If so, it should be automatically retina.
If, however, you’re drawing it into a picture first, then you need to create the picture at 2x and scale it down 50% when calling drawPicture. On non-retina screens it will look normal and on retina screens it will display all the pixels at retina resolution.
The only thing I could add to what Marc says, is that the Gradient lines might be more obvious on Retina as 1 unit will take up two pixels in height.
Given this, I would recommend using a CGGradient for drawing the gradient, I can explain how, but it might take me a little while to get around to doing it properly. In the mean time, if you’re using MacOSLib, you should find it in there.
Otherwise it if you’re drawing directly to the canvas, it should be fine.
Thanks for the info guys. I am drawing directly to the canvas, so I guess the gradient will look a little choppy as each line will be two pixels. Sounds like CGGradient is the way to go, I’ll look into MacOSLib.
Hello. I’m wondering how to change dinamically App icons for retina support …
There is nay how to ?
OSX app icons can be changed at design time only ?
THank you for your help.
Look at Sam Rowland’s product called RetinaKit2. Sam does all of the framework hard work for you while we just use his functions/methods to easily add retina capability to our Xojo apps.
It is interesting the Appwrapper too…
It is possible to have both in a boundle ?
We are going into Store with our first App and we have to evaluates carefully the costs
Anyway I need to know if App icons can be changed dinamically…any feedback on this ?
Thank you
I use Appwrapper also and that is a compiled OS X application that we use to package up and sign our OSX apps for the MAS. ITs not a code project, but a tool to use for our Xojo compiled apps that we create.
RetinaKit2 is a Xojo “project” that you copy into your projects. Sam has published methods/functions/properties to easily use this project. Here is an example on how I call a Retina enabled graphic from a paint event:
Dim WholeLogo355w_retina as HIDPIPicture = HIDPIPicture.imageNamed( "AristaFullTitleLogoInverted260x96" )
g.DrawPicture (WholeLogo355w_retina,0,0,WholeLogo355w_retina.width,WholeLogo355w_retina.height)
I just had to make sure that I had the 1x and 2x images named appropriately.
(1x) AristaFullTitleLogoInverted260x96.png
(2x) AristaFullTitleLogoInverted260x96@2x.png
Then the final piece is to modify your info.plist file after you compile your app w/ The Xojo IDE. You have to add the following Key and value to allow the OS X framework to know your app is retina capable. (BTW Appwrapper will do this automatically for you if you choose).
