low quality sprites

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
User avatar
Miken1
Prole
Posts: 42
Joined: Tue Nov 05, 2013 8:35 am
Location: Sweden

low quality sprites

Post by Miken1 »

Hello!

I would like to know how these arrows works on a graphical level.

Animated by hand or one image downsampled?
What should I look into to achieve that?

Image

Thanks.
User avatar
ivan
Party member
Posts: 1915
Joined: Fri Mar 07, 2008 1:39 pm
Contact:

Re: low quality sprites

Post by ivan »

Looks like a rotated, transparent image without filtering: https://love2d.org/wiki/FilterMode
The arrow's shadow is probably another, offset image with modified rotation.

Note that the images would be less jagged if you pre-render them in 8 directions and avoid using rotation altogether.
But again, this graphical style has its own charm too.
User avatar
Miken1
Prole
Posts: 42
Joined: Tue Nov 05, 2013 8:35 am
Location: Sweden

Re: low quality sprites

Post by Miken1 »

ivan wrote:Looks like a rotated, transparent image without filtering: https://love2d.org/wiki/FilterMode
The arrow's shadow is probably another, offset image with modified rotation.

Note that the images would be less jagged if you pre-render them in 8 directions and avoid using rotation altogether.
But again, this graphical style has its own charm too.
Thanks!

But what should I do to get the arrow that "pixely" when rotating?
User avatar
ivan
Party member
Posts: 1915
Joined: Fri Mar 07, 2008 1:39 pm
Contact:

Re: low quality sprites

Post by ivan »

First, make sure your image is scaled by a whole number (preferably x1,x2,x4 or x8)

love.graphics.setDefaultFilter('nearest', 'nearest', 0)
image:setFilter('nearest', 'nearest', 0)

It's all there on the wiki https://love2d.org/wiki/love.graphics.setDefaultFilter
User avatar
Miken1
Prole
Posts: 42
Joined: Tue Nov 05, 2013 8:35 am
Location: Sweden

Re: low quality sprites

Post by Miken1 »

ivan wrote:First, make sure your image is scaled by a whole number (preferably x1,x2,x4 or x8)

love.graphics.setDefaultFilter('nearest', 'nearest', 0)
image:setFilter('nearest', 'nearest', 0)

It's all there on the wiki https://love2d.org/wiki/love.graphics.setDefaultFilter
Hmmm...

I'm still not getting the same effect.
Should my image be in a certain format?


Here is the code:

Code: Select all

function love.load()
  arrow = love.graphics.newImage("arrow3.png")
  width = arrow:getWidth()
  height = arrow:getHeight()
  orientation = 0
end

function love.update(dt)
  
  orientation = orientation + 0.01
  
end

function love.draw()
  
  love.graphics.setDefaultFilter('nearest', 'nearest', 0)
  arrow:setFilter("nearest", "nearest")
  love.graphics.scale(2,2)
  love.graphics.draw(arrow, 200, 200, orientation, 1, 1, width/2, height/2)
  
end
(the arrow image is just a straight line)
User avatar
ivan
Party member
Posts: 1915
Joined: Fri Mar 07, 2008 1:39 pm
Contact:

Re: low quality sprites

Post by ivan »

Works as expected if your arrow is 1px thin.
If you want to scale, you may have to use canvas:

Code: Select all

function love.load()
  arrow = love.graphics.newImage("arrow3.png")
  width = arrow:getWidth()
  height = arrow:getHeight()
  orientation = 0
  love.graphics.setDefaultFilter('nearest', 'nearest', 0)
  arrow:setFilter("nearest", "nearest", 0)
  canvas = love.graphics.newCanvas(200,200)
end

function love.update(dt)
  orientation = orientation + 0.01
end

function love.draw()
  love.graphics.clear(0,0,0)
  love.graphics.setCanvas(canvas)
  love.graphics.draw(arrow, 100, 100, orientation, 1, 1, width/2, height/2)
  love.graphics.setCanvas()
  love.graphics.draw(canvas, 0, 0, 0, 4, 4)
end
User avatar
Miken1
Prole
Posts: 42
Joined: Tue Nov 05, 2013 8:35 am
Location: Sweden

Re: low quality sprites

Post by Miken1 »

ivan wrote:Works as expected if your arrow is 1px thin.
If you want to scale, you may have to use canvas:

Code: Select all

function love.load()
  arrow = love.graphics.newImage("arrow3.png")
  width = arrow:getWidth()
  height = arrow:getHeight()
  orientation = 0
  love.graphics.setDefaultFilter('nearest', 'nearest', 0)
  arrow:setFilter("nearest", "nearest", 0)
  canvas = love.graphics.newCanvas(200,200)
end

function love.update(dt)
  orientation = orientation + 0.01
end

function love.draw()
  love.graphics.clear(0,0,0)
  love.graphics.setCanvas(canvas)
  love.graphics.draw(arrow, 100, 100, orientation, 1, 1, width/2, height/2)
  love.graphics.setCanvas()
  love.graphics.draw(canvas, 0, 0, 0, 4, 4)
end

Thanks! Exactly what I wanted.

EDIT: I'm getting a weird constant drawing effect on the canvas
User avatar
Jasoco
Inner party member
Posts: 3727
Joined: Mon Jun 22, 2009 9:35 am
Location: Pennsylvania, USA
Contact:

Re: low quality sprites

Post by Jasoco »

Can you post some code? Also, when drawing to your canvas, are you making sure to clear it at the beginning first so it doesn't paint all the new pixels over the old ones? (Like a Hall of Mirrors/HOM effect)
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], Bing [Bot] and 1 guest