Page 1 of 1
Drawing a scaled up and rotated image
Posted: Sun Nov 12, 2017 4:41 pm
by jdse03
.
Re: Drawing a scaled up and rotated image
Posted: Sun Nov 12, 2017 4:49 pm
by zorg
You are indeed talking about (bi)linear filtering; you just want it to apply only to the rotation, not the scaling.
I don't know if you can do that in one pass though; You'll probably need to use a canvas to render the scaled frame with nearest-neighbour interpolation, and then render that canvas rotated with bilinear interpolation onto the screen.
Re: Drawing a scaled up and rotated image
Posted: Sun Nov 12, 2017 5:45 pm
by jdse03
.
Re: Drawing a scaled up and rotated image
Posted: Sun Nov 12, 2017 6:28 pm
by jdse03
.
Re: Drawing a scaled up and rotated image
Posted: Mon Nov 13, 2017 12:02 pm
by jdse03
.
Re: Drawing a scaled up and rotated image
Posted: Mon Nov 13, 2017 12:27 pm
by zorg
No code -> no perfect ideas, though i do have a few more tips, like if you're using a sprite atlas, with quads, with or without a spritebatch, i do hope you have 1px borders of the same color of the pixels next to them for each of your sprites, otherwise there will be bleeding when you draw them transformed.
Re: Drawing a scaled up and rotated image
Posted: Mon Nov 13, 2017 1:59 pm
by jdse03
.
Re: Drawing a scaled up and rotated image
Posted: Fri Dec 01, 2017 8:39 pm
by Sasha264
zorg was right, two staged drawing save a day.
But in your example you have scaling AND rotation in one operation, 90 is rotation in radians, 200 is scale
Code: Select all
love.graphics.draw(player.image, W / 2, H / 2, 90, 200, 200, player.image:getWidth() / 2, player.image:getHeight() / 2)
You want to do this in two stages
Code: Select all
function love.load()
love.window.setTitle("Cheeeers!! Nearest scale + linear rotation!")
img = love.graphics.newImage("enemy-mothership.png")
img:setFilter("nearest", "nearest")
global_filter = "linear"
--love.window.setMode(1280, 720, { resizable = false, vsync = true, msaa = 16 }) -- use msaa for better lines, but it greatly decrease performance
end
function love.update(dt)
end
function love.draw()
-- first draw image without rotation into separate canvas (but with scale)
local scale = 15
local w, h = img:getDimensions()
w, h = w * scale, h * scale
local canvas = love.graphics.newCanvas(w, h)
love.graphics.setCanvas(canvas)
love.graphics.clear()
love.graphics.draw(img, 0, 0, 0, scale, scale, 0, 0)
-- second draw canvas into screen with rotation
local screen_w, screen_h = love.graphics.getDimensions()
love.graphics.setCanvas()
love.graphics.draw(canvas, screen_w / 2, screen_h / 2, math.sin(0.5 * love.timer.getTime() / 10), 1, 1, w / 2, h / 2)
end
function love.mousepressed(x, y, button, istouch)
-- on mouse press I change defauld filtering
if global_filter == "nearest" then
global_filter = "linear"
else
global_filter = "nearest"
end
love.graphics.setDefaultFilter(global_filter, global_filter)
end
Re: Drawing a scaled up and rotated image
Posted: Thu Dec 14, 2017 4:27 pm
by jdse03
.
Re: Drawing a scaled up and rotated image
Posted: Fri Dec 15, 2017 5:54 am
by zorg
Yeah, you should create canvases beforehand, since they are reusable (and you can clear them anyway).
You don't really need a gigantic canvas, just use a camera system do draw the relevant area to your canvas, which should be screen-sized at most.