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 ) end if (bg2.y + bg2.contentWidth) > 1040 then bg2:translate( 0, -960 ) end if (bg3.y + bg3.contentWidth) > 1040 then bg3:translate( 0, -960 ) end end
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!