How to loop an animation in scene:show()

Solar2D Composer
#1

Hey all here is my code. I would like the background image to keep scrolling across the screen. But all it does is move 5 pixels and then stop. What am i doing wrong? Thanks :slight_smile:

local composer = require( “composer” )

local scene = composer.newScene()

function scene:create( event )

   local sceneGroup = self.view

end

function scene:show( event )

   local sceneGroup = self.view

   local phase = event.phase

   if ( phase == “will” ) then

      – Called when the scene is still off screen (but is about to come on screen).

   elseif ( phase == “did” ) then

b1x=b1x-5

b2x=b2x-5

if b1x<=-570 then

b1x=(display.viewableContentWidth / 2)+570

end

if b2x<=-570 then

b2x=(display.viewableContentWidth / 2)+570

end

local back1 = display.newImage(back1,b1x,b1y)

local back2 = display.newImage(back2,b2x,b2y)

sceneGroup:insert(back1)

sceneGroup:insert(back2)

   end

end

scene:addEventListener( “create”, scene )

scene:addEventListener( “show”, scene )

scene:addEventListener( “hide”, scene )

scene:addEventListener( “destroy”, scene )

return scene

#2

Hi @liimbix,

Basically, in the way you’ve written this, the scene loads, the background images move, and then the function ends… nothing else happens, nor is anything supposed to happen (this is the expected result, essentially). To continue moving something, you’ll need to either transition the images via the transition library, or create a Runtime listener function that continually executes (each time step) and moves the images.

Here’s a link to the transitions guide:

http://docs.coronalabs.com/guide/media/transitionLib/index.html

Hope this helps,

Brent

#3

liimbix, 

You should be declaring everything in scene:create, not scene:show. You want your displayObjects to be loaded when the scene is created, before it’s shown.

As for the background, you’re on the right track. Try this:

local w = display.contentWidth local h = display.contentHeight local centerX = display.contentCenterX local centerY = display.contentCenterY local back1 = display.newImageRect("someImage.png",w,h) local back2 = display.newImageRect("someImage.png",w,h) back1.x = centerX back1.y = centerY back2.x = centerX \* 3 back2.y = centerY local speed = 5 local function updateBackgrounds() back1.x = back1.x - (speed/55) if(back1.x \< (-centerX)) then back1.x = centerX end back2.x = back2.x - (speed/55) if(back2.x \< (centerX)) then back2.x = centerX\*3 end end local function update() updateBackgrounds() end timer.performWithDelay(1, update, -1)

So, you load your background twice,once as back1, again as back2. On the screen, back1 is centered, back2 is centered to the right of the screen. You set your speed, in this case 5 (you can make this whatever you want). The updateBackgrounds() function moves both back1 and back2 to the left at the same speed. It checks both back1 and back2 x-positions. Once back1 reaches -centerX, it moves it back to centerX. Once back2 reaches centerX, it moves it back to centerX*3. Using a timer, the update function is run on an endless loop every millisecond. It might be more efficient to run the update function as a Runtime enterFrame listener, not sure.

#4

Hi @liimbix,

Basically, in the way you’ve written this, the scene loads, the background images move, and then the function ends… nothing else happens, nor is anything supposed to happen (this is the expected result, essentially). To continue moving something, you’ll need to either transition the images via the transition library, or create a Runtime listener function that continually executes (each time step) and moves the images.

Here’s a link to the transitions guide:

http://docs.coronalabs.com/guide/media/transitionLib/index.html

Hope this helps,

Brent

#5

liimbix, 

You should be declaring everything in scene:create, not scene:show. You want your displayObjects to be loaded when the scene is created, before it’s shown.

As for the background, you’re on the right track. Try this:

local w = display.contentWidth local h = display.contentHeight local centerX = display.contentCenterX local centerY = display.contentCenterY local back1 = display.newImageRect("someImage.png",w,h) local back2 = display.newImageRect("someImage.png",w,h) back1.x = centerX back1.y = centerY back2.x = centerX \* 3 back2.y = centerY local speed = 5 local function updateBackgrounds() back1.x = back1.x - (speed/55) if(back1.x \< (-centerX)) then back1.x = centerX end back2.x = back2.x - (speed/55) if(back2.x \< (centerX)) then back2.x = centerX\*3 end end local function update() updateBackgrounds() end timer.performWithDelay(1, update, -1)

So, you load your background twice,once as back1, again as back2. On the screen, back1 is centered, back2 is centered to the right of the screen. You set your speed, in this case 5 (you can make this whatever you want). The updateBackgrounds() function moves both back1 and back2 to the left at the same speed. It checks both back1 and back2 x-positions. Once back1 reaches -centerX, it moves it back to centerX. Once back2 reaches centerX, it moves it back to centerX*3. Using a timer, the update function is run on an endless loop every millisecond. It might be more efficient to run the update function as a Runtime enterFrame listener, not sure.