Smooth and realistic snake animation in tile game

[vsudakov 0]

Hey guys, please advise me the algorithm for smooth snake animation in a title game.

 

What I have:

I have a snake grid-based game, the game core is separated from animation, so first I update snake coordinates, and then making interpolation and update visual representation.

For now, I have one circle sprite for one tile.

 

What is the issue:

Although animation looks smooth, I would like to make my snake more realistic, which means I don't like my snake made from circles, but I would like to have a head which could turn, body parts and a tail and I would like all of this to be smooth.

 

What have I tried:

1. I tried to use different snake part sprites.

I cannot make a smooth animation if I just apply different sprites like "body straight", "body turned 90 degrees", "head", "tail"; I can only apply these for a step animation which is not smooth of course.

 

2. I created a bunch of circle sprites which follow the head and move the head sprite only, other sprites following each other. It created a smooth movement and it made the snake look like one whole snake and it handled turns perfectly,

but when there are any lags in animation, there is a hole in snake because head moves too far and next sprite skips a lot too 

 

Can you please point me in the right direction, I would like to create something like this and the main issue right now that I don't know how to rotate sprites properly so they look like a whole snake and avoid this issue with a "hole in snake". Thanks, guys!

 

[RagingPixel 7]

Hey @vsudakov

Take a look at https://jsbin.com/nikikirova/edit?js,output

Best regards,