Continuous auto-scrolling a tiled background

[Knuxchan]

I searched on the forums about how to make a tiled background and I got that far, but now I want to try and scroll it automatically (no key press or anything). I was able to do so via the update function, but all it does is scroll the tiled area off the screen and everything is black again. Is there a way to have it scroll continuously in a loop or something without the black background showing when it scrolls off the screen?

[substitute541]

Yes.

Assuming that each tile's coordinates are on the top-left corner, here is the code:

Code: Select all

if tile.x + tile.width <= 0 then
    local dx = tile.x + tile.width
    tile.x = love.graphics.getWidth() - dx
elseif tile.x >= love.graphics.getWidth()
    local dx = tile.x - love.graphics.getWidth()
    tile.x = dx
end

That's the more accurate way of doing it. Because if you ignore the dx stuff, gaps will appear if you move fast enough.

[Knuxchan]

Yes.

Assuming that each tile's coordinates are on the top-left corner, here is the code:

Code: Select all

if tile.x + tile.width <= 0 then
    local dx = tile.x + tile.width
    tile.x = love.graphics.getWidth() - dx
elseif tile.x >= love.graphics.getWidth()
    local dx = tile.x - love.graphics.getWidth()
    tile.x = dx
end

That's the more accurate way of doing it. Because if you ignore the dx stuff, gaps will appear if you move fast enough.

Thanks! So in your example, the 'tile' variable would be the variable name of the background image? Would I need to apply this code in the update() function? or somewhere else?

[substitute541]

Tile is one of the tiles in your tiled background. So you will need a for-loop (a double for-loop actually). Also, this must be put in love.update().

Code: Select all

-- somewhere in love.update....
for y=1, height do
    for x=1, width do
        local tile = tiles[x][y]
        -- snippet of code that I posted before goes here...
    end
end

In there, height is the height of your tiled background (number of tiles, not the height in pixels), and width is the width of your tiled background (also number of tiles).

Of course, this assumes that your tiled background is contained in the 2D array, tiles.

[Knuxchan]

That doesn't seem to work. This is what I have (I am using ZeroBrane so I can debug in real-time):

Code: Select all

function love.load(arg)
  if arg and arg[#arg] == "-debug" then require("mobdebug").start() end
   sWidth = 800 --Screen Width
   sHeight = 600 -- Screen Height
   love.graphics.setMode(sWidth, sHeight, false, false, 0)
   
   bg = love.graphics.newImage("images/bg.png")
   bg:setWrap('repeat','repeat')
   
  width = love.graphics.getWidth()
  height = love.graphics.getHeight()
  x = 0
  y = 0
    
  imageWidth = bg:getWidth()
  imageHeight = bg:getHeight()
  
  imageFrame = love.graphics.newQuad(0, 0, width, height, imageWidth, imageHeight )
  
end


local function loveupdate()
  for y=1, height do
    for x=1, width do
      if bg.x + bg.width <= 0 then
        local dx = bg.x + bg.width
        bg.x = love.graphics.getWidth() - dx
      elseif bg.x >= love.graphics.getWidth() then
        local dx = bg.x - love.graphics.getWidth()
        bg.x = dx
      end
    end
  end
end

function lovedraw()
  love.graphics.drawq(bg, imageFrame,x, y)
  love.graphics.print("Hello World! The background is auto-scrolling behind this text!", 126, height-340)
  love.graphics.setColor(255,255,255,255)
end

function love.update() pcall(loveupdate) end
function love.draw() pcall(lovedraw) end

[Username]

Easy explanation without sourcecode included:

You only need to keep track of the "main" scrolling background.
Lets say you are scrolling it to the left.

You got X coordinate and the width of this image you want to scroll.

Each time you want draw it to screen at coordinate X, then you draw another copy of the image at X + imageWidth, so you basically have an image at X, which is the original image, and a copy of it just at the end of the original image.

Then you only need to decrease the X coordinate each game loop interval (call it each love.update() or each love.draw())

When the original image X position reaches -imageWidth (note the minus), then it means that the original image is fully scrolled, so you must draw it at X = 0 again.

This gives to the game player the illusion that it is an infinite scrolling.


Now the source code could be:

Code: Select all

posX = 0 -- initializing posX
imageWidth = 1024 -- this is our image width

function love.draw()
    printBackground()
end

function printBackground()
    love.graphics.draw(background_Image, posX, 0) -- this is the original image
    love.graphics.draw(background_Image, posX + imageWidth, 0) -- this is the copy that we draw to the original's right
    
    posX = posX - 1 -- scrolling the posX to the left

    if posX <= imageWidth the posX = 0 end
end

As simple as that.

[Knuxchan]

Awesome! I understand now. Thank you!

Another question. What would I need to do if I wanted the background to scroll diagonally?

EDIT: Nevermind, I got it. I had to make 2 more background copies, so now I have 4 backgrounds total scrolling.