Issues With Moving Background

christopher42 · October 1, 2013, 9:53pm

I am having trouble setting up a static background with a moving cloud graphic overlayed on top. My problem is tht I am trying to get the cloud graphic to endlessly repeat after the first one scrolls by but I keep having a gap inbetween the graphics…This is my code, I am very very new to lua, this is my first app so the answer will most likely be obvious…thank you for your time!

local background = display.newImageRect(“background.png”, 713, 450 )

background.x = display.contentCenterX

background.y = display.contentCenterY

local cloud1 = display.newImageRect(“cloud1.png”, 713, 450)

cloud1.x = display.contentCenterX

cloud1.y = display.contentCenterY

local cloud2 = display.newImageRect(“cloud1.png”, 713, 450 )

cloud2.x = 713

cloud2.y = display.contentCenterY

function scrollCloud(self,event)

if self.x < -713 then

self.x = 715

else

self.x = self.x - 3

end

cloud1.enterFrame = scrollCloud

Runtime:addEventListener(“enterFrame”, cloud1)

cloud2.enterFrame = scrollCloud

Runtime:addEventListener(“enterFrame”, cloud2)

I cannot figure out how to know where along the x axis to put the second graphic to make the scrolling seamless…

JonPM · October 1, 2013, 11:04pm

Maybe this:

function scrollCloud(self,event) if self.x \< -713 then self.x = 713 else self.x = self.x - 3 end end

christopher42 · October 1, 2013, 11:17pm

Thank you for your efforts, but unfortunately I still have a really big gap in between the cloud graphics…

JonPM · October 1, 2013, 11:34pm

Can you post the cloud image?

christopher42 · October 1, 2013, 11:52pm

This is the alternate way of going about it that I just found, but it is not working either…

–Main Screen Logo Placement

local logo = display.newImage(“bbLogo.png”)

logo.x = display.contentCenterX

logo.y = display.contentCenterY

–Main Screen Button Placement

local playB = display.newImage(“playButton.png”)

playB.x = display.contentCenterX

playB.y = display.contentCenterY

local settingsB = display.newImage(“settingsButton.png”)

settingsB.x = display.contentCenterX

settingsB.y = display.contentCenterY

– Add Static Background

local background = display.newImageRect(“background.png”, 713, 450)

bg1:setReferencePoint(display.CenterLeftReferencePoint)

bg1.x = -50; bg1.y = _H/2;

– Add Moving Background 1

local cloud1 = display.newImageRect(“cloud1.png”, 713, 450)

cloud1:setReferencePoint(display.CenterLeftReferencePoint)

cloud1.x = 680; cloud1.y = _H/2;

– Add Moving Background 2

local cloud2 = display.newImageRect(“cloud1.png”, 713, 450)

cloud2:setReferencePoint(display.CenterLeftReferencePoint)

cloud2.x = 910; cloud2.y = _H/2;

local function move(event)

– move backgrounds to the left by scrollSpeed, default is 8

cloud1.x = cloud1.x - scrollSpeed

cloud2.x = cloud2.x - scrollSpeed

– Set up listeners so when backgrounds hits a certain point off the screen,

– move the background to the right off screen

if (cloud1.x + cloud1.contentWidth) < -713 then

cloud1:translate( 713*3, 0 )

end

if (cloud2.x + cloud2.contentWidth) < -713 then

bg2:translate( 713*3, 0 )

end

– Create a runtime event to move backgrounds

Runtime:addEventListener( “enterFrame”, move )

The first one is the plain background and the second is the clouds…

http://i1243.photobucket.com/albums/gg553/indigon214/App%20Images/backgroundx2.png

http://i1243.photobucket.com/albums/gg553/indigon214/App%20Images/cloud1x4.png

JonPM · October 2, 2013, 2:21am

Thanks for posting the images. Now that I can test the code I see what the problem is. You intially started cloud1 at display.contentCenterX, so this was throwing off the alignment. Here is the working code:

local background = display.newImageRect("background.png", 713, 450 ) background.x = display.contentCenterX background.y = display.contentCenterY local cloud1 = display.newImageRect("cloud1.png", 713, 450) cloud1.x = 0 cloud1.y = display.contentCenterY local cloud2 = display.newImageRect("cloud1.png", 713, 450 ) cloud2.x = 713 cloud2.y = display.contentCenterY function scrollCloud(self,event) if self.x \< -713 then self.x = 713 else self.x = self.x - 3 end end cloud1.enterFrame = scrollCloud Runtime:addEventListener("enterFrame", cloud1) cloud2.enterFrame = scrollCloud Runtime:addEventListener("enterFrame", cloud2)

christopher42 · October 2, 2013, 2:55am

Wow, thanks! I greatly appreciate your efforts! Question though…do you know how I can make it so that the second cloud graphic is closer to the first? I would like to close the gap between them some more and lastly, when I run the simulation the second cloud graphic just appears midway through the scene instead of being visible the whole time…can I fix that somehow and smooth out the transition?

Thank you, thank you for your help, I am very excited to finish me first app!

JonPM · October 2, 2013, 3:05am

Well one thing I noticed is that your cloud graphic has a bit of empty space on both the left and right sides. If you use photoshop or similar you can crop the graphic. Just keep in mind you will have to update your code to reflect the new image size, as well as the x coordinates.

Not sure what you mean with the second question. Can you clarify?

christopher42 · October 8, 2013, 2:12am

Thank you again for you help! I was able to work it out with your guidance… I have some other issues I have run into so I am about to post again to the forum…

JonPM · October 1, 2013, 11:04pm

Maybe this:

function scrollCloud(self,event) if self.x \< -713 then self.x = 713 else self.x = self.x - 3 end end

christopher42 · October 1, 2013, 11:17pm

Thank you for your efforts, but unfortunately I still have a really big gap in between the cloud graphics…

JonPM · October 1, 2013, 11:34pm

Can you post the cloud image?

christopher42 · October 1, 2013, 11:52pm

This is the alternate way of going about it that I just found, but it is not working either…

–Main Screen Logo Placement

local logo = display.newImage(“bbLogo.png”)

logo.x = display.contentCenterX

logo.y = display.contentCenterY

–Main Screen Button Placement

local playB = display.newImage(“playButton.png”)

playB.x = display.contentCenterX

playB.y = display.contentCenterY

local settingsB = display.newImage(“settingsButton.png”)

settingsB.x = display.contentCenterX

settingsB.y = display.contentCenterY

– Add Static Background

local background = display.newImageRect(“background.png”, 713, 450)

bg1:setReferencePoint(display.CenterLeftReferencePoint)

bg1.x = -50; bg1.y = _H/2;

– Add Moving Background 1

local cloud1 = display.newImageRect(“cloud1.png”, 713, 450)

cloud1:setReferencePoint(display.CenterLeftReferencePoint)

cloud1.x = 680; cloud1.y = _H/2;

– Add Moving Background 2

local cloud2 = display.newImageRect(“cloud1.png”, 713, 450)

cloud2:setReferencePoint(display.CenterLeftReferencePoint)

cloud2.x = 910; cloud2.y = _H/2;

local function move(event)

– move backgrounds to the left by scrollSpeed, default is 8

cloud1.x = cloud1.x - scrollSpeed

cloud2.x = cloud2.x - scrollSpeed

– Set up listeners so when backgrounds hits a certain point off the screen,

– move the background to the right off screen

if (cloud1.x + cloud1.contentWidth) < -713 then

cloud1:translate( 713*3, 0 )

end

if (cloud2.x + cloud2.contentWidth) < -713 then

bg2:translate( 713*3, 0 )

end

– Create a runtime event to move backgrounds

Runtime:addEventListener( “enterFrame”, move )

The first one is the plain background and the second is the clouds…

http://i1243.photobucket.com/albums/gg553/indigon214/App%20Images/backgroundx2.png

http://i1243.photobucket.com/albums/gg553/indigon214/App%20Images/cloud1x4.png

JonPM · October 2, 2013, 2:21am

Thanks for posting the images. Now that I can test the code I see what the problem is. You intially started cloud1 at display.contentCenterX, so this was throwing off the alignment. Here is the working code:

local background = display.newImageRect("background.png", 713, 450 ) background.x = display.contentCenterX background.y = display.contentCenterY local cloud1 = display.newImageRect("cloud1.png", 713, 450) cloud1.x = 0 cloud1.y = display.contentCenterY local cloud2 = display.newImageRect("cloud1.png", 713, 450 ) cloud2.x = 713 cloud2.y = display.contentCenterY function scrollCloud(self,event) if self.x \< -713 then self.x = 713 else self.x = self.x - 3 end end cloud1.enterFrame = scrollCloud Runtime:addEventListener("enterFrame", cloud1) cloud2.enterFrame = scrollCloud Runtime:addEventListener("enterFrame", cloud2)

christopher42 · October 2, 2013, 2:55am

Wow, thanks! I greatly appreciate your efforts! Question though…do you know how I can make it so that the second cloud graphic is closer to the first? I would like to close the gap between them some more and lastly, when I run the simulation the second cloud graphic just appears midway through the scene instead of being visible the whole time…can I fix that somehow and smooth out the transition?

Thank you, thank you for your help, I am very excited to finish me first app!

JonPM · October 2, 2013, 3:05am

Well one thing I noticed is that your cloud graphic has a bit of empty space on both the left and right sides. If you use photoshop or similar you can crop the graphic. Just keep in mind you will have to update your code to reflect the new image size, as well as the x coordinates.

Not sure what you mean with the second question. Can you clarify?

christopher42 · October 8, 2013, 2:12am

Thank you again for you help! I was able to work it out with your guidance… I have some other issues I have run into so I am about to post again to the forum…

sangam687 · April 11, 2014, 1:16pm

My Problem Is Also with Moving Backgrounds .

But i want to move Backgrounds of Three Layers(Sky, Mountain, Ground) By Using Acceleration from Right TO Left or After Some time of Interval the Movement should Be Increase for complex the Difficulty of Game Scene.

in My Game, Acceleration and After Some time of Interval the Movement is Increasing perfect.

But The Gap Between Repeated IMages is Also Increasing, this is the Main Issue.

i gon through many tutorials and Examples but din’t get solutions.

this Issue is Very High Priority because on Acceleration the Background Movement Gap would be Resolved.

i m adding a small Code in which by Acceleration and (static)Repetadely Increasing Movement of Background.

sangam687 · April 11, 2014, 1:16pm

My Problem Is Also with Moving Backgrounds .

But i want to move Backgrounds of Three Layers(Sky, Mountain, Ground) By Using Acceleration from Right TO Left or After Some time of Interval the Movement should Be Increase for complex the Difficulty of Game Scene.

in My Game, Acceleration and After Some time of Interval the Movement is Increasing perfect.

But The Gap Between Repeated IMages is Also Increasing, this is the Main Issue.

i gon through many tutorials and Examples but din’t get solutions.

this Issue is Very High Priority because on Acceleration the Background Movement Gap would be Resolved.

i m adding a small Code in which by Acceleration and (static)Repetadely Increasing Movement of Background.