How to create a moving background? Looping it?

Basically you have an object that can change direction, but the background is moving to create an illusion that you are moving in space.

I have a space background, with a transparent layer of stars over the background. I want the layer to move up, and then go back down to the bottom to keep going . Its not going smooth though any suggestions?

Nvm figure it out by creating two images that are double the height of the canvas and moving the first one below the second and continuing that

Any change you can show your code so i can see an example, i been trying to do the exact same thing but cant seem to figure it out it keeps ending...

require "sprite"
display.setStatusBar( display.HiddenStatusBar )
 
local sky = display.newImage( "images/black.png" )
 
local baseline = 280
 
local grass = display.newImage( "images/grass.png" )
grass:setReferencePoint( display.CenterLeftReferencePoint )
grass.y = 0
grass.x = 20
grass.rotation = 90
 
local grass2 = display.newImage( "images/grass.png" )
grass2:setReferencePoint( display.CenterLeftReferencePoint )
grass2.y = 480
grass2.x = 20
grass2.rotation = 90
 
local function test()
local tPrevious = system.getTimer()
local function move(event)
 
        local xOffset = ( 0.5 * 5 )
 
        grass.y = grass.y - xOffset
        grass2.y = grass2.y - xOffset
 
 
        if (grass.y) > 0 then
                grass:translate( 480 * 2, 0)
        end
        if (grass2.y) < 0 then
                grass2:translate(0 * 0, 0)
        end
 
        
end
Runtime:addEventListener( "enterFrame", move ); 
end
 
test()

to create an endless background you have to put it in group, create 2 groups with the same image. make group 1 scrolling and follow by group 2, when group 1 is off the screen move it under the group 2.

Hi ironman,

How would you do such a thing? Sounds simpler

Here is the code from OmniBlater, my vertical scrolling sci-fi arcade shooter:

local function scrollBackground(event)
    local yOffset = 2
    
    background.y = background.y + yOffset
    background2.y = background2.y + yOffset
    if (background.y) > 2047 then
        background.y = -2047
    end
    if (background2.y) > 2047 then
        background2.y = -2047
    end
end

@robmiracle

I tried that code but changed it to rectangles and after a few rounds the rects get a space between them. I have tried to change the y position of background2 but that doesn't help either.

Are your scrolling as choppy as this?

local background = display.newRect(0, 0, display.contentWidth, 1024)
                background:setFillColor(222,222,222)
local background2 = display.newRect(0, -1024, display.contentWidth, 1024)
                background:setFillColor(111,222,0)
 
local function scrollBackground(event)
    local yOffset = 3
    
    background.y = background.y + yOffset
    background2.y = background2.y + yOffset
    if (background.y) > 1023 then
        background.y = - 1023
    end
    if (background2.y) > 1023 then
        background2.y = - 1023
    end
end
 
Runtime:addEventListener( "enterFrame", scrollBackground )

I had a quick try of something similar in an app a few months ago. There didn't seem to be a way to readd the bottom scrolled-off image to the top and keep them together. There was always a gap so I scrapped it.

views:1526 update：2011/10/5 21:23:48


Label: corona android iphone ipad building error inmobi problem display screen View image tableView failed object physics touch button game lua config event listener