0 Favourites

Camera Jittering

  • Hey everyone, I'm looking for some advice on removing jitter from my camera.

    I'm using this tutorial https://www.scirra.com/tutorials/626/making-a-smooth-following-camera?page=2 to try and create a smooth camera effect. Which is using a scroll-to behavior with the lerp function.

    However, as you can see in the gif, everything seems to be jittering quite a bit.

    This happens in both Firefox and Chrome browsers.

    Thanks in advance for any advice.

  • Just off the top of my head, do you have pixel rounding on?

  • Ooh I remember having that problem too. The thing is that for pixel art you'll need to be careful about how much you move objects so they'll align with the limited pixel grid properly by each frame update. So if you move the camera by say, 0.6 pixels per frame update you'll get movement updates like this:

    0.6 - 1.2 - 1.8 - 2.4 - 3.0 - 3.6 - 4.2 etc

    which converts to these integers:

    1.0 - 1.0 - 2.0 - 2.0 - 3.0 - 4.0 - 4.0 etc

    In this scenario the object will move one pixel every second frame, except when it's moved 3 pixels the rounded float position will make it move right up to 4 on the next frame, causing a jerk. And that's assuming the engine keeps a steady 60 fps and the camera scrolls at an even speed. Lerp doesn't account for that kind of thing and neither does the scroll-to behaviour.

    The easiest thing to do is just turn pixel rounding off. It's possible to program camera and object movement that moves perfectly along your pixel grid but it could be a hassle for the camera at least. You'd be limited on what speeds you could use too.

  • Thanks, both of you!

    I really thought the solution to this wasn't going to be more complicated, so this is a great outcome. And thanks ErekT for the detailed explanation of what's happening.

  • Glad you found it useful

  • This is useful information, thanks.

    Nice art btw

  • Basically, everything that is set to n*2 works smooth in construct2 ( or in computing in general ) I don't know why, but that is what my own experiments shown.

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • No "power of 2" "magic" involved here ; it's just pixel rounding, which does exactly what it says.

    As for n^2, it works "better" since content designed to work in n^2 can easily be accessed with data encoded on 8/16/32/64 bits, which are native data types, without waste, memory alignment or performance issues

  • No "power of 2" "magic" involved here ; it's just pixel rounding, which does exactly what it says.

    As for n^2, it works "better" since content designed to work in n^2 can easily be accessed with data encoded on 8/16/32/64 bits, which are native data types, without waste, memory alignment or performance issues

    Setting values to n2 did improve smoothness for me significantly.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)