Adding a scrolling background in the bottom of the display

Question

i've added a scrolling bottom called "grass", the width of the grass1.png and grass2.png are same : 500px. The grass2 is behind the grass1, as a shadow.

The problem is about the "synchro time" between grass1 & grass1_duo (same with grass2 & grass2_duo). Besides, the grass started from the right to the left of the screen. I would like to start on the BottomLeft (i'm using a recent version of LUA).

Please can you review my code, i cannot understand if the problem is about my function or about the "width calculation" or maybe both of them ?

    grass1 = display.newImage('grass1.png')
grass1.anchorX=0
grass1.height=90
grass1.x=0
grass1.y = display.contentHeight-(grass1.height/2)
physics.addBody(grass1, "static", {density=.1, bounce=0.1, friction=.2})
grass1.speed = 6
screenGroup:insert(grass1)

grass1_duo = display.newImage('grass1.png')
grass1_duo.anchorX=0
grass1_duo.height=90
grass1_duo.x=500
grass1_duo.y = display.contentHeight-(grass1_duo.height/2)
physics.addBody(grass1_duo, "static", {density=.1, bounce=0.1, friction=.2})
grass1_duo.speed = 6
screenGroup:insert(grass1_duo)

grass2 = display.newImage('grass2.png')
grass2.anchorX=0
grass2.height=90
grass2.x=0
grass2.y = display.contentHeight-(grass2.height/1.8)
physics.addBody(grass2, "static", {density=.1, bounce=0.1, friction=.2})
grass2.speed = 6
screenGroup:insert(grass2)  

grass2_duo = display.newImage('grass2.png')
grass2_duo.anchorX=0
grass2_duo.height=90
grass2_duo.x=500
grass2_duo.y = display.contentHeight-(grass2_duo.height/1.8)
physics.addBody(grass2_duo, "static", {density=.1, bounce=0.1, friction=.2})
grass2_duo.speed = 6
screenGroup:insert(grass2_duo)

Here is the function called :

function ScrollGrass(self,event)

if self.x < (-1000 + (self.speed*3)) then
    self.x = 1000
else 
    self.x = self.x - self.speed
end

end

and now, my listenner :

grass1.enterFrame=ScrollGrass
Runtime:addEventListener("enterFrame",grass1)
grass2.enterFrame=ScrollGrass
Runtime:addEventListener("enterFrame",grass2)
grass1_duo.enterFrame=ScrollGrass
Runtime:addEventListener("enterFrame",grass1_duo)
grass2_duo.enterFrame=ScrollGrass
Runtime:addEventListener("enterFrame",grass2_duo)

Thank you :)

Answer 1

Try using one function for all grass:

function scrollGrass(grass)
    if grass.x < (-1000 + (grass.speed*3)) then
        grass.x = 1000
    else 
        grass.x = grass.x - grass.speed
    end
end

function scrollGrasses(event)
    scrollGrass(grass1)
    scrollGrass(grass1_duo)
    scrollGrass(grass2)
    scrollGrass(grass2_duo)
end

Runtime:addEventListener("enterFrame",scrollGrasses)

If that doesn't help, it may well be that your scroll function is wrong, but it's impossible to tell from your post, what you are wanting that function to do.

Update:

First thing you should try is not register for enterFrame events, so you see the grass as it is initialized. Are the positions correct?

The other thing you could do is use a transition on a group, then you won't need enterFrame:

allGrasses = display.newGroup()
allGrasses:insert(grass1)
...
allGrasses:insert(grass2_duo)

function resetGrassesPos() 
    allGrasses.x = 0 
    transition.to(allGrasses, {time=5000, x=-500, onComplete=resetGrassesPos}
end

transition.to(allGrasses, {time=5000, x=-500, onComplete=resetGrassesPos}

You could have a transition for each individual grass but I don't know if it would keep them in sync.

Answer 2

I think i've a problem with my function. I've tried your function, but i'm not sure that will resolve my problem.I would like to do something like in the video : https://www.youtube.com/watch?v=FsP7mJkyIiQ

Working with transition won't be good for me because i'll have to manage with different "smartphone resolution".

Until now, without the scrolling function, i can display all the grasses on the screen. 3 grasses at all : 3 x 500px. What i'm looking for now, is to scroll the 3 grasses without any interuption.

I've suppose that function can work, but it doesnt :

function scrollGrass(grass, event)
   if grass.x < -1500  then --1500 is the size of the 3 grasses each one is close to the other. In fact, i'm not sure that the number is correct.
        grass.x = 1500 
    else
        grass.x = grass.x - 6
    end
end

Thank you :)