Background infinite using corona sdk

1

votes

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

I tried this function:

 function mov(self, event)
   if self.x < -854 then
     self.x = 854
   else
     self.x = self.x - self.speed
   end
 end

it's working just fine but the problem that a small white space occurred between repetitions. Is there a better way to do this?

sdkluacoronasdk

1 Answers

5

votes

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

Here are the steps:

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

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)

Fill your display object with your background image

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

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()
```