Create a Scrolling Background – Going Up!

bg1

I was recently asked to expand on my scrolling background tutorial to change the direction from left and right to down to up. Well, here it is!

In today’s post, we are going to learn how to make a vertically scrolling background with Corona SDK. The background will scroll from the bottom of the screen to the top of the screen. The code to make this change isn’t much, so I’ll just point out the differences from my other post at Creating a Horizontal Scrolling Background in 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",
},
}

Want to know when more tutorials and That’s So Panda news comes out?
Sign up for our mailing list to find out the latest news. Don’t worry, I hate spam as much as you do.


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) < 0 then
bg1:translate( 0, 480*3 )
end
if (bg2.y + bg2.contentWidth) < 0 then
bg2:translate( 0, 480*3 )
end
if (bg3.y + bg3.contentWidth) < 0 then
bg3:translate( 0, 480*3 )
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 tutorials, please leave a comment below!


16 Comments
  1. this code doesn’t work for continuous vertical scrolling as the post says. after translating two background it doesn’t load background properly. it is translating them to left… plz update the working code

    • Hello Vipin!

      I’ve tested the code in the latest public build and the code works. However, it looks like WordPress converted < to < and if you copied and pasted, your background probably didn't work. I've updated the code in the example and everything is working now. Thank you for letting me know.

  2. This is helpful for me, thank you!

  3. Hello,
    The code works fine…thanks a lot
    but now if i want to add another image…is goes in background of the cloud and hence not visible..
    how to make it visible
    THANKS

    • Hello Sam, are you adding a fourth image to the game? If you are, where are you adding it? It’s hard to troubleshoot without looking at the code.

      • Hello,
        Actually i want to add a 4th small character image above the scrolling cloud screen but it goes in the back of cloud image.
        I have to set alpha level of cloud to 0 and have to make it transparent to see my 4th image.

  4. Hey thanks….solved the prob..
    Ur tutorials are cool..
    thanks again

  5. Hello,
    Thanks for this tutorial.

    I have another object, which is set to jump 20px, i want the scroler to be synchronized with my object, if object stays in middle than bg should stop if its moving upwards than bg should move up.
    can you do a tutorial on it?
    and please dont forget to email me.
    thanks for this great tutorial.

  6. Thats a great tutorial!

    But what do i have to do if i want my background scroll from up to down?

  7. on line 36 wouldnt you want to get bg1.contentHeight instead of bg1.contentWidth. just seems like content height would be what you wanted to detect end of image if it was scrolling vertically

  8. How will we change it to “top to bottom” ?
    So it appears as though our character is floating upwards.

    Is it just changing the x and y in the code?

    Please email me or just comment back if you have time. Thank you!!

    • I am trying to create moving platforms onto which a player can jump (similar to jumpy egg). Could you please let me know how this can be done.
      – moving up from down to up
      – platforms getting generated
      – player should land on platform and move with it

      Waiting eagerly for your reply

  9. I absolutely love your tutorial! I am learning game development using your tutorial, it is crisp clear, simple and you have a natural talent to provide instruction to students. Please continue to make tutorials, I will certainly join your udemy course after I am done with the basics! Please respond when you do have time.
    Thanks.

Leave a Reply