[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 » Sun Aug 20, 2017 10:44 pm

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?
yes.png
x1 scale (should be this way for all sizes)
yes.png (1.25 KiB) Viewed 1033 times
no.png
3x scale (pixels broken down into smaller pixels)
no.png (2.81 KiB) Viewed 1033 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 » 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


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

Re: Rotating Pixels at Scale > 1?

Post by Zorochase » Mon Aug 21, 2017 1:37 am

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: 2
Joined: Mon Jun 26, 2017 10:36 am

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

Post by Rastashmup » Sat Aug 26, 2017 9:21 am

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: No registered users and 13 guests