Supporting high-resolution devices

[nower]

I understand that now you can have different images for different screen densities and LC can choose them if named correctly and referenced in a certain way.

What should be the attributes of the images for the different resolutions/densities? For example, do I just create the same image with four times the pixels for Retina devices? (double horizontal and double vertical?) What image attributes are important for this, just the pixels or anything else, too? Does the image type matter? png vs jpg vs xxx ?

And if I don't want to use the naming and file structure conventions that LC needs for making these choices, how could I implement this functionality myself?
Which properties of which objects do I query for what? Anything in particular to consider? Is there a good sample stack demonstrating this?

As always, thanks for any insights.

Werner

[LCNeil]

Hi Werner,

A great explanation on how to use density mapped images can be found in the LiveCode 6.5. release noter-

http://downloads.livecode.com/livecode/ ... -6_5_0.pdf

A brief example of density mapped background image going from a standard resolution to a retina resolution iPad would be-

images/background.png - This image is 1024x768 pixels

images/background@extra-high.png - This image is 2048x1536 pixel

Image type matters when it comes down to things like transparency. JPGs do not keep transparent data where as PNGS do. This is something that you would likley need to take into consideration. There are also GIFS that allow for simple animations. A brief overview of each of these can be found here-

http://www.webopedia.com/DidYouKnow/Int ... IF_PNG.asp

If you want to implement the above functionality yourself, then you would have to return the default pixelScale of the device you are running (Via the systemPixelScale property) and then change the images appropriately via script. The property of any image object that you wish to change would be the fileName.

e.g.

Code: Select all

if the systemPixelScale is 1 then
<change all image controls fileNames to standard res images>
else if the systemPixelScale is 2 then
<change all image controls filenames to 2x res images>
end if

Kind Regards,


Neil Roger
--
RunRev Support Team ~ http://www.runrev.com
——

[nower]

Thank you, Neil, that is helpful!