Images and Retina


I have PNGs which are intended to be shown full screen on an iPad. The images are 2048 x 1536. The issue I’m encountering is: if I load the PNG into an Image, assign it unchanged to a ImageComponent that is the size of the screen, and then attempt to animate the component, the animation is horrendously choppy. If I scale the image down to 1024 x 768 before assigning it to the ImageComponent, the animation is much, much smoother. I assume this means the cost of scaling the image down is what is making the animation sluggish, which makes sense for non-Retina iPads, but the issue is also being reported on iPads with Retina displays.

So, I guess my first question is, am I even getting any benefit from the double resolution images? Or are they being scaled down to 1024 x 768 and then back up? The images look OK on a Retina screen, but maybe there is some placebo effect in play?

Assuming it makes sense to use the double resolution images, how do I go about displaying and animating them smoothly?


The quad sized image will be being scaled down when you paint on non-retina. This bad will cause the choppy effect. On Retina, im wondering if the scaling winds up at not exactly 1/2. For example the image component dimensions are not exactly half X & Y, due to margins. For example are you really full screen.

ImageComponent is not retina aware. My suggestion is to write your own imagecomponent that accepts an image and figures out the UI scaling.

const Desktop::Displays::Display& dis = Desktop::getInstance().getDisplays().getMainDisplay(); _scale = (int)dis.scale;

If scaling is x2 (ie retina), scale down the image right there in `setImage’, otherwise keep it. Then in paint, do this:

// draw the image applying the display scale downscaling. // this downscale wont actually be performed but indicates to // iOS that it can use the image at pixel level int w = image.getWidth(); int h = image.getHeight(); g.drawImage(image, 0, 0, w/_scale, h/_scale, 0, 0, w, h, false);

This will always draw with a reduction of 2x on retina and none for non-retina. If this doesnt fit the screen, you’ll have to arrange for this in the size of the original image.



I'm having the same problem above and saw that you and others have discussed this numerous times. I've read the posts about slowness of CoreGraphics renderer when drawing an image, and while your post above would solve the scrolling of a full screen image on a non retina iPad, it would still be extremely slow on a retina device, to the extent of rendering the scrolling animation useless.

The other posts seem to suggest that up to this day the OpenGL renderer is still the better option to work around this. Would you agree? Do you have any other solution that would work with the default "CoreGraphicsRenderer"? If not, what is the easiest way to try rendering the whole thing using OpenGL? (I looked at the OpenGLContext class but didn't find an easy way to just swap renderers on the fly).

And finally, is there any offical response or plans from Jules to improve drawing performance on iOS?

Thanks in advance.