Implementing a scrolling background ...

Games
#1

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:

[blockcode]
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)
[/blockcode]

Any ideas appreciated. Thanks. [import]uid: 52069 topic_id: 17414 reply_id: 317414[/import]

#2

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.

[lua]local sky = display.newImage(“Stage_1_Level_1_sky.jpg”, true)
sky.y = display.contentHeight / 2
sky.x = display.contentWidth / 2 [import]uid: 30314 topic_id: 17414 reply_id: 65928[/import]

#3

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. [import]uid: 13507 topic_id: 17414 reply_id: 65930[/import]

#4

@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. [import]uid: 52069 topic_id: 17414 reply_id: 65932[/import]

#5

@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. [import]uid: 52069 topic_id: 17414 reply_id: 65934[/import]

#6

Check out Ghosts Vs Monsters sample code, it features smooth scrolling of several images. [import]uid: 84637 topic_id: 17414 reply_id: 66032[/import]

#7

Thanks everyone, we solved this by using images with a width not exceeding the screen size (480). [import]uid: 52069 topic_id: 17414 reply_id: 66969[/import]