Corona SDK: Create the Game Splash Screen

In this post I show you how you can add a splash screen to your Corona SDK project. A splash screen is a screen which is displayed when the user starts the game, often you mention or display your brand or the name of your development studio. As I’m creating a game during my travels in Asia I decided to make a splash screen which displays my website logo of Code and Travel.

If you are looking to increase your knowledge on Corona/ Lua development, I can highly recommend this resource, it was ground breaking for me personally to learn the Corona Framework.

Open your main.lua. Up till now we only added some global variables in our main.lua and used the storyboard API of Corona SDK to move the screen directly to the menu.lua screen (home screen of the game).

If you are looking to increase your knowledge on Corona/ Lua development, I can highly recommend this resource, it was ground breaking for me personally to learn the Corona Framework.

So without the splash screen:

-- Rolly Bear World Project by Christian Peeters
-- See all tutorial @christian.peeters.com

-- easy to use variables for screen-positions
centerX = display.contentWidth / 2
centerY = display.contentHeight / 2
withScrn = display.contentWidth
heightScrn = display.contentHeight
topScrn = display.screenOriginY
leftScrn = display.screenOriginX


        backgroundfill = display.newRect(leftScrn, topScrn, withScrn, heightScrn)
	gradient = graphics.newGradient(
 	{ 80, 211, 255 },
  	{80, 100, 180 },
  	"up" )
  	backgroundfill:setFillColor(gradient)


local storyboard = require ("storyboard")
storyboard.purgeOnSceneChange = true

storyboard.gotoScene ( "menu", { effect = "zoomOutIn"} )

Line 5 to 10 are the variable definitions.
Line 12 to 17 is the global setting of the background color (blue with a gradient).
Line 22 is the storyboard call to move to the menu screen.

Now to create the splash screen we have to take into account the following:
- We don’t want the same background color as the rest of the game (I decided to make the background white).
- We want to add an image to the screen displaying our brand.
- We want the splash screen to automatically move after 2 seconds to the game menu.

So the new main.lua with the splash screen:

-- Rolly Bear World Project by Christian Peeters
-- See all tutorial @christian.peeters.com

-- easy to use variables for screen-positions
centerX = display.contentWidth / 2
centerY = display.contentHeight / 2
withScrn = display.contentWidth
heightScrn = display.contentHeight
topScrn = display.screenOriginY
leftScrn = display.screenOriginX
-- defintion of the background
backgroundfill = display.newRect(leftScrn, topScrn, withScrn, heightScrn)
-- only the splash screen has a white background
backgroundfill:setFillColor(255,255,255)


local storyboard = require ("storyboard")
storyboard.purgeOnSceneChange = true

local splash = display.newImage ("images/splashimage.png")
splash.x = centerX
splash.y = centerY

local function endSplash ()

	splash:removeSelf()
	splash = nil

	-- set default background color for the game
	gradient = graphics.newGradient(
 	{ 80, 211, 255 },
  	{80, 100, 180 },
  	"up" )
  	backgroundfill:setFillColor(gradient)
	storyboard.gotoScene ( "menu", { effect = "zoomOutIn"} )
end 

timer.performWithDelay(2000, endSplash)

In line 14 we set the background to white (255, 255, 255 –> RGB code).

In line 19 – 21 we load our splash screen image and center it on the screen.

In line 37 we create a timer.performWithDelay which call the function endSplash.

In the endSplash function we properly remove the image of the device memory by calling removeSelf and setting the object to nil. Next we create a new background color which will be used through the rest of the game (a blue gradient) and finally we use the storyboard API to move the splash screen to the game menu screen (menu.lua).

This is all, it is quite simple but it make your game look a bit more professional :).

If you are looking to increase your knowledge on Corona/ Lua development, I can highly recommend this resource, it was ground breaking for me personally to learn the Corona Framework.