Corona SDK: Creating a Scrolling Background

The Corona SDK makes game development for the iPhone, iPad, and Android easy. Corona uses the Lua programming language to create cross-platform apps. In this tutorial we will explore how to create a scrolling background with the Corona SDK.

Brief Overview

The Corona SDK makes it very easy to create dynamic effects with very few lines of code. Using the Corona SDK, we will create a scrolling 2D background with graphics that we create in Photoshop. This tutorial will not cover designing for a particular device. Instead, the scrolling background we create can be used for the iPhone, iPad, or Android platforms.

Create the Graphics

Using Photoshop, we are going to use the Custom Shape Tool to create stars for our background. While you can theoretically use any shape for the background this tutorial will demonstrate how to create a “starry night” background.

With Photoshop open, create a new document that is 45×45 pixels.

Select the Custom Shape Tool and select the 5 Point Star as your custom shape. If you cannot find the 5 Point Star, you may have to append the list with the Shapes list.

After you have selected the 5 Point Star, make sure your foreground color is white and draw a star on a new layer.

Exporting the Graphics

Now that we have drawn a star, use the Save for Web & Devices tool to save the star in 3 different sizes:

Star1.png 45×45 pixels
Star2.png 30×30 pixels
Star3.png 15×15 pixels

Code

With our graphics, we can start creating the scrolling background. Let’s get started by opening your preferred Lua editor and create a new document called main.lua.

Hide the Status Bar

Our first step is to hide the status bar. The status bar is a bar at the top of the screen that gives information to the user such as signal strength or battery level.

display.setStatusBar( display.HiddenStatusBar );

Variables

We will now set up some variables to be used throughout our program.

_W = display.contentWidth; --Returns Screen Width
_H = display.contentHeight; --Returns Screen Height
local starTable = {} -- Set up star table

Set Up Star Table

After we have initialized some global variables, we are going to insert star objects into the starTable. In this table, we identify the image path of the stars and the movement speed of each star. Then we insert the star into starTable.

Movement Speed is calculated in milliseconds and will determine how fast it will take the star to move from the bottom of the screen to the top of the screen. The bigger stars will move slightly faster than the smaller stars to give the illusion of depth to the background.

function initStar()
	local star1 = {}
	star1.imgpath = "star1.png"; --Set Image Path for Star
	star1.movementSpeed = 10000; --Determines the movement speed of star in milliseconds
	table.insert(starTable, star1); --Insert Star into starTable
	local star2 = {}
	star2.imgpath = "star2.png";
	star2.movementSpeed = 12000;
	table.insert(starTable, star2);
	local star3 = {}
	star3.imgpath = "star3.png";
	star3.movementSpeed = 14000;
	table.insert(starTable, star3);
end

Moving the Stars

The getRandomStar function returns a random star object from the starTable. Once the function gets the star, we set the image path, the name of the star and how fast the star will move. Here is what the complete function looks like.

	function getRandomStar()
	local temp = starTable[math.random(1, #starTable)]
	local randomStar = display.newImage(temp.imgpath)
	physics.addBody(randomStar, { isSensor = true } )
	randomStar.myName = "star"
	randomStar.movementSpeed = temp.movementSpeed;
randomStar.x = math.random(0,_W)
	randomStar.y = _H + 50
	randomStar.rotation = math.random(0,360)
	starMove = transition.to(randomStar, {
		time=randomStar.movementSpeed,
		y=-45,
		onComplete = function(self) self.parent:remove(self); self = nil; end
		})
end

Getting a Random Star

The first line gets a random star from the starTable and stores it in the local variable randomStar.

local temp = starTable[math.random(1, #starTable)]

Star Image Path

After we retrieve a random star, we will set the image path of the star.

local randomStar = display.newImage(temp.imgpath)

Star Name and Speed

Now, we will set the name of the star object to “star” and the movement speed will be set according to the speed of the random star that we pulled from the starTable.

randomStar.myName = "star"
randomStar.movementSpeed = temp.movementSpeed; -- in milliseconds

Star Starting Point

The starting point of the star is going to be a random X position on the bottom of the screen. The star will also start off the screen for a smoother transition into the visible area of the screen. We also randomly rotate each star to add variance to the background.

randomStar.x = math.random(0,_W)
randomStar.y = _H + 50
randomStar.rotation = math.random(0,360)

Moving the Star

After the star has been set up, we can use the transition.to() method to move the star towards the top of the screen. The star object will then be removed from memory when it has reached its destination point.

starMove = transition.to(randomStar, {
		time=randomStar.movementSpeed,
		y=-45,
		onComplete = function(self) self.parent:remove(self); self = nil; end
		})

Starting the Timers

This function sets up three timers that will call on the getRandomStar function to generate the star object and start the star moving towards the top of the screen.

The first parameter in timer.performWithDelay is the delay, which determines how many times the timer will be called. The second parameter is the function that will be called and the last parameter is the number of times the timer will be called. A value of “0” tells the timer to loop forever.

function startGame()
	starTimer1 = timer.performWithDelay(1700,getRandomStar, 0)
	starTimer2 = timer.performWithDelay(2300,getRandomStar, 0)
	starTimer3 = timer.performWithDelay(2700,getRandomStar, 0)
end

Start the App

Finally, we can run our app. The following code calls the functions that we have created throughout the tutorial to start the creating the stars, moving them towards the top of the screen and removing them when they have reached the sensor bar.

	initStar()
startGame()

Conclusion

You can use a 2D scrolling background in a variety of games and utilizing a scrolling background is an easy way to make games more dynamic. Try swapping out the stars for clouds, leaves, or anything else that you can think of!

Thank you for reading!