Jul 162011
 

This tutorial explains how to use a scrolling background in your iPhone application.

This tutorial will let you add a scrolling background to your portrait app, which will scroll downward. (For and upward scrolling background, see last week’s tutorial.)

Take this code and paste it into your app;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
-------------------------------------------------------------------------
-- SCROLLING GAME BACKGROUND --
--------------------------------------------------------------------------

--First half of scrolling background
local bg1 = display.newImage("bg1.png")
bg1:setReferencePoint(display.CenterLeftReferencePoint)
bg1.x = 0
bg1.y = 0
localGroup:insert(bg1)

-- Second half of scrolling background
local bg2 = display.newImage("bg2.png")
bg2:setReferencePoint(display.CenterLeftReferencePoint)
bg2.x = 0
bg2.y = 480
localGroup:insert(bg2)

local tPrevious = system.getTimer()
local function move(event)
local tDelta = event.time - tPrevious
tPrevious = event.time

-- Change this to adjust the speed of the background
local yOffset = ( 0.15 * tDelta )

bg1.y = bg1.y + yOffset
bg2.y = bg2.y + yOffset

if bg1.y > 720 then
bg1:translate( 0, -480*2)
end
if bg2.y > 720 then
bg2:translate(0, -480*2)
end
end

-- Gets the background moving
Runtime:addEventListener( "enterFrame", move )

And you’re done!

As I said last week; just make sure you have two images (or one you want to repeat) in your application’s project folder that are 480 high. (Width is unimportant although you’d normally use 320 for a standard background.)

Also, it goes without saying I think – but make sure you have changed the image names above from bg1.png and bg2.png to your own image names ;)

Enjoy!

Peach Pellen :)

Like this post? Subscribe to the monthly newsletter!

 

  15 Responses to “How To Use A Scrolling Background – Portrait/Down”

  1. You have the width and height backwards ;) You need them to be the true width and height. Width should be 480, height should be 800, even in landscape mode. (We have threads on this.)

    But yeah, check out mentioned sample code :)

  2. Hi Peach,

    Yep that’s correct I think, It’s for the Samsung Galaxy S? I think it’s right anyway, I Googled it :D

  3. Hey Alex,

    Is that your actual device screen size? It doesn’t sound right. You need width and height of device, which will be the same whether is portrait or landscape.

    Take a look at CoronaSDK > SampleCode > Sprites > JungleScene – see how they have sky setup, that should do it for you.

  4. Hi,

    Great tutorial, I’ve got it worked well however I can’t figure out how to make the background scroll left on a landscape orientation? I’m using a screen size of 800 x 480,this is my config file:

    application = {
    content = {
    width = 800,
    height = 480,
    scale = “letterBox”,
    fps = 30,

    –[[
    imageSuffix = {
    ["@2x"] = 2,
    }
    –]]
    }
    }

    Basically I’m trying to achieve a scrolling background of sky + clouds for use in a menu.

    Thanks a lot for any advise or help.

  5. Hey Tom,

    Looks great!

    Mine is based on some Ansca/Corona sample code because I wanted people to be familiar with it – either from seeing it previously or when they looked at it in the future, which most people do for scrolling and sprites.

    The method from the post also lets a person adjust the speed easily by changing one number while yours requires two changes, however I don’t think that is a bad thing and could of course be altered with a variable to require only one change as well.

    Good stuff!

    Peach :)

    PS – Happy New Year!

  6. Hello Peach, and happy new year!

    Here’s my version. Please be brutal and tell me if there’s anything wrong with it. It works but would love to know if it’s incorrect.

    Thanks

    Tom

    – Hide status bar
    display.setStatusBar(display.HiddenStatusBar);

    local bg1 = display.newImage(‘images/bg1.png’);
    bg1:setReferencePoint(display.TopLeftReferencePoint);
    local bg2 = display.newImage(‘images/bg1.png’);
    bg2:setReferencePoint(display.TopLeftReferencePoint);

    bg2.y = 480;

    local function scroll()
    bg1.y = bg1.y -1;
    if(bg1.y <= -480) then
    bg1.y = 480;
    end
    bg2.y = bg2.y -1;
    if(bg2.y <= -480) then
    bg2.y = 480;
    end
    end

    Runtime:addEventListener("enterFrame", scroll);

  7. Anywhere, it doesn’t matter, so long as you have the two required png images in the project folder.

    This isn’t reliant on anything else, it is just a scrolling background :)

  8. Where do I place this in my code?

  9. nvm i figured it out srry

  10. Hi I am trying to make this portrait but I cant make the pictures move I can get the pictures to diplay properly but it does not work if anyone can help that would be much appreciated.

    Stephen

  11. Check your image sizes.

  12. hi, there is a thin line between the two images, how do i remove it? thanks

  13. hi, why does it half to have an upper half and lower half?

  14. A very nice tutorial, even managed to transform from um up/down to a left/right scroll. I change a bit tough using …bg.y < -240 then… instead of the if (paper.y + paper.contentHeight-240) < 0 then of your other tutorial and worked fine =D (unless there is a obscure case where this would not work and I did not managed to perceived c.c)

    Any way =D thanks for the tutorials, they are helping a lot.

    • I am pleased this has worked well for you and that you were able to modify it, well done!

      I’m sure there IS an obscure case where it might not work, there usually is ;) But I haven’t found it yet!

      Peach :)

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notify me of followup comments via e-mail. You can also subscribe without commenting.