Implementing a scrolling background ...

Hi,

I have a problem where I am trying to implement a scrolling background using one image that I repeat to scroll along the x-axis. The simulator is set to landscape mode and I have an image 570 wide by 228 high.

The problem is that there is a gap between the two instances of the image during scrolling and I cannot identify the cause of this. My code is as follows:

local sky = display.newImage("Stage_1_Level_1_sky.jpg")
sky.y = display.contentHeight / 2
sky.x = display.contentWidth / 2
 
local mountains1 = display.newImage("Stage_1_Level_1_mountains.png")
mountains1:setReferencePoint(display.CenterLeftReferencePoint)
mountains1.x = 0
mountains1.y = 228
--localGroup:insert(mountains1)
 
local mountains2 = display.newImage("Stage_1_Level_1_mountains.png")
mountains2:setReferencePoint(display.CenterLeftReferencePoint)
mountains2.x = 570
mountains2.y = 228
--localGroup:insert(mountains2)
 
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 xOffset = (0.15 * tDelta)
        
        mountains1.x = mountains1.x + xOffset
        mountains2.x = mountains2.x + xOffset
        
        if mountains1.x > 570 then
                mountains1:translate(-570 * 2, 0)
        end
        
        if mountains2.x > 570 then
                mountains2:translate(-570 * 2, 0)
        end     
end
 
-- Gets the background moving
Runtime:addEventListener("enterFrame", move)

Are you building for iphone/ipod or ipad? or Android? Since the Height is 228
it might not cover the whole screen (it happened to me before) but if you try this
it might give you result you want if not I suggest making the height bigger.

1
2
3

local sky = display.newImage("Stage_1_Level_1_sky.jpg", true)
sky.y = display.contentHeight / 2
sky.x = display.contentWidth / 2

Same thing happens in my Animal Lost game. In Animal Lost I scroll 1024x768 sized images and sometimes there is gap and sometimes there isn't. Maybe it is some device performance issue.

Anyways, a simple workaround would be to overlap your images a pixel or two. Of course you would need to create images that match even when overlapped.

@LeivaGames - I am building for all devices at the moment, the project config takes care of scaling.

I mus clarify, I am actually trying to scroll the mountains, not the sky (which already uses the positioning method you describe :))

Thanks.

@polygonblog - thanks for the suggestion. A strange effect of closing the gap on the one end of the image is that it grows bigger on the other. It is almost as if there is a hidden padding that won't go away.

Thanks.

Check out Ghosts Vs Monsters sample code, it features smooth scrolling of several images.

views:1606 update：2011/11/10 9:30:09


Label: corona android iphone ipad building error inmobi problem display screen View image tableView failed object physics touch button game lua config event listener