Why do my sprites jitter when moving diagonally?

Question

I am working on an low resolution, isometric, pixel game in which several objects move from tile to tile. I do this with this simple interpolation:

let percent = elapsedTime / SPEED

vec.x = start.x + ( (dest.x - start.x) * percent )
vec.y = start.y + ( (dest.y - start.y) * percent )

This seems to work fine except when moving diagonally. It starts to jiggle pretty heavy. Is there a way to smooth this out?

I am using a 32x16 tile size.

edit: added video for better understanding: (video deleted)

edit: for anyone interested. I've solved it using this:

let
percent = elapsedTime / SPEED,
num = Math.round( (dest.x - start.x) * percent )


vec.x = start.x + num
vec.y = start.y + Math.floor(num / 2)

This works only for diagonal movement with 1:2 ratio tiles. I also added some stuff to make it work for all 4 diagonal directions.

Answer 1

With out code, this might be hard, but if I had to take a guess, your sprites aren't gittering, your camera is. I suspect you are moving the camera either to the exact x or y position both when having it follow your character, on horizontal and vertical movement, this will appear smooth, but when you take diagonal movemnt, since there is no exact x y location for the camera to move to, your scene ends up finding the closest value some how to move everything to.

If you look at the movement you can tell this is probably the case as your camera follows the red dot (your characters position) and thus produces jittery movements (because the red dot produces the same movements on the tiles).

There are three ways to fix this that I've seen. Allow sprite aliasing, so non integer movements can be represented (may not be practical if you aren't using OpenGL or something built off of that). Or possibly limit the directions you can move, such that you can only move in 8 directions. When you move in a diagonal direction both x and y coordinates will update by one. You may also want to slow down diagonal movement to about 70% of the cardinal direction movement speed in order to make sure you can't go faster in one direction than the other. You want to make sure that given a direction, the same number of pixels are added to each side of the screen at once each time you move in that same direction.

You'll notice in a lot of sprite based games they limit movement to either 4 way cardinal direction (manhattan) or 8 way direciton (Chebyschev).

In other games like Zelda this isn't a problem because the camera does not always have to move with the player (another way to solve this problem). For the last method, you have to make sure that one or both are updated at the same time for a given direction (for example, always update x by 1 in traversing one direction, then update y by 1 when you get a chance). updating each by one every other time causes the gittery behavior you see (x gets updated, then y, then x, then y).

This is solved my making sure that your camera moves integers at the proper slope rate for that direction. In your example you move like this (which causes un-even updates):

and you want to move like this:

Answer 2

Your guess is right. I had the same situation. It also involves transforming float coordinates to integer pixel coordinates.

I solved it in my game like this.

If X < targetX { X += V } Else if X > targetX { X -= V } ...// Duplicate the code for Y

Of course V should be actually V/sqrt(2) if you will go in both axis and V if you will go in one. Otherwise your diagonal movement will be faster.

This way when you need to go from p1 to p2, you always go diagonal with 45 degrees

At some point you will reach your targetX or targetY and you will go rest of the way in only one axis. Its not perfect but simpler and worked for me.