scrolling background with more than 2 images

Games
#1

Hi, I’m using the following code to create a scrolling background with more than 2 images, I’ve tried several different ways but it doesn’t work

local bgSpeed = 10; -- speed to move the backgrounds at  
   
local bg1 = display.newImage("backGround01.png", 0, 0); -- place bg1 at the origin  
local bg2 = display.newImage("backGround02.png", 0, bg1.y + (bg1.height \* 1.5)); -- place bg2 right after bg1  
  
   
local moveBG = function(e)  
 bg1:translate(0, bgSpeed); -- move bg1 bgSpeed on the y plane  
 bg2:translate(0, bgSpeed); -- move bg2 bgSpeed on the y plane  
   
 if ((bg1.y - bg1.height / 2) \> display.contentHeight) then  
 bg1.y = bg2.y - bg2.height;  
 elseif((bg2.y - bg2.height / 2) \> display.contentHeight) then  
 bg2.y = bg1.y - bg1.height;  
 end  
end

where’s the mistake?

thanks :slight_smile: [import]uid: 76800 topic_id: 24640 reply_id: 324640[/import]

#2

can u describe the problem ur having [import]uid: 7911 topic_id: 24640 reply_id: 99828[/import]

#3

My first observation is that this could be a reference point issue. Not seeing exactly what is happening and you also didn’t describe what’s happening, all we can do is speculate.

By default the image rectangles are Center reference point. Thus if you load a 200x200 image the way you are loading bg1 (at 0,0), the top left corner will be at 0,0, but bg1.x and bg1.y will be 100 and 100 respectfully.

Thus when you load bg2 you’re telling it to load it at 0,400 (assuming the 200x200 example image)

I personally would not use the display.newRect to place the images, but instead explicitly set the .x and y parameters.

Assuming these backgrounds are full screen say 320x480’s I would do something like:

bg1.x = display.contentWidth / 2  
bg1.y = display.contentHeight / 2  
  
bg2.x = display.contentWidth / 2  
bg2.y = bg1.y + bg2.height

Since we dealing with centers and you want to move each object back to the top when it goes completely off the bottom:

if bg1.y \> display.contentHeight \* 1.5 then  
 bg1.y = (bg1.height / 2) \* -1 -- set to negative half the height  
end  
if bg2.y \> display.contentHeight \* 1.5 then  
 bg2.y = (bg2.height / 2) \* -1 -- set to negative half the height  
end

The other thing would be to change the reference points on the background to either display.TopLeftReferencePoint or display.TopCenterReferencePoint then you could avoid all the half’s [import]uid: 19626 topic_id: 24640 reply_id: 99829[/import]

#4

thank you both, the problem is that the background is scrolling with only 2 images instead of 7, here’s the code I use in my game:

local bg1 = display.newImage("backGround01.png", 0, 0); -- place bg1 at the origin  
local bg2 = display.newImage("backGround02.png", 0, bg1.y + (bg1.height \* 1.5)); -- place bg2 right after bg1  
local bg3 = display.newImage("backGround03.png", 0, bg1.y + (bg1.height \* 1.5)); -- place bg2 right after bg1  
local bg4 = display.newImage("backGround04.png", 0, bg1.y + (bg1.height \* 1.5)); -- place bg2 right after bg1  
local bg5 = display.newImage("backGround05.png", 0, bg1.y + (bg1.height \* 1.5)); -- place bg2 right after bg1  
local bg6 = display.newImage("backGround06.png", 0, bg1.y + (bg1.height \* 1.5)); -- place bg2 right after bg1  
local bg7 = display.newImage("backGround07.png", 0, bg1.y + (bg1.height \* 1.5)); -- place bg2 right after bg1  
--local bg8 = display.newImage("backGround08.png", 0, bg2.y + (bg2.height \* 1.5));  
 --bg1.x,bg2.x = 160,160  
local moveBG = function(e)  
 bg1:translate(0, bgSpeed); -- move bg1 bgSpeed on the y plane  
 bg2:translate(0, bgSpeed); -- move bg2 bgSpeed on the y plane  
 bg3:translate(0, bgSpeed); -- move bg2 bgSpeed on the y plane  
 bg4:translate(0, bgSpeed); -- move bg2 bgSpeed on the y plane  
 bg5:translate(0, bgSpeed); -- move bg2 bgSpeed on the y plane  
 bg6:translate(0, bgSpeed); -- move bg2 bgSpeed on the y plane  
 bg7:translate(0, bgSpeed); -- move bg2 bgSpeed on the y plane  
   
   
 if ((bg1.y - bg1.height / 2) \> display.contentHeight) then  
 bg1.y = bg2.y - bg2.height;  
  
 elseif((bg2.y - bg2.height / 2) \> display.contentHeight) then  
 bg2.y = bg1.y - bg1.height;  
  
 elseif((bg3.y - bg3.height / 2) \> display.contentHeight) then  
 bg3.y = bg1.y - bg1.height;  
  
 elseif((bg4.y - bg4.height / 2) \> display.contentHeight) then  
 bg4.y = bg1.y - bg1.height;  
  
 elseif((bg5.y - bg5.height / 2) \> display.contentHeight) then  
 bg5.y = bg1.y - bg1.height;  
  
 elseif((bg6.y - bg6.height / 2) \> display.contentHeight) then  
 bg6.y = bg1.y - bg1.height;  
  
 elseif((bg7.y - bg7.height / 2) \> display.contentHeight) then  
 bg7.y = bg1.y - bg1.height;  
  
  
 end  
end

[import]uid: 76800 topic_id: 24640 reply_id: 99850[/import]