Efficient Tile-Based Scrolling tutorial doesn't work?

[T-Bone]

Hi lövers!

I wanted to do some tile based stuff in LÖVE, so I followed http://love2d.org/wiki/Tutorial:Efficie ... _Scrolling but it didn't seem to work. Simply copying the code in "Putting it all toghether" into a main.lua, placing it together with a tileset.png and running simply produced a black window (with a FPS count), no error messages either.

Am I doing something wrong? The tutorial doesn't give the impression of not being complete... I mean, it's not supposed to be very pretty, as it's using a randomized map with three different tiles, but it should still show something, right?

[bartbes]

I suspect it's PO2 Syndrome, but perhaps one of the tutorial creators can tell you more.

[T-Bone]

Doesn't seem to be the PO2 syndrome, I tried with this http://dl.dropbox.com/u/7572962/tileset.png now and it still just shows a black screen with a FPS count.

Maybe I should read more into how this example works, but it seems a bit pointless when it... doesn't work

[Robin]

What happens if you take out the SpriteBatch stuff and draw the tiles directly?

[T-Bone]

What happens if you take out the SpriteBatch stuff and draw the tiles directly?

You mean like in http://love2d.org/wiki/Tutorial:Tile-based_Scrolling wih every tile in a separate picture file?

[Robin]

No, I mean using exactly what you had, just taking out the SpriteBatch and drawing directly to the screen.

[T-Bone]

No, I mean using exactly what you had, just taking out the SpriteBatch and drawing directly to the screen.

I don't understand what you mean. By "taking out", do you mean removing or ignoring the SpriteBatch? If so, what excactly do I have that I can draw on the screen?

Just drawing the entire tilesetImage directly works, for example.

[Robin]

Lemme write up what I mean.

Code: Select all

local map -- stores tiledata
local mapWidth, mapHeight -- width and height in tiles

local mapX, mapY -- view x,y in tiles. can be a fractional value like 3.25.

local tilesDisplayWidth, tilesDisplayHeight -- number of tiles to show
local zoomX, zoomY

local tilesetImage
local tileSize -- size of tiles in pixels
local tileQuads = {} -- parts of the tileset used for different tiles
local tilesetSprite

function love.load()
  setupMap()
  setupMapView()
  setupTileset()
  love.graphics.setFont(12)
end

function setupMap()
  mapWidth = 60
  mapHeight = 40
 
  map = {}
  for x=1,mapWidth do
    map[x] = {}
    for y=1,mapHeight do
      map[x][y] = math.random(0,3)
    end
  end
end

function setupMapView()
  mapX = 1
  mapY = 1
  tilesDisplayWidth = 26
  tilesDisplayHeight = 20
 
  zoomX = 1
  zoomY = 1
end

function setupTileset()
  tilesetImage = love.graphics.newImage( "tileset.png" )
  tilesetImage:setFilter("nearest", "linear") -- this "linear filter" removes some artifacts if we were to scale the tiles
  tileSize = 32
  tileSize = 32
 
  -- grass
  tileQuads[0] = love.graphics.newQuad(0 * tileSize, 20 * tileSize, tileSize, tileSize,
    tilesetImage:getWidth(), tilesetImage:getHeight())
  -- kitchen floor tile
  tileQuads[1] = love.graphics.newQuad(2 * tileSize, 0 * tileSize, tileSize, tileSize,
    tilesetImage:getWidth(), tilesetImage:getHeight())
  -- parquet flooring
  tileQuads[2] = love.graphics.newQuad(4 * tileSize, 0 * tileSize, tileSize, tileSize,
    tilesetImage:getWidth(), tilesetImage:getHeight())
  -- middle of red carpet
  tileQuads[3] = love.graphics.newQuad(3 * tileSize, 9 * tileSize, tileSize, tileSize,
    tilesetImage:getWidth(), tilesetImage:getHeight())
 end

-- central function for moving the map
function moveMap(dx, dy)
  oldMapX = mapX
  oldMapY = mapY
  mapX = math.max(math.min(mapX + dx, mapWidth - tilesDisplayWidth), 1)
  mapY = math.max(math.min(mapY + dy, mapHeight - tilesDisplayHeight), 1)
end

function love.update(dt)
  if love.keyboard.isDown("up")  then
    moveMap(0, -0.2 * tileSize * dt)
  end
  if love.keyboard.isDown("down")  then
    moveMap(0, 0.2 * tileSize * dt)
  end
  if love.keyboard.isDown("left")  then
    moveMap(-0.2 * tileSize * dt, 0)
  end
  if love.keyboard.isDown("right")  then
    moveMap(0.2 * tileSize * dt, 0)
  end
end

function love.draw()
  for x=0, tilesDisplayWidth-1 do
    for y=0, tilesDisplayHeight-1 do
      love.graphics.drawq(tileQuads[map[x+math.floor(mapX)][y+math.floor(mapY)]],
        x*tileSize-math.floor(zoomX*(mapX%1)*tileSize), y*tileSize-math.floor(zoomY*(mapY%1)*tileSize),
        0, zoomX, zoomY)
    end
  end
  love.graphics.print("FPS: "..love.timer.getFPS(), 10, 20)
end

Warning: untested, and is obviously not as efficient as the SB version.

[T-Bone]

Lemme write up what I mean.

Code: Select all

local map -- stores tiledata
local mapWidth, mapHeight -- width and height in tiles

local mapX, mapY -- view x,y in tiles. can be a fractional value like 3.25.

local tilesDisplayWidth, tilesDisplayHeight -- number of tiles to show
local zoomX, zoomY

local tilesetImage
local tileSize -- size of tiles in pixels
local tileQuads = {} -- parts of the tileset used for different tiles
local tilesetSprite

function love.load()
  setupMap()
  setupMapView()
  setupTileset()
  love.graphics.setFont(12)
end

function setupMap()
  mapWidth = 60
  mapHeight = 40
 
  map = {}
  for x=1,mapWidth do
    map[x] = {}
    for y=1,mapHeight do
      map[x][y] = math.random(0,3)
    end
  end
end

function setupMapView()
  mapX = 1
  mapY = 1
  tilesDisplayWidth = 26
  tilesDisplayHeight = 20
 
  zoomX = 1
  zoomY = 1
end

function setupTileset()
  tilesetImage = love.graphics.newImage( "tileset.png" )
  tilesetImage:setFilter("nearest", "linear") -- this "linear filter" removes some artifacts if we were to scale the tiles
  tileSize = 32
  tileSize = 32
 
  -- grass
  tileQuads[0] = love.graphics.newQuad(0 * tileSize, 20 * tileSize, tileSize, tileSize,
    tilesetImage:getWidth(), tilesetImage:getHeight())
  -- kitchen floor tile
  tileQuads[1] = love.graphics.newQuad(2 * tileSize, 0 * tileSize, tileSize, tileSize,
    tilesetImage:getWidth(), tilesetImage:getHeight())
  -- parquet flooring
  tileQuads[2] = love.graphics.newQuad(4 * tileSize, 0 * tileSize, tileSize, tileSize,
    tilesetImage:getWidth(), tilesetImage:getHeight())
  -- middle of red carpet
  tileQuads[3] = love.graphics.newQuad(3 * tileSize, 9 * tileSize, tileSize, tileSize,
    tilesetImage:getWidth(), tilesetImage:getHeight())
 end

-- central function for moving the map
function moveMap(dx, dy)
  oldMapX = mapX
  oldMapY = mapY
  mapX = math.max(math.min(mapX + dx, mapWidth - tilesDisplayWidth), 1)
  mapY = math.max(math.min(mapY + dy, mapHeight - tilesDisplayHeight), 1)
end

function love.update(dt)
  if love.keyboard.isDown("up")  then
    moveMap(0, -0.2 * tileSize * dt)
  end
  if love.keyboard.isDown("down")  then
    moveMap(0, 0.2 * tileSize * dt)
  end
  if love.keyboard.isDown("left")  then
    moveMap(-0.2 * tileSize * dt, 0)
  end
  if love.keyboard.isDown("right")  then
    moveMap(0.2 * tileSize * dt, 0)
  end
end

function love.draw()
  for x=0, tilesDisplayWidth-1 do
    for y=0, tilesDisplayHeight-1 do
      love.graphics.drawq(tileQuads[map[x+math.floor(mapX)][y+math.floor(mapY)]],
        x*tileSize-math.floor(zoomX*(mapX%1)*tileSize), y*tileSize-math.floor(zoomY*(mapY%1)*tileSize),
        0, zoomX, zoomY)
    end
  end
  love.graphics.print("FPS: "..love.timer.getFPS(), 10, 20)
end

Warning: untested, and is obviously not as efficient as the SB version.

I get

Error: [string "main.lua"]:90: Incorrect parameter type: expected Image
stack traceback:
[C]: in function 'drawq'
[string "main.lua"]:90: in function 'draw'
[string "boot.lua"]23: in function <[string "boot.lua"]08>
[C]: in function 'xpcall'

[Robin]

Whoops. Add tilesetImage as the first argument to love.graphics.drawq, so that you get:

Code: Select all

love.graphics.drawq(tilesetImage, tileQuads[map[x+math.floor(mapX)][y+math.floor(mapY)]],
        x*tileSize-math.floor(zoomX*(mapX%1)*tileSize), y*tileSize-math.floor(zoomY*(mapY%1)*tileSize),
        0, zoomX, zoomY)