Camera jittering

[ddabrahim]

Hi all!

I have recently noticed that when I move the camera in my project, it is cause objects to jitter.
I was thinking of the obvious and did round the camera position to make sure it is not trying to draw on to sub pixels but it doesn't help.

This is what it looks like:

camera-jitter.gif (5.52 MiB) Viewed 2251 times

This is the code
One thing to note is that in my system each object store a reference to its camera so I can have multiple cameras, a different camera for every object if I want to. But in this case I have only 1 camera for all objects.

object draw call:

Code: Select all

t.draw = function(self)
  self.camera:start()
  love.graphics.setColor(self.r,self.g,self.b,self.a)
  love.graphics.draw(self.image, self.x, self.y, self.rotation, self.scaleX, self.scaleY, self.originX, self.originY)
  self.camera:stop()
end

camera draw call:

Code: Select all

t.start = function(self)
  love.graphics.push()
   --translation uses reversed coordinates so it has to be negative to get positive effect
   --camera is centered on the object
  love.graphics.translate(-self.x + getResolutionWidth()/2, -self.y + getResolutionHeight()/2)
end

t.stop = function(self)
    love.graphics.pop()
end

camera positioning:

Code: Select all

t.setPosition(self, _x, _y)
  self.x = _x
  self.y = _y
end

Would anyone who experienced similar problems would have any idea what could possibly cause this and how to fix it? Or is there any bugs in the code that I am not aware of?

Thanks.

[dusoft]

Where is the rounding happening? Just the translate line might cause it without proper rounding / flooring.

Also this is recommended, but you might have that:

Code: Select all

love.graphics.setDefaultFilter("nearest", "nearest")

[ddabrahim]

Thanks.

I applied rounding in graphics.translate but since it didn't solved the problem, I have removed it.

setDefaultFilter("nearest", "nearest") worked, it is smooth now. No jitter. But pixels also smoothed.

blurred.png (22.97 KiB) Viewed 2203 times

Since I plan to work with pixel art, I would like to keep the pixels.

Is there any way to solve the jitter with using "linear" filter instead of "nearest" or is there any other filter or shader I could use for the pixel effect?

EDIT:// I have just realised something weird is happening.
According to the documentation:
https://love2d.org/wiki/FilterMode

"nearest" should result in pixelated images
"linear" should result in smoothed images

But in my case it is the opposite. Wondering what is happening there

[RNavega]

I suggest creating a new folder / project just to stress-test these things out in isolation.
If you can get them to work, then you know the problem is somewhere else in your code

[ddabrahim]

Thanks. Yes this is what I normally do but I didn't touched my system and Love2D for months and my brain is just not working. I was lazy and hoping it is something obvious I am missing.

So I have reproduced the problem in a minimal example and turned out it is caused by a combination of things.

1. I draw on to a canvas and then draw the canvas, this in combination with the filter did cause the jitter. If I draw directly on to the default canvas, I get no jitter. But I do want to draw on to canvases so not drawing on to canvas is not an option.

2. If I round the position of the camera it is also solve the problem, however if I want to move the camera at given speed which I do, the way I do the calculations does not allow me to round the number because I do need the decimal values. Wondering if a tween library could help me to solve this so I would move the camera over time instead of at a certain speed. It is something I'm going to look in to.

No idea what is happening with the "linear" and "nearest" filter being reversed in my system. But the result essentially the same. If I draw on to a canvas and then draw the canvas and I move the camera at a given speed, if the image is pixelated it is jitter if it's smoothed it does not jitter.

For now my only hope is that a tween library and moving the camera over time instead of at a certain speed could help me solve this.

Thank you all!

[ddabrahim]

So I have tried with the Flux Tween library. No luck unfortunately, I get the same result and jitter if drawn on to canvas and image is pixelated which I want to be.
This is the project that reproduce the problem with the tween applied to the camera:

camera-jitter-test.zip

(8.55 KiB) Downloaded 111 times

I would appreciate any ideas, suggestions if someone would care to take a look and try.
Thank you.

[gcmartijn]

Maybe you can try to round or floor each position ?

Or extract some code here viewtopic.php?f=3&t=92669

[ddabrahim]

Thanks. Unfortunately I can see jittering and flickering also in the examples that was shared in that topic.
It seems I am not the only one experiencing this problem and it is very common with pixel art.
But since not everyone experiencing, looks like the conclusion of the discussion was that it can be caused by hardware/OS limitations, problems.

So it seems partially the problem is my hardware. That is very unfortunate. Thanks anyway.

[gcmartijn]

What hardware and OS are you using?
Is it a old laptop without a good videocard ?


I thought that you don't want to use that function in the draw function.
This makes it much smoother

Code: Select all

flux = require "flux.flux"

function love.load()
    --if you change filter to linear, movement is smooth, but pixels also smoothed which I don't want
    love.graphics.setDefaultFilter("nearest","nearest")

    box = love.graphics.newImage("box1.png")
    camera = {x = 0, y = 0}

    --in my main project I do need to draw on to canvas
    myCanvas = love.graphics.newCanvas(320,200)

    love.graphics.setCanvas(myCanvas)
    love.graphics.clear()
    love.graphics.push()
    love.graphics.translate(camera.x, camera.y)
    love.graphics.draw(box,0,0,0,2,2)
    love.graphics.pop()
    love.graphics.setCanvas()
end

function love.update(dt)
    --update tween engine
    flux.update(dt)

    --tween camera to 800, 600 over 200 seconds
    --slower the movement the more noticable the jitter is
    --it is important to move the camera over time or at a certian speed
    flux.to(camera, 200, {x = 800, y = 600})
end

function love.draw()
    --draw canvas with scale to fill the entire window
    love.graphics.draw(myCanvas,camera.x, camera.y,0,800/320,600/200)
end

[ddabrahim]

I am using an iMac with 5K retina display and an AMD Radeon Pro 570x. The GPU is not great, I do actually have lot of problems with games.

Yes if I draw to canvas in Load it is much better. But the problem is that, In case I want to play an animation, I need to draw it over and over again in Update or Draw.

Also if I draw to the default canvas that much better. But I need the canvas in my project.

But thanks for looking in to this. Appreciate it.