If you are new to iOS development, you might not be familiar with iOS splash (launch) screens.

A launch screen appears instantly when your app starts up and is quickly replaced with the app's first screen, giving the impression that your app is fast and responsive. The launch screen isn’t an opportunity for artistic expression. It’s solely intended to enhance the perception of your app as quick to launch and immediately ready for use. Every app must supply a launch screen.

(https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/)

Up until LiveCode 9.6 DP-4, you could use static images (.png) of very specific dimensions, one for each iOS device. This image was shown when the app was launched in each device. This was causing headaches every time Apple released a new iOS device, since LiveCode should add support for adding a splash image for the specific device, and the developer had to create a new splash image of specific dimensions to add to the standalone builder. The list of possible devices grew bigger and bigger (20 entries at the time of release of LiveCode 9.6 DP-4).

Another disadvantage was that all these static images were copied into the standalone app bundle, increasing its size.

As of LiveCode 9.6.0 RC-1, you can add storyboard launch images, instead of static launch images.

A storyboard is a mechanism that allows you to add up to 3 splash images, then specify a background color which will be combined with the splash image(s), and the resulting image will be centered to the device screen automatically.

Moreover, you can use a different set of images for dark mode, or use the same images but set the background color to the device appearance automatically (i.e. white if the device is set to light mode, and black if the device is set to dark mode).

The first question that will arise is, what should be the exact size of these 3 images?

Well, there is no correct answer.

It is no longer possible to have an exact (pixel) matching of the splash screen and the first card of the stack as it appears on the device

So the best suggestion now is to use a splash image that has just a logo at the center and it is transparent, and also to set the background of the splash in the standalone settings.

In that way, in all devices (ipads/iphones) you will get a centered logo with the background you set in the standalone settings (or you can choose to not set the background - in this case the default background color will be used depending on the device appearance: white if the device is on light mode and black if the device is on dark mode)

Of course, if you do not wish to have a splash that shows just a logo, you can choose a regular image (or 3 regular images, one for each 1x,2x,3x slots) and also set the background color to match the image background color. In this case, depending of the device, the app will use the one of the three images that is closer to the device screen size, and will center this image to the screen.

This means that the image in some devices will either match exactly, or it will be larger (in this case it will be cropped and the edges will not show), or it will be smaller (in this case it will be centered at the device screen, and the left/top/right/bottom areas will show the background color that was set in the standalone settings.

One might still wonder, what size should the images be then? Well, it depends on the images (i.e. how much content they have at the center, and if you are OK if some of the content at the edges is cropped etc). A rule of thumb is the following:

-use a "small", a "medium" and a "large" image for each of the 1x, 2x and 3x slots, where "small" is the smallest image you used before the storyboard, "large" is the largest you used before, and "medium" is something in-between.

For example, you could try images with these dimensions:

- 375x667

- 621x1104 (x2)

- 1242x2208 (x3)

Again, the suggested size depends on the content of the image. In the following example, I have used a sample transparent logo, and chose to use the system background color. Here is how my splash screen looks in various devices, in both light and dark mode:

If you do not want to use the system background, you can choose an explicit background color, which will show in both light and dark mode. For example, you can choose a grey background: