How to create a moving background? Looping it?

Solar2D Lua Language
#1

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? [import]uid: 49677 topic_id: 8742 reply_id: 308742[/import]

#2

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 [import]uid: 49677 topic_id: 8742 reply_id: 31857[/import]

#3

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…

[code]
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()[/code] [import]uid: 45615 topic_id: 8742 reply_id: 37624[/import]

#4

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. [import]uid: 7427 topic_id: 8742 reply_id: 38502[/import]

#5

Hi ironman,

How would you do such a thing? Sounds simpler [import]uid: 61610 topic_id: 8742 reply_id: 39070[/import]

#6

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

Both backgrounds are 2048 pixels high and 512 wide. [import]uid: 19626 topic_id: 8742 reply_id: 39076[/import]

#7

@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?

[code]
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 )
[/code] [import]uid: 34126 topic_id: 8742 reply_id: 39089[/import]

#8

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. [import]uid: 10389 topic_id: 8742 reply_id: 39241[/import]