How to avoid distortion of the ball?When it moves, it deforms.

[oscaradalid]

How to avoid distortion of the ball?When it moves, it deforms.

Code: Select all

local ball_x, ball_y, x_speed, y_speed, ball_size
local canvas, escala

function love.load()
    -- Inicializa las variables de la pelota
    ball_x = 64
    x_speed = 0.1
    ball_y = 64
    y_speed = 0.1
    ball_size = 6

    -- Tamaño del lienzo
    local canvasSize = 128

    -- Inicializa el lienzo y la escala
    love.graphics.setDefaultFilter('nearest', 'nearest')
    canvas = love.graphics.newCanvas(canvasSize, canvasSize)
    canvas:setFilter('nearest', 'nearest')
    escala = love.graphics.getWidth() / canvasSize

    -- Escala fija para mantener una relación de aspecto de 1:1
    love.window.setMode(canvasSize * escala, canvasSize * escala, {resizable=true})
end

function love.update(dt)
    -- Lógica del juego
    ball_y = ball_y + y_speed
    ball_x = ball_x + x_speed

    -- Lógica de rebote en las paredes
    if ball_x > 127 - ball_size or ball_x < 1 then
        x_speed = -x_speed
    end

    if ball_y > 127 - ball_size or ball_y < 1 then
        y_speed = -y_speed
    end
end

function love.draw()
    -- Dibuja en el lienzo
    love.graphics.setCanvas(canvas)
    love.graphics.clear()

    -- Dibuja la pelota en el lienzo
    love.graphics.setColor(1, 1, 1)
    love.graphics.circle("fill", ball_x, ball_y, ball_size)

    love.graphics.setCanvas()

    -- Dibuja el lienzo escalado sin distorsión
    love.graphics.draw(canvas, 0, 0, 0, escala, escala)
end

[Azzla]

The problem is that you are scaling up the canvas in order to pixelate the circle. You've essentially "zoomed in" on the canvas' coordinate plane, which makes the circle visually snap to a grid.

If you want a pixelated circle that moves smoothly, the easiest way is to use a texture, scale that up, and draw it with nearest filtering.

I've also simplified and altered your code to do what (I think) you intended. You can just add a pixel-art texture to the ball table and draw that instead of using love.graphics.circle if you want the pixelated effect.

Code: Select all

local ball =
{
	x = 64,
	y = 64,
	dx = 1,
	dy = 1,
	speed = 200,
	radius = 16
}
local window_width = 600
local window_height = 800

function love.load()
	love.window.setMode(window_width, window_height)
	love.graphics.setDefaultFilter('nearest', 'nearest')
end

function love.draw()
	love.graphics.circle('fill', ball.x, ball.y, ball.radius)
end

function love.update(dt)
	ball.x = ball.x + (ball.dx * ball.speed * dt)
	ball.y = ball.y + (ball.dy * ball.speed * dt)
	
	if ball.x > window_width - ball.radius or ball.x < ball.radius then
		ball.dx = -ball.dx
	end

	if ball.y > window_height - ball.radius or ball.y < ball.radius then
        	ball.dy = -ball.dy
	end
end