Spritesheets [SOLVED]

[Prynok]

Hello! I recently have gotten back into LOVE, and have tried messing around with loading Tiled levels from scratch. Everything works fine, but there seems to be one problem. Quads make the image blurry. Especially when scaling. Is there any to fix this? I saw a solution by adding a border around each sprite, but that seems like a way to get around the problem instead of fixing it.

Thanks!

EDIT: That was embarrassing. Instead of using quads, it is easier to break up the image into smaller ones with ImageData, using paste. Thanks anyways!

[arampl]

Instead of using quads, it is easier to break up the image into smaller ones with ImageData, using paste.

Doing it that way will ruin the idea of spritesheet completely. You can as well not use it at all, simply using a set of separate images. What is wrong with using 1px borders? This is a small price for effectiveness given by spritesheet + quads.

[s-ol]

Hello! I recently have gotten back into LOVE, and have tried messing around with loading Tiled levels from scratch. Everything works fine, but there seems to be one problem. Quads make the image blurry. Especially when scaling. Is there any to fix this? I saw a solution by adding a border around each sprite, but that seems like a way to get around the problem instead of fixing it.

Thanks!

EDIT: That was embarrassing. Instead of using quads, it is easier to break up the image into smaller ones with ImageData, using paste. Thanks anyways!

Everything is blurry when scaled without filter set to nearest. Have you set a default filter ("nearest", "nearest") before loading the images? With Quads you get a performance boost when drawing using the same image/texture/spritebatch.

[Prynok]

Instead of using quads, it is easier to break up the image into smaller ones with ImageData, using paste.

Doing it that way will ruin the idea of spritesheet completely. You can as well not use it at all, simply using a set of separate images. What is wrong with using 1px borders? This is a small price for effectiveness given by spritesheet + quads.

There are still tons of uses for sprite sheets with this method. Since there are more patterns, a image compression program can compress it down more. Also, can you explain the effectiveness of quads? I don't think I understand.

Thanks!

[arampl]

Well, first using ImageData:paste, then showing that data on screen is almost like drawing it 2 times, right?

Second, when using quads and one big image you don't need to switch between different images, which is an additional "talk" beetween CPU and GPU. With quads you only choose which part of image (currently used by GPU) to draw.

Your method will work OK until you add more layers / use bigger maps(tiles).

[s-ol]

Instead of using quads, it is easier to break up the image into smaller ones with ImageData, using paste.

Doing it that way will ruin the idea of spritesheet completely. You can as well not use it at all, simply using a set of separate images. What is wrong with using 1px borders? This is a small price for effectiveness given by spritesheet + quads.

There are still tons of uses for sprite sheets with this method. Since there are more patterns, a image compression program can compress it down more. Also, can you explain the effectiveness of quads? I don't think I understand.

Thanks!

It's easiest to explain with underlying opengl pseudocode:

Code: Select all

-- what you write:
love.graphics.draw(Image.enemy, e.x, e.y)
love.graphics.draw(Image.player, p.x, p.y)

-- what I'd write
love.graphics.draw(Image.all, e.quad, e.x, e.y)
love.graphics.draw(Image.all, p.quad, p.x, p.y)

Code: Select all

// your way:
main() {
  all = loadImage("all")
  enemy = pushToGPU(getPart(all, "enemy"))
  player  = pushToGPU(getPart(all, "player"))
  
  // everything else
  while ( true) {
    setTexture( enemy )
    drawQuad( buildQuad( e.x, e.y, ... ) )
    setTexture( player )
    drawQuad( buildQuad( p.x, p.y, ... ) )
  }
}

// my way:
main() {
  all = pushToGPU(loadImage("all"))
  
  // everything else
  while ( true) {
    setTexture( all  )
    drawQuad( buildEnemyQuad( e.x, e.y ) )
    drawQuad( buildPlayerQuad( p.x, p.y ) )
  }
}

which basically means less GPU-CPU communication at the cost of more CPU crunching during drawing. The communication is the biggest bottleneck (usually).