SpriteKit Project — AbsolutelyBrickingIt — Part 2: Set up a launch screen

atomicswiftdev
App Dev Pro Tips
Published in
3 min readAug 11, 2024

In this article, we’re going to set up the launch screen for the project.

Adding image assets to the project

From the Project navigator (on the left side of Xcode, press ⌘0 if not visible), select Assets:

Select Assets in Project navigator

Using Finder, select the launch screen images and drag them onto the list of assets:

Add images to Assets

The added images are now visible as an Image Set in Assets:

Images visible in Assets list

Adding the image to the launch screen

Select LaunchScreen in the Project navigator (⌘0):

Select LaunchScreen in Project Navigator

Open the Object Library (⇧⌘L) and select Image View:

Select Image View from the Object Library

Drag and drop Image View from the Object Library onto the ViewController in LaunchScreen:

Drag and drop Image View onto the ViewController

Hold Ctrl () and drag from Image View to View:

Ctrl drag from Image View to View

Select the follow constraints:

  • Leading Space to Safe Area
  • Top Space to Safe Area
  • Trailing Space to Safe Area
  • Bottom Space to Safe Area
Select Space constraints to Safe Area

Select the first constraint in the hierarchy:

Select first constraint

In the Size Inspector on the right side of Xcode (⌥⌘6), change Safe Area to Superview in one of the item drop downs:

Change from Safe Area to Superview

Set the Constant to 0:

Set Constant to 0

Repeat the above steps to pin each anchor to the corresponding Superview anchor:

Repeat for all Image View constraints

Select Image View in the hierarchy:

Select the Image View

Open the Attributes Inspector (⌥⌘5):

Open Attributes Inspector

Set the image to the name of the Image Set from Assets (in this case screen.launch):

Set image to screen.launch

Running the project in a simulator

Click the play button in the toolbar to run the project:

Run project

The new launch screen is now visible as the app is starting up:

Launch screen shown in Simulator

We’ve successfully added an image to the Launch screen that displays as the app is starting up.

Code

This article corresponds to the merge commit Add Launch screen (#2) in the GitHub repository AbsolutelyBrickingIt

Next Part

Part 3: Set the app icon

--

--

App Dev Pro Tips
App Dev Pro Tips

Published in App Dev Pro Tips

Welcome to the App Dev Pro Tips community! We’re a cross-platform collaboration dedicated to sharing the best practices, troubleshooting guides, and code snippets to help you master the art of mobile app creation.