Spritesheets [SOLVED]

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.
Post Reply
Prynok
Prole
Posts: 7
Joined: Mon Mar 31, 2014 8:00 pm

Spritesheets [SOLVED]

Post by 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!
Attachments
tiles1.love
(8.19 KiB) Downloaded 62 times
User avatar
arampl
Party member
Posts: 248
Joined: Mon Oct 20, 2014 3:26 pm

Re: Spritesheets [SOLVED]

Post by arampl »

Prynok wrote: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.
User avatar
s-ol
Party member
Posts: 1077
Joined: Mon Sep 15, 2014 7:41 pm
Location: Cologne, Germany
Contact:

Re: Spritesheets [SOLVED]

Post by s-ol »

Prynok wrote: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.

s-ol.nu /blog  -  p.s-ol.be /st8.lua  -  g.s-ol.be /gtglg /curcur

Code: Select all

print( type(love) )
if false then
  baby:hurt(me)
end
Prynok
Prole
Posts: 7
Joined: Mon Mar 31, 2014 8:00 pm

Re: Spritesheets [SOLVED]

Post by Prynok »

arampl wrote:
Prynok wrote: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!
User avatar
arampl
Party member
Posts: 248
Joined: Mon Oct 20, 2014 3:26 pm

Re: Spritesheets [SOLVED]

Post by 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).
User avatar
s-ol
Party member
Posts: 1077
Joined: Mon Sep 15, 2014 7:41 pm
Location: Cologne, Germany
Contact:

Re: Spritesheets [SOLVED]

Post by s-ol »

Prynok wrote:
arampl wrote:
Prynok wrote: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).

s-ol.nu /blog  -  p.s-ol.be /st8.lua  -  g.s-ol.be /gtglg /curcur

Code: Select all

print( type(love) )
if false then
  baby:hurt(me)
end
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], Semrush [Bot] and 4 guests