Page 1 of 1

[SOLVED] Rotating Pixels at Scale > 1?

Posted: Sun Aug 20, 2017 10:44 pm
by Zorochase
Hello,
So I've got all my art to stick to a pixel grid. Nothing moves between pixels, even when the window is rescaled. That is, until it is rotated. The best way I can put it is, when I rotate pixel art, I expect the pixels to "reposition" themselves so that they make it look like the image has been rotated. This is how it works at 1x scale. When the window is rescaled, all pixels break down into smaller pixels that try to retain the original pixel's square shape. I've provided a couple examples below.
How do I prevent pixels from breaking down during a rotation when the window is rescaled?
x1 scale (should be this way for all sizes)
x1 scale (should be this way for all sizes)
yes.png (1.25 KiB) Viewed 3740 times
3x scale (pixels broken down into smaller pixels)
3x scale (pixels broken down into smaller pixels)
no.png (2.81 KiB) Viewed 3740 times

Re: Rotating Pixels at Scale > 1?

Posted: Mon Aug 21, 2017 1:12 am
by DekuJuice
Render your game to a canvas at your original resolution, then draw the canvas at the scale you want.

Code: Select all

function love.load()
	--Create a new canvas, the dimensions you pass to it should be your original resolution
	canvas = love.graphics.newCanvas(320, 240)
end

function love.draw()
	love.graphics.setCanvas(canvas)
	love.graphics.clear()
	
	draw_game()

	love.graphics.setCanvas()
	
	love.graphics.scale(xscale, yscale)
	love.graphics.draw(canvas)
end


Re: Rotating Pixels at Scale > 1?

Posted: Mon Aug 21, 2017 1:37 am
by Zorochase
DekuJuice wrote: Mon Aug 21, 2017 1:12 am Render your game to a canvas at your original resolution, then draw the canvas at the scale you want.

Code: Select all

function love.load()
	--Create a new canvas, the dimensions you pass to it should be your original resolution
	canvas = love.graphics.newCanvas(320, 240)
end

function love.draw()
	love.graphics.setCanvas(canvas)
	love.graphics.clear()
	
	draw_game()

	love.graphics.setCanvas()
	
	love.graphics.scale(xscale, yscale)
	love.graphics.draw(canvas)
end

That was a lot easier than I thought... thanks!

Re: [SOLVED] Rotating Pixels at Scale > 1?

Posted: Sat Aug 26, 2017 9:21 am
by Rastashmup
As a small addition I would suggest to add

canvas:setFilter("nearest","nearest")

after canvas creation. Otherwise one gets an additional blur effect by using the canvas, which may not be wanted.