[SOLVED] Rotating Pixels at Scale > 1?

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
Zorochase
Prole
Posts: 21
Joined: Sun May 21, 2017 10:40 pm
Contact:

[SOLVED] Rotating Pixels at Scale > 1?

Post 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 3520 times
3x scale (pixels broken down into smaller pixels)
3x scale (pixels broken down into smaller pixels)
no.png (2.81 KiB) Viewed 3520 times
Last edited by Zorochase on Mon Aug 21, 2017 1:43 am, edited 1 time in total.
"I am a tomato. My favorite food is tomatoes. Tomatoes are the best. I eat them everyday. I love to hear them scream."
User avatar
DekuJuice
Prole
Posts: 14
Joined: Mon Nov 24, 2014 9:31 pm

Re: Rotating Pixels at Scale > 1?

Post 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

Zorochase
Prole
Posts: 21
Joined: Sun May 21, 2017 10:40 pm
Contact:

Re: Rotating Pixels at Scale > 1?

Post 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!
"I am a tomato. My favorite food is tomatoes. Tomatoes are the best. I eat them everyday. I love to hear them scream."
Rastashmup
Prole
Posts: 31
Joined: Mon Jun 26, 2017 10:36 am

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

Post 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.
Post Reply

Who is online

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