Repeating 2 backgrounds in Corona SDK

Question

Here's a problem: I'm making a simple physics game using Corona SDK and very simple module: http://developer.coronalabs.com/code/move-camera So I've got fish object with physics body and in each frame (enterFrame event) I'm centering camera on it

camera.x = -fish.x + screenWidth / 2

And I've got two backgrounds bg1 and bg2, which tiled each after other (bg1 bg2 bg1 bg2 etc) will make nice moving-world effect without user knowing that there are only 2 backgrounds. The problem is I can't get right calculations of their positions to make such effect. I googled a lot, but can't find anything to fit my needs.

Here's a free art, which I'm using http://www.vickiwenderlich.com/2013/02/free-game-art-flying-goldfish/ There you can find these two backgrounds.

It's also possible that fish can go slightly in opposite direction (generally it's moving to the right so to make world-moving effect backgrounds has to move to the left) so it would be nice if it'll in calculations.

I figured out something like this (however it doesn't work but maybe I'm close):

local function updateFrame(event)

    local m
    local dfx = lfx - fish.x

    lfx = fish.x
    camera.x = -fish.x + screenWidth / 2

    --print("dfx = " .. dfx)

    bg1.x = bg1.x + dfx
    bg2.x = bg2.x + dfx

    s = s + dfx

    if mAbs(s) > screenWidth then
        m = sgn(s)

        if m ~= 0 then
            s = s - m * screenWidth
            if m < 0 then
                bg1.x = bg1.x - 2 * m * screenWidth
            else
                bg2.x = bg2.x - 2 * m * screenWidth
            end
        end
    end

end
Runtime:addEventListener( "enterFrame", updateFrame );

s = screenLeft - screenWidth

where s is the sum of pixels moved and if it's over screenWidth I jump with one of the backgrounds, lfx is the last fish x location, dfx is a difference between last and current fish location and that's it.

If you can help me with my calculations or give me new ones or just give some interesting links please write them right here.

Any help will be appreciated, Regards

Answer 1

Thanks @krs and @Malar, combining your answers I figured out how to do this:

local function updateFrame(event)

    local speed = fish.x - lfx
    lfx = fish.x

    camera.x = -fish.x + screenWidth / 2

    bg1.x = bg1.x - speed
    bg2.x = bg2.x - speed

    if bg1.x + bg1.width < 0 then
        bg1.x = bg1.x + screenWidth * 2
    end
    if bg2.x + bg2.width < 0 then 
        bg2.x = bg2.x + screenWidth * 2
    end

    if bg1.x - bg1.width > 0 then
        bg1.x = bg1.x - screenWidth * 2
    end
    if bg2.x - bg2.width > 0 then 
        bg2.x = bg2.x - screenWidth * 2
    end

end
Runtime:addEventListener( "enterFrame", updateFrame );

Starting positions:

bg1.x = screenLeft
bg2.x = bg1.x + bg1.width

And the last most important change: I put bg1, bg2 and camera into a group and other objects into camera group:

local camera = require("camera")
group = display.newGroup()
group:insert(bg1)
group:insert(bg2)
camera:insert(fish)
camera:insert(ground)
group:insert(camera)

So we have ground and fish, which can move forever, but the backgrounds are only moving from -screenWidth to screenWidth.

All these things combined works like a charm!

Answer 2

local road = display.newImageRect( "Images/roadBg1.png",2247/4,559/4 )
road:setReferencePoint( display.CenterLeftReferencePoint )
road.x = 0
road.y = baseline - 20
local road2 = display.newImageRect( "Images/roadBg1.png",2247/4,559/4  )
road2:setReferencePoint( display.CenterLeftReferencePoint )
road2.x = 2247/4
road2.y = baseline - 20

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

local xOffset = ( 0.2 * tDelta )

road.x = road.x - xOffset
road2.x = road2.x - xOffset
if (road.x + road.contentWidth) < 0 then
    road:translate( 2247/4 * 2, 0)

end
if (road2.x + road2.contentWidth) < 0 then
    road2:translate( 2247/4 * 2, 0)

end
Runtime:addEventListener( "enterFrame", move )

or see the sample code of jungle scene game.

Location: SampleApps/Sprites/JungleScene

Answer 3

Try this:

local bg1 = display.newImageRect( "bg_1.png" ,480 ,320)
bg1.x = display.contentWidth/2; bg1.y = display.contentHeight/2

local bg2 = display.newImageRect( "bg_2.png" ,480 ,320 )
bg2.x = bg1.x + bg1.width; bg2.y = display.contentHeight/2


local speed = 30
function move()
  bg1.x = bg1.x-speed;
  bg2.x = bg2.x-speed;
  if(bg1.x + bg1.width/2 < 0)then bg1.x = bg1.width*3/2-speed
  elseif(bg2.x + bg2.width/2 < 0)then bg2.x = bg2.width*3/2-speed end
end
Runtime:addEventListener( "enterFrame", move )

Keep coding............ :)