Drawing a scaled up and rotated image

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
jdse03
Prole
Posts: 18
Joined: Sun Oct 01, 2017 4:45 pm

Drawing a scaled up and rotated image

Post by jdse03 »

.
Last edited by jdse03 on Wed Aug 03, 2022 12:51 am, edited 1 time in total.
User avatar
zorg
Party member
Posts: 3436
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

Re: Drawing a scaled up and rotated image

Post 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.
Me and my stuff :3True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.
jdse03
Prole
Posts: 18
Joined: Sun Oct 01, 2017 4:45 pm

Re: Drawing a scaled up and rotated image

Post by jdse03 »

.
Last edited by jdse03 on Wed Aug 03, 2022 12:51 am, edited 2 times in total.
jdse03
Prole
Posts: 18
Joined: Sun Oct 01, 2017 4:45 pm

Re: Drawing a scaled up and rotated image

Post by jdse03 »

.
Last edited by jdse03 on Wed Aug 03, 2022 12:51 am, edited 1 time in total.
jdse03
Prole
Posts: 18
Joined: Sun Oct 01, 2017 4:45 pm

Re: Drawing a scaled up and rotated image

Post by jdse03 »

.
Last edited by jdse03 on Wed Aug 03, 2022 12:51 am, edited 1 time in total.
User avatar
zorg
Party member
Posts: 3436
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

Re: Drawing a scaled up and rotated image

Post 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.
Me and my stuff :3True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.
jdse03
Prole
Posts: 18
Joined: Sun Oct 01, 2017 4:45 pm

Re: Drawing a scaled up and rotated image

Post by jdse03 »

.
Last edited by jdse03 on Wed Aug 03, 2022 12:50 am, edited 1 time in total.
User avatar
Sasha264
Party member
Posts: 131
Joined: Mon Sep 08, 2014 7:57 am

Re: Drawing a scaled up and rotated image

Post 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
Attachments
Cheeeers!! Nearest scale + linear rotation! 2017-12-01 23.36.57.png
Cheeeers!! Nearest scale + linear rotation! 2017-12-01 23.36.57.png (85.48 KiB) Viewed 5492 times
Cheeeers!! Nearest scale + linear rotation! 2017-12-01 23.36.44.png
Cheeeers!! Nearest scale + linear rotation! 2017-12-01 23.36.44.png (17.75 KiB) Viewed 5492 times
jdse03
Prole
Posts: 18
Joined: Sun Oct 01, 2017 4:45 pm

Re: Drawing a scaled up and rotated image

Post by jdse03 »

.
Last edited by jdse03 on Wed Aug 03, 2022 12:50 am, edited 1 time in total.
User avatar
zorg
Party member
Posts: 3436
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

Re: Drawing a scaled up and rotated image

Post 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.
Me and my stuff :3True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.
Post Reply

Who is online

Users browsing this forum: Google [Bot] and 45 guests