Background infinite using corona sdk

Question

I\'m trying to scroll side a background in corona sdk (infinity background) I used two images repeated (854x176).

I tried this function:

 function mo         


        

Answer 1

One way of doing this would be to take advantage of Graphics 2.0 Engine's feature called repeating fills.

Here are the steps:

1. Set the default texture wrapping mode for x (you could do the same for y too):

   display.setDefault("textureWrapX", "mirroredRepeat")
   

   The modes for wrapping are:

   • "clampToEdge" - (default) clamped fill won't repeat
   • "repeat" - fill is repeated as if same tiles were placed side by side
   • "mirroredRepeat" - fill is repeated in a mirrored pattern, each tile being a mirror image of the one next to it

2. Create a rectangle the size of the background you want to have, eg. full screen

   local background = display.newRect(display.contentCenterX, display.contentCenterY, 320, 480)
   

3. Fill your display object with your background image

   background.fill = {type = "image", filename = "background.jpg"}
   

4. Animate it using whatever method fits your app. Below's just one way:

   local function animateBackground()
       transition.to(background.fill, {time=5000, x=1, delta=true, onComplete=animateBackground})
   end
   
   animateBackground()
   

   Here you simply run transition on x property of background.fill object, delta=true indicating that we're rather using changes in x value, not final ending values (see here).

   Play with the values for time, x, set delta to false, play with wrapping modes, just to see what effect it has on animation. You might even accidentally discover some cool effect which you might want to use later...

   Check this excellent tutorial by Brent Sorrentino, who goes through more details on fills. Additionally, see sample code in CoronaSDK under Graphics-Premium/PatternFill.

   Full code:

   display.setDefault("textureWrapX", "mirroredRepeat")
   
   local background = display.newRect(display.contentCenterX, display.contentCenterY, 320, 480)
   background.fill = {type = "image", filename = "background.jpg" }
   
   local function animateBackground()
       transition.to( background.fill, { time=5000, x=1, delta=true, onComplete=animateBackground } )
   end
   
   animateBackground()