Offset problem

Solar2D General Questions/Discussion
#1

Hey Guys.

I am trying to create a vertical parallax background made out of 4 different 768 x 1024 backgrounds. I manage to make that. But each time a new background reappears on screen there is a small offset in the continuity and you can see the black background. I made a sample code so you can see what i am talking about so maybe you can help me.

If you can see in the code below the background will start to scroll down when the first background is off the screen with a new color background comes down. The thing is that there is a small offset and you can see the black background I want each color to be joint exactly at the bottom and the end so there is no offset.

Also is there a way to choose in a random way which color background will appear next on screen. Right now they appear on a certain order is it posible to do this in a random way

Any help will be appreciated thanks a lot.

[code]
display.setStatusBar(display.HiddenStatusBar)

local moveDown1 = 0
local moveDown2 = 0

local bg = display.newRect(0, 0, 768, 1024)
bg:setFillColor(0, 0, 0) --BLACK BG

local square = display.newRect(0, 0, 768, 1024)
square:setFillColor(0, 255, 150) --green
square.x = 384
square.y = 512

local square2 = display.newRect(0, 0, 768, 1024)
square2:setFillColor(250, 255, 0) --yellow
square2.x = 384
square2.y = -512

local square3 = display.newRect(0, 0, 768, 1024)
square3:setFillColor(255 ,100, 140) – pink
square3.x = 384
square3.y = -512

local square4 = display.newRect(0, 0, 768, 1024)
square4:setFillColor(255 ,0, 0) – red
square4.x = 384
square4.y = -512

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

local yOffset = ( .4 * tDelta )

if moveDown1 == 0 then
square.y = square.y + yOffset
end

if moveDown2 == 0 then
square2.y = square2.y + yOffset
end

if moveDown1 == 1 then
square3.y = square3.y + yOffset
end

if moveDown2 == 1 then
square4.y = square4.y + yOffset
end

if square.y > 1536 then

square:translate( 0, -1024*2)
moveDown1 = 1
–moveDown1 = math.random(0,1)
end

if square2.y > 1536 then

moveDown2 = 1
square2:translate(0, -1024*2)

end

if square3.y > 1536 then

square3:translate(0, -1024*2)
moveDown1 = 0
–moveDown1 = math.random(0,1)

end

if square4.y > 1536 then

square4:translate(0, -1024*2)
moveDown2 = 0
–moveDown1 = math.random(0,1)

end
end

Runtime:addEventListener( “enterFrame”, move )
[import]uid: 111657 topic_id: 21420 reply_id: 321420[/import]

#2

Hi steve, I modified your post to use code tags, makes it easier to read the code :slight_smile: [import]uid: 84637 topic_id: 21420 reply_id: 84800[/import]

#3

Thank you Danny… Do you have any idea why is this happening? [import]uid: 111657 topic_id: 21420 reply_id: 84826[/import]

#4

Why do you have magic numbers (hardcoded values)? Is the height 1024 or 768? if it is 1024 then why are you checking for 768*2 = 1536? and then translating it back by 1024*2 = 2048? A good practice is to use the Height and Width of the object, and variables based on that rather than Magic Numbers. [import]uid: 3826 topic_id: 21420 reply_id: 84851[/import]

#5

this may help
http://developer.anscamobile.com/forum/2012/02/05/continuous-scrolling-background [import]uid: 7911 topic_id: 21420 reply_id: 84853[/import]

#6

Thanks Oz I actually found that code somewhere as a parallax scrolling sample and it seemed to work okay but just for two different images.
Hey j

I purchased your module and it works great. But suppose that I have an array of 4 different backgrounds and I want them to scroll at a random order. How would you achieve this using your module?

Than you very much [import]uid: 111657 topic_id: 21420 reply_id: 84995[/import]

#7

thanks
I’m at work now but when I get home I’ll figure it out for you. may have to add a new method for random [import]uid: 7911 topic_id: 21420 reply_id: 84998[/import]

#8

Thanks a lot J. I’ll look forward to it.

Take care [import]uid: 111657 topic_id: 21420 reply_id: 85000[/import]

#9

Hey Steve

Not sure if this helps, but I had some gaps appearing between my backgrounds and found the problem was to do with the translate values not being whole numbers.

I havent analysed your sample code… but in my case for example

If my speed was set to -8
And my background was being moved using background1:translate(speed,0)
background2:translate(speed,0)
All was fine

But if I changed this to
background1:translate(speed/3, 0)
background2:translate(speed/3, 0)

I got gaps between background1 and 2… because the resulting speed was 2.66

Hope this helps ya
Richie
[import]uid: 12583 topic_id: 21420 reply_id: 86466[/import]