A pixel is an illuminated dot in an image or of a screen, whereas a point is a unit of measurement in print, generally, 1/72nd of an inch. If a screen has exactly 72 DPI, the two would be the same, and in the earlier days of Macintosh computers, this was pretty much the case. More modern Macs and PCs and most mobile devices are a lot more detailed than 72 DPI. With LiveCode 6.5, and its later versions, you can now make a stack that works in points, that will then fill the device screen by taking the image of each card and by applying a scaling factor to it.

While doing such scaling, something must be assumed to be of natural size. For iOS, LiveCode uses non-Retina screens as a scale factor of 1X and Retina screens are a scale factor of 2X. iPhone 5 and 6 introduced more sizes. A scale factor of 3X is required for iPhone 6 Plus. With Android, things are more complicated as it has at least seven levels of scaling factor.

In fact, really, there are an infinite number of scaling factors going on behind the scenes. However, you generally don't have to worry about them because LiveCode automatically gives you the ability to show different versions of an image depending on the DPI of the device in question.

LiveCode will look at the file names of the included images (that have been added in the Copy Files part of the Standalone Application Settings dialog) and will load in the appropriately named version of the image. In the example shown here, two images have been added, icon.png and [email protected]. To make it easier to spot which one you are seeing, 512 and 1024 have been added to what would otherwise be two resolutions of the same icon:

This image is slightly magnified here to help you see that the 512 version of the image is lower resolution than the 1024 version.

The names used for iOS are:

The first one is considered as the 1X scaled version and the @2x name is considered as the 2X scaled version and the same goes for the @3x version.

The names and scaling factors used for Android are more varied:

In actual practice, you may find that you only need two or three versions of an image to make an image look good enough on a wide range of DPI devices.

The general syntax, by the way, is to type this in your stack script:

on preopenstack
  set the fullscreenmode of the current stack to "showAll"
end preopenstack

The quotes are required for the four active modes. The empty mode does not need quotes.

If fullscreenmode is empty, the card area is changed to match the device screen. That is, the top left card is in the top-left corner of the device screen and the card width and height match the actual pixel width and height of the device. Well, except if you have taken advantage of the multiple density support discussed earlier! Essentially, empty is the existing behavior in the earlier versions of LiveCode.

This mode arrived slightly later than the other modes and is present in LiveCode 6.6 and its later versions. With showAll, as the fullscreenmode, the card's contents will be scaled, so that all of it is within the device's screen. For devices that have a different aspect ratio than your card, elements that were outside of the card area are revealed. Suppose you create a graphical book app where you want the full height of the card to exactly fill the height of the device screen, but you don't want black bars down the sides on a wider device, then you could extend the background pattern beyond the left- and right-hand side of the card area. On a narrower device, such as iPad, you would see the 4:3 area of the card. On a wider device, say iPhone 5, the extra background would be revealed. The following illustration shows which area of the background image will be seen on different devices:

The letterbox mode is identical to showAll except that the areas beyond the card area are hidden and leave you with the typical movie letterbox effect, hence the name!

The noBorder mode is very useful, but takes some time to get used to. Let's say you are making a graphical adventure game, along the lines of Myst, and you want to use the same graphics for all devices. You could create a scene that has an aspect ratio of 14:9 and make sure that the important content is not too close to the edges. When the scene is viewed in the noBorder mode on an iPad, you would see the full height of the scene and most of the width. When viewed on iPhone 5, you would see the full width of the scene and most of the height. As the name suggests, the card area would be scaled, so that there are no borders, as there would be in the letterbox mode. The following illustration shows which areas of an original 14:9 photograph would be visible for a 4:3 iPad and a 16:9 iPhone:

As the name implies, exactFit would take the card's content and squish it to fill the device's screen. It's hard to think of a use case for this mode, but perhaps, if you perform some sort of artistic visualizer, the squishing wouldn't matter much!