LaunchScreen storyboard tutorial

Since Launch Images are now deprecated by Apple and because storyboard is much better, it’s recommended to use LaunchScreen storyboard instead of Launch Images on iOS.
I’ve prepared a small tutorial.

11 Likes

My game has been rejected, probably because the launch screen/launch image is white when opening the app.

I’m trying to include a Launch Screen storyboard to my game with Defold v1.2.174, but so far no luck. Are these settings ok?

bundle_resources = /bundle_resources/

[ios]
app_icon_120x120 = /assets/itunes_icons/juump_icon_defold_ios_120.png
app_icon_180x180 = /assets/itunes_icons/juump_icon_defold_ios_180.png
app_icon_76x76 = /assets/itunes_icons/juump_icon_defold_ios_76.png
app_icon_152x152 = /assets/itunes_icons/juump_icon_defold_ios_152.png
app_icon_57x57 = /assets/itunes_icons/juump_icon_defold_ios_57.png
app_icon_114x114 = /assets/itunes_icons/juump_icon_defold_ios_114.png
app_icon_72x72 = /assets/itunes_icons/juump_icon_defold_ios_72.png
app_icon_144x144 = /assets/itunes_icons/juump_icon_defold_ios_144.png
app_icon_167x167 = /assets/itunes_icons/juump_icon_defold_ios_167.png
launch_image_320x480 = /assets/itunes_launch_images/ios_launch_320x480.png
launch_image_640x960 = /assets/itunes_launch_images/ios_launch_640x960.png
launch_image_640x1136 = /assets/itunes_launch_images/ios_launch_640x1136.png
launch_image_750x1334 = /assets/itunes_launch_images/ios_launch_750x1334.png
launch_image_768x1024 = /assets/itunes_launch_images/ios_launch_768x1024.png
launch_image_1536x2048 = /assets/itunes_launch_images/ios_launch_1536x2048.png
launch_image_1024x768 = 
launch_image_1242x2208 = /assets/itunes_launch_images/ios_launch_1242x2208.png
launch_image_2048x2732 = /assets/itunes_launch_images/ios_launch_2048x2732.png
launch_image_2732x2048 = 
launch_image_1125x2436 = /assets/itunes_launch_images/ios_launch_1125x2436.png
launch_image_1668x2224 = /assets/itunes_launch_images/ios_launch_1668x2224.png
launch_image_2224x1668 = 
bundle_identifier = com.WinkelGames.Juump
icons_asset = /assets/itunes_icons/Assets.car
launch_screen = LaunchScreen

This is the storyboard when I test it from Xcode:

When the game starts the storyboard is white, not the green gradient.

Initially I tried to solve this with launch images, but they also appear white rather than the gradient, even though the images linked to are correct.

Update: Watching the video again a few times highlighted the thing I had missed; I had assumed the assets were included in the .storyboardc file. They need to be included manually. Solved!

3 Likes

Defold now has built-in support for LaunchScreen storyboard, probably it’s easier.

1 Like

I believe it’s this built in support I’m using? Or can the above be simplified in some way?

In 1.2.171 we updated the workflow for the story boards.
Set the ios.launch_screen property:

1 Like

I am setting the launch screen already. Is the change that the file now doesn’t need to be in Bundle Resources? If so, where should the extra content, like images, be stored?

Correct, it’s a single file afaik, with the assets compiled into the storyboardc.

May I ask, how long does the story board actually show for you?
In my experience with Defold, the launch screen time itself is very short, and showing anything other than a color screen, might be perceived as “flicker”.

This is what I thought! But when I included only the file, without the image in bundle resources, the storyboard showed as white.

It shows for maybe a second, or slightly less.

A second sounds like a lot.
Is that even with an empty project?
What type of device is it?

It shows very briefly when the app starts. Probably around 0.2 second or so. I haven’t tested this isolated yet as we’re battling to get the Apple submission through quickly. Ideally I’d just use an image, rather than a storyboard, but for some reason that doesn’t work.

if the empty app takes <0.2s, and your app takes ~1s, I wonder where the 0.8s are spent. How large is the executable and/or package?
What’s loading first in the game? A quick loading screen, or the full game?

I have only tested it in game. It takes around 0.2 seconds, not nearly 1 second that I incorrectly guessed before. It has effectively replaced the short white screen that was there before, which (I hope) is that Apple was upset about. So fingers crossed, all is well.

1 Like

Ok.

Yeah, showing info (i.e. logo or a text) for such a small amount of time is something that’s usually frowned upon (and also caused rejection on earlier consoles, not sure about nowadays)

Before this space was only taken up with a blank white screen, which Apple didn’t seem to like. Now it’s a nice gradient, maybe that will be celebrated with joy in the Apple headquarters? This is mine field.

2 Likes

Just to clarify; no assets are bundled with the .storyboardc file. They have to be separately added with Bundle Resources.

In the case of the Assets.car only the 1024x1024 icon is bundled, the other icons have to be linked to with the “App icon” fields in the game.project.

2 Likes

Weird. I though the whole purpose of the storyboard and assets.car was to get rid of the single icons

1 Like

I faced with a black screen flashing between the launchscreen and the clear_color of the render script. What could be wrong?

Render script:

function init(self)
  ...
  self.background_color = vmath.vector4()
  self.background_color.x = sys.get_config('render.clear_color_red', 0)
  self.background_color.y = sys.get_config('render.clear_color_green', 0)
  self.background_color.z = sys.get_config('render.clear_color_blue', 0)
  self.background_color.w = sys.get_config('render.clear_color_alpha', 0)
  ...
end

function update(self)
  render.set_depth_mask(true)
  render.set_stencil_mask(0xff)
  render.clear({
    [render.BUFFER_COLOR_BIT] = self.background_color,
    [render.BUFFER_DEPTH_BIT] = 1,
    [render.BUFFER_STENCIL_BIT] = 0
  })
  ...
end

Game project:

...
[render]
clear_color_red = 0.973
clear_color_green = 0.969
clear_color_blue = 0.953
clear_color_alpha = 1.0
...

Storyboard:
LaunchScreen.zip (3.8 KB)