Scaling up the details

In the previous post, I covered the update to the graphics layer. Updating the graphics library means we can now draw stacks at any scale, which allows us to add a whole slew of new and useful features. One of which is the ability to transparently support high-density displays.

Hi-DPI support

The introduction of the Retina display to iPhone/iPad created something of a problem for apps developed for the previous generation of devices. Apps created at the fixed size of these devices suddenly had four times the number of pixels to fit into (2x width and 2x height), and although they could still display at the same size, on the higher density displays it was apparent that they were not taking advantage of the available high resolution. The reason being that the apps were drawing at the old size, and then being scaled up – giving a stretched, pixelated appearance.

Rather than create a smaller image and scale it up, in order to draw cleanly and crisp on higher density displays you need to create an image with the same number of pixels as the display. This is a problem when your app is 320 x 480 in size, and the area into which you need to draw is now 640 x 960. Without scaled drawing support in the engine you would need to manually adjust everything on the stack to appear twice as big – from the size & position of each control, to the line width of any graphics, to the font size of any text appearing in the app.

To overcome these issues we could now use the new graphics library features to implement scaled drawing within the LiveCode engine. This automatic scaling is now included as of LiveCode 6.6 and is enabled by setting the "usePixelScaling" property. On mobile devices the degree of scaling can also be controlled by changing the "pixelScale" property.

The pixelScale controls the relationship between the logical size of the screen and the number of physical pixels in the display. This is quite straightforward on mobile devices, where there is only a single display. The old pre-Retina Apple devices have a 1:1 ratio of logical coordinates to pixels, retina devices have a 1:2 ratio. For a 320×480 stack to appear at the same size on both devices it should have a pixelScale of 1 on the non-Retina device, and a pixelScale of 2 on the Retina device. This happens automatically in the LiveCode engine – the pixelScale is set on startup to the appropriate value for the density of the display.

Getting it all to work

Implementing this within the engine was pretty challenging. If everything can be scaled, then there is no longer necessarily a 1:1 relationship between the size and location of objects on the stack, and their position on the screen as understood by the operating system. Unfortunately this was an assumption made in many different areas, such as the size and location of windows, to the position of mouse movements and clicks, to the apparent size of the screen itself. The situation is further complicated by the fact that some platforms expect coordinates in terms of screen pixels (Windows, Android), and others in terms of logical screen coordinates distinct from physical pixel sizes (iOS, OSX) so we end up having to think in terms of three separate coordinate systems: logical sizes within the engine, physical pixels, and logical (or not) coordinates used by the OS.

All this means that where code could previously use the same coordinates when referring to objects on a stack, or the position of the mouse cursor within a window, now that code had to be adapted to translate back & forth from one coordinate system to another. This was made somewhat easier by the progress of ongoing refactoring work to separate out window-related functionality from the tangle of stack code that made no distinction between a stack and the window that contains it. Now it was possible to define a scale factor between one and the other, and convert coordinates at the point of passing through from one to the other.

I think this really highlights the value of the work we’ve done to split apart the engine code into clearly defined areas based on a consistent and logical identification of distinct concepts that helps collect related code together and removes the implementation details from areas that are not directly related.

LiveCode 6.6.1 is now available. This is a stable release.

Getting this release
To upgrade to this release please select "check for updates" from the help menu in LiveCode or download the installers directly at: http://downloads.livecode.com/livecode/