Corona SDK and other Game Development Tutorials
@gamebuilding

Create a Scrolling Background – Going Down!

This post is an expansion on my previous post – Create a Scrolling Background Going Up! In the previous post, I walked you through creating a scrolling background that goes up and in today’s post, you’ll learn how to make the scrolling background move down. There are very few changes to get this to work.

  1. Instead of subtracting the scroll speed, we will add it.
  2. We changed the if-then statement to > 1040
  3. We changed the translate location to -960.

Here’s the code to get a vertical scrolling background with Corona SDK.

Since we have a vertically scrolling background, I’ve changed the default and supported orientation to portrait instead of landscape.

Build.settings

settings =
{
orientation =
{
default = "portrait",

supported =
{
"portrait",
},

},
}

Everything in config.lua stays the same.

Config.lua

-- config.lua
application =
{
content =
{
width = 320,
height = 480,
scale = "zoomEven",
},
}

In main.lua, I’ve made a few more changes. Each image object is now 320 pixels wide and 480 pixels tall. This is so each background fills the entire screen. Then, I set the starting point for bg1 on the screen, bg2 480 pixels below bg1, and bg3 480 pixels below bg2. This is more of a primer to our scrolling background effect. Finally, I changed the if-then statements to listen for the y property of the backgrounds. When the background gets to 0, I move them off screen so the backgrounds never stop scrolling.

main.lua

--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

-- Add First Background
local bg1 = display.newImageRect("images/bg1.png", 320, 480)
bg1:setReferencePoint(display.CenterLeftReferencePoint)
bg1.x = 0; bg1.y = _H/2;

-- Add Second Background
local bg2 = display.newImageRect("images/bg1.png", 320, 480)
bg2:setReferencePoint(display.CenterLeftReferencePoint)
bg2.x = 0; bg2.y = bg1.y+480;

-- Add Third Background
local bg3 = display.newImageRect("images/bg1.png", 320, 480)
bg3:setReferencePoint(display.CenterLeftReferencePoint)
bg3.x = 0; bg3.y = bg2.y+480;

local function move(event)

-- move backgrounds to the left by scrollSpeed, default is 8
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

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

The only thing you’ll need to make this work is a background graphic that’s 320 by 480.

Again, this post was to just show the changes from the horizontal scrolling background to the vertical scrolling background. If you would like to see more Corona SDK tutorials, please leave a comment below!

2 Comments
  1. it is not working mine says ‘then’ expected near ‘&’ i think its the gt but when i remove it it still now working new to corona btw

    • Hello! Instead of &gt it’s supposed to be the greater than sign. The code display that I have right now isn’t working the I want it to!

Leave a Reply to spoggles Cancel reply