|
Modern mobile devices come in a variety of screen densities which is measured in the number of pixels that are packed into in an inch of the screen (PPI). The purpose of the higher density screen is to provide a crisper picture rather than more screen real estate. The iPad and iPad Retina are a good example of this. Apps look exactly the same on both devices, except on the iPad Retina, the app looks crisper and more pleasing for the user.
Most OSs now support multiple pixel densities, with there being a "natural density" and a notion of Hi-DPI.
For iOS, the screen is either retina or non-retina. The natural density is the non-retina resolutions. Retina screens are considered to be 2x the density of non-retina.
For Android, screens usually fall in to one of four density categories - low (0.75x), medium (1x), high (1.5x), extra-high (2x). Medium is considered to be the natural density. Some devices have a "TV" screen density, at 1.33x scale.
How LiveCode Solves this for you
In LiveCode 6.5 and above there are a number of features that are designed to help you support all these densities in your app.
- Density Scaling: You can now write your app at natural density and LiveCode will automatically scale everything up or down to meet the device density. For example, you can create an iPad app at the natural ipad density (1024x768) and LiveCode will do all the work to scale your app for the retina device. This feature is enabled by default.
- Density Mapped Images: LiveCode can scale most controls perfectly, such as graphics, text, players, buttons, scrollbar, etc. However, images have to be resampled whenever they are scaled up or down leading to loss of quality, especially when upscaling. To ensure that the images look sharp and crisp not matter the device your app is on we recommend including images to suit the densities of the devices you are targeting. LiveCode will automatically choose the image that best suits the device your app is running on.
- DeviceResolution: For those who wish to access every pixel available on HI-DPI devices they can do so using the deviceResolution property.
This article is focused specifically on how to support multiple screen densities. If you are looking to scale your app to fit the target device then please visit the article here.
Density Scaling
Density scaling is enabled by default for all apps build with LiveCode 6.5 and above. Simple create a stack at the screen resolution of the natural density of your target device and it will run on the low and high density versions of the device automatically.
For example:
To create an iPad app, create a stack that is 1024x768. It will automatically be scaled to 2048x1536 when running on an iPad with a retina screen.
To create an iPhone app, create a stack that is 480x320. It will automatically be scaled to 960x640 when running on an iPhone with a retina screen.
to create an android app, create a stack at the natural density of the target device. It will automatically be scaled up to to the density of the screen of the device.
Density Mapped Images
LiveCode by default will seek high/low resolution version of images within your application. To take advantage of this feature you must:
- Used referenced images: LiveCode will only automatically seek high/low resolution versions of images for referenced images. By that we mean images whose filename property is pointing to a local image.
- Include multiple image files in the some location as the referenced image: LiveCode will search for low/high resolution images next to the referenced images.
- Name your images correctly: LiveCode will seek images based on their filename. The name convention is detailed below.
Image naming convention
- <image>@ultra-low.<ex> - 0.25x
- <image>@extra-low.<ext> - 0.5x
- <image>@low.<ext> - 0.75x
- <image>@medium.<ext> / <image>.<ext> - 1x
- <image>@high.<ext> - 1.5x
- <image>@extra-high.<ext> / <image>@2x - 2x
- <image>@ultra-high.<ext> - 4x
Example
Take for example a simple iPad application with a large background image. The structure of the app might look something like this:
app.livecode
images/background.png (1024x768)
image/background@extra-high.png (2048x1536)
The application would contain an image object with the filename set to "images/background.png". When run on a retina iPad, which has a screen density of 2, LiveCode would automatically substitute in the "@extra-high" version of the image, which is twice the density of the standard image.
Device Resolution
In the rare case that you wish to use all the pixels of the target device to layout your app, you can do by setting the 'useDeviceResolution' of the stack to true. This will override all the automatic scaling performed by LiveCode.
For example. With the default settings enable. LiveCode will report the screen size at it's natural device density, regardless of the actual device density. For example:
- An ipad will report the screen height to be 1024
- An ipad with retina screen will report the screen height to be 1024
However, if the 'useDeviceResolution' has been set to true for the same stack, the true pixel height of the stack will be reported:
- An ipad will report the screen height to be 1024
- An ipad with retina screen will report the screen height to be 2048
|
