Efficient Tile-Based Scrolling tutorial doesn't work?

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
User avatar
T-Bone
Inner party member
Posts: 1492
Joined: Thu Jun 09, 2011 9:03 am

Efficient Tile-Based Scrolling tutorial doesn't work?

Post by T-Bone » Fri Jun 17, 2011 8:27 am

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?

User avatar
bartbes
Sex machine
Posts: 4946
Joined: Fri Aug 29, 2008 10:35 am
Location: The Netherlands
Contact:

Re: Efficient Tile-Based Scrolling tutorial doesn't work?

Post by bartbes » Fri Jun 17, 2011 9:05 am

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

User avatar
T-Bone
Inner party member
Posts: 1492
Joined: Thu Jun 09, 2011 9:03 am

Re: Efficient Tile-Based Scrolling tutorial doesn't work?

Post by T-Bone » Sat Jun 18, 2011 7:45 am

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 :P

User avatar
Robin
The Omniscient
Posts: 6506
Joined: Fri Feb 20, 2009 4:29 pm
Location: The Netherlands
Contact:

Re: Efficient Tile-Based Scrolling tutorial doesn't work?

Post by Robin » Sat Jun 18, 2011 8:30 am

What happens if you take out the SpriteBatch stuff and draw the tiles directly?
Help us help you: attach a .love.

User avatar
T-Bone
Inner party member
Posts: 1492
Joined: Thu Jun 09, 2011 9:03 am

Re: Efficient Tile-Based Scrolling tutorial doesn't work?

Post by T-Bone » Sat Jun 18, 2011 8:58 am

Robin wrote: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?

User avatar
Robin
The Omniscient
Posts: 6506
Joined: Fri Feb 20, 2009 4:29 pm
Location: The Netherlands
Contact:

Re: Efficient Tile-Based Scrolling tutorial doesn't work?

Post by Robin » Sat Jun 18, 2011 9:47 am

No, I mean using exactly what you had, just taking out the SpriteBatch and drawing directly to the screen.
Help us help you: attach a .love.

User avatar
T-Bone
Inner party member
Posts: 1492
Joined: Thu Jun 09, 2011 9:03 am

Re: Efficient Tile-Based Scrolling tutorial doesn't work?

Post by T-Bone » Sat Jun 18, 2011 9:52 am

Robin wrote: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.
Last edited by T-Bone on Sat Jun 18, 2011 9:55 am, edited 1 time in total.

User avatar
Robin
The Omniscient
Posts: 6506
Joined: Fri Feb 20, 2009 4:29 pm
Location: The Netherlands
Contact:

Re: Efficient Tile-Based Scrolling tutorial doesn't work?

Post by Robin » Sat Jun 18, 2011 9:54 am

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.
Help us help you: attach a .love.

User avatar
T-Bone
Inner party member
Posts: 1492
Joined: Thu Jun 09, 2011 9:03 am

Re: Efficient Tile-Based Scrolling tutorial doesn't work?

Post by T-Bone » Sat Jun 18, 2011 10:05 am

Robin wrote: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"]:323: in function <[string "boot.lua"]:308>
[C]: in function 'xpcall'

User avatar
Robin
The Omniscient
Posts: 6506
Joined: Fri Feb 20, 2009 4:29 pm
Location: The Netherlands
Contact:

Re: Efficient Tile-Based Scrolling tutorial doesn't work?

Post by Robin » Sat Jun 18, 2011 10:07 am

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)
Help us help you: attach a .love.

Post Reply

Who is online

Users browsing this forum: cristoferfb and 46 guests