How to make a smooth camera/object motion?

For example, I did this game ru.y8.com/games/geometry_ball

The camera motion is very jerky

I did lerp motion between the current camera pos and animated through tween(expected position) over 0.5 sec, the motion should be smooth, but there are always some jumps in motion, while the game is working on full fps, even on 140 fps

To make the ball motion smooth, just use the bullet behavior or "set x to self.x+1200*dt" instead of the tween every 0.5 seconds.

Another thing to try is use lerp in a frame independent way.

set scrollx to lerp(scrollx, ball.x, exp(-200*dt))

or

set scrollx to lerp(scrollx, ball.x, 1-0.001^dt)

To make the ball motion smooth, just use the bullet behavior or "set x to self.x+1200*dt" instead of the tween every 0.5 seconds.

Another thing to try is use lerp in a frame independent way.

set scrollx to lerp(scrollx, ball.x, exp(-200*dt))

or

set scrollx to lerp(scrollx, ball.x, 1-0.001^dt)

tried both options for camera and bullet for ball motion, jerky motion increased Probably an issue here, very fast motion and sharp clean graphics, which make the jerky motion even more noticeable

btw on mobile, it looks better on full screen, but on the desktop, in iframe, very intermittent. especially when fps drops

It still is jerky huh?

To be completely smooth we’d want every frame to have the exact same frame time and no frames skipped. We have some control over that with how much logic and rendering we do per frame, but it can still vary per browser or machine. Btw I wasn’t really noticing much jerky motion with your game.

It’s probably easier to notice the frame variance when moving things in straight lines with constant speeds.

Anyways, only other suggestion besides using lerp like that to do an ease out, is you can give the camera velocity and do some math to do a damped spring to move the camera. Tune the two values from 0 to 1.

Var vx=0

Compare: dt > 0

-- add -0.005*(scrollx-player.x)/dt-0.1*vx to vx

-- set scrollx to scrollx+vx*dt

It still is jerky huh?

To be completely smooth we’d want every frame to have the exact same frame time and no frames skipped. We have some control over that with how much logic and rendering we do per frame, but it can still vary per browser or machine. Btw I wasn’t really noticing much jerky motion with your game.

It’s probably easier to notice the frame variance when moving things in straight lines with constant speeds.

Anyways, only other suggestion besides using lerp like that to do an ease out, is you can give the camera velocity and do some math to do a damped spring to move the camera. Tune the two values from 0 to 1.

Var vx=0

Compare: dt > 0

-- add -0.005*(scrollx-player.x)/dt-0.1*vx to vx

-- set scrollx to scrollx+vx*dt

thank you for the advice, but it is still not working, the issue is, sudden jumps, fps is stable, CPU stable at 4%, GPU at 9%, but sometimes some lags are happening and make drops in the motion