Getting my head around retina versus standard display

[pthirkell]

I am slowly coming to grips with MobGui and its various functions, with some really encouraging results. I'm still a bit stuck however understanding how retina versus 'standard' settings should work.

(1) Under 'design size and orientation' in the MobGui inspector I select 'iPhone' or 'iPhone retina.' The latter doubles the size of the stack so as to correspond with the larger resolution of the retina display (640 x 920 if allowing for status bar). When I create a button by dragging from the inspector it shows in proper resolution on screen as expected. So far so good! (See RetinaBtnsStack.jpg below).

When I build in the simulator however (or actually build and load onto my iPhone) - the resolution of the buttons is inadequate and appears badly pixelated. (See RetinaBtnsSimulator.jpg below). Is there a setting or command that I am still missing?

(2) When it comes to doing final build(s) for distribution via the app store, do we produce two separate app builds - one for retina and one for 'standard' resolution? If so then how does the app store know which version to download when customers purchase the app?

[MatPippel]

Hi,

1) the magic Line is

Code: Select all

     iphoneUseDeviceResolution true 

or

Code: Select all

     iphoneUseDeviceResolution true, true 

from the iOS Release Notes

To use the full resolution of such high-resolution devices, use the command: iphoneUseDeviceResolution usePixels, ( nativeControlsUsePixels )
If usePixels is true, LiveCode will ensure that co-ordinates and sizes specified in LiveCode objects are treated as being in pixels, rather than logical points. In particular, when changed, a resizeStack message will be sent notifying in the size change of the current main-stack, and functions and properties (such as the screenRect) will reflect co-ordinates in pixels.

If nativeControlsUsePixels is true and usePixels is true, any co-ordinates and sizes passed to the iOS native controls (i.e. those managed through the iphoneControl collection of handlers) will also use pixels rather than points. If not specified, or usePixels is false, native controls will assume co- ordinates and sizes are in points.
Note: The notion of pixel and logical point remains valid on older devices, its just that it is always 1-1 thus using this command will have no effect there.
The scale of the devices screen (relative to a non-Retina display) can be queried using iphoneDeviceScale(). This function will return 2 if the display is a Retina display, or 1 otherwise.

so try

Code: Select all

on openStack
     if iphoneDeviceScale() is "2"
     then
          iphoneUseDeviceResolution true, true
     end if
end openStack

in the stack script.

have fun

[pthirkell]

OK great thanks - works perfectly!

Just so I am clear ... I build all my (iPhone) apps assuming hi res retina display - and a 'non-retina' phone automatically displays everything at scaled-back standard resolution? Or do I have to store two sets of images and then select depending on retina versus non-retina? Sorry this is probably obvious to you ... but I would like to build for both retina and non-retina in the most efficient (and correct) manner.

[MatPippel]

Hi,

building for Retina is a good way to start and most of the things work. Images are scaled down and all MobGui Elements scale to, but field text sizes and positions you define absolute by e.g. pixel won't work.

In my short experience with MobGui and Livecode you need some kind of device handling in your app to make it work flawless.
Two Possibilites(of many more):

a stack for each resolution (Retina,Normal,iPad)
a main stack who starts the appropriate Stack

Some handlers (Selfmade, SetProp, GetProp) inside your stack,
which will handle all the elements thats need to get resized.

I am still looking for an efficient solution myself.

[Michael_A]

Hello,

Code: Select all

on openStack

   if the environment is mobile then 
        if iphoneDeviceScale() is "2" then
               iphoneUseDeviceResolution true , true
       end if
   end if
end openStack

This code worked great since I updated to 0.28, now if I use it the card (and all button ...) size is half it should be on a retina display
If I delete this part of code my card, the size is correct but all element are like the picture you post!!!

Does somebody has the same problem (live code 5.5.1, MobGui 0.28)