Create an Endless Scrolling Background with Corona SDK

In this game development tutorial using Corona SDK, we will cover how to create an endless scrolling background. I used a simple blue background with clouds for this lesson and you can download the graphic here.

In this lesson, we will create 3 background graphics, create a function to move the graphics, and add a runtime event listener to run our function. The clouds will be moving downwards and this is perfect for commonly seen space shooter games where the player is at the bottom of the screen.

To get started, we’ll hide our status bar and create a couple of variables. These variables will hold the screen width/height and the scroll speed. Feel free to increase/decrease the scroll speed to make the background move faster.

--Hide status bar from the beginning
 display.setStatusBar( display.HiddenStatusBar )

-- Set Variables
 _W = display.contentWidth; -- Get the width of the screen
 _H = display.contentHeight; -- Get the height of the screen
 scrollSpeed = 2; -- Set Scroll Speed of background
 Then, we’ll add in our background graphics. The first background gets added on the center of the screen and it is sized at 320×480. The config.lua file I’m using for this lesson has the width/height set to 320/480 respectively. The second background gets added directly below the first background and the third background is placed below the second. This sets up the graphics to be one long line of clouds.

-- Add First Background
 local bg1 = display.newImageRect("background-with-clouds.png", 320, 480)
 bg1.x = _W*0.5; bg1.y = _H/2;

-- Add Second Background
 local bg2 = display.newImageRect("background-with-clouds.png", 320, 480)
 bg2.x = _W*0.5; bg2.y = bg1.y+480;

-- Add Third Background
 local bg3 = display.newImageRect("background-with-clouds.png", 320, 480)
 bg3.x = _W*0.5; bg3.y = bg2.y+480;

Next, we need to create a function that will move the backgrounds down and reset the location of the backgrounds. I’ve added in some comments in the code below to make the function easier to read. However, the first part moves each background along the y-axis and the speed is controlled by the variable scrollSpeed. The second part listens for the positions of each background. When the background hits a certain y position, the background is moved to the top of the screen.

local function move(event)
 -- move backgrounds to the left by scrollSpeed, default is 2
 bg1.y = bg1.y + scrollSpeed
 bg2.y = bg2.y + scrollSpeed
 bg3.y = bg3.y + scrollSpeed

 -- Set up listeners so when backgrounds hits a certain point off the screen,
 -- move the background to the right off screen
 if (bg1.y + bg1.contentWidth) > 1040 then
  bg1:translate( 0, -960 )
 if (bg2.y + bg2.contentWidth) > 1040 then
  bg2:translate( 0, -960 )
 if (bg3.y + bg3.contentWidth) > 1040 then
  bg3:translate( 0, -960 )

Finally, we’ll add an event listener to run the function we created. This listener will run every frame of our game and if you have your game set to 30fps, that means this background will run 30 times a second.

-- Create a runtime event to move backgrounds
 Runtime:addEventListener( "enterFrame", move )

This approach is only one of many approaches to create scrolling backgrounds. I know there are more creative ways to animate backgrounds and if you have ideas, leave them in the comments below! Thanks for reading!

Leave a Reply

Your email address will not be published. Required fields are marked *