How can I improve the physics of this game?

Questions
1

I’m recreating the classic bricks game in React Three Fiber, but with a store where players can purchase items and possibly other features as well.

I just finished implementing the store functionality today, but I’ve noticed that the game’s physics feel really off—sometimes even buggy and unresponsive. For example, in the video, you can see the ball bouncing off the floor when it shouldn’t.

I’m using Rapier for physics, but since I have little experience with it (aside from maybe one project), I relied on AI for about half of the implementation.

Here’s the GitHub repo: GitHub - PrakharGupta36/Bricks
Live demo: https://bricks--r3f.vercel.app/ (beware of the physics!)

I’d really appreciate some help from someone experienced with Rapier!

2

Looks pretty good… the framerate has some variability which is making the physics appear less smooth…
I notice your canvas has a fancy border with drop shadow? Sometimes those kinds of css effects can tank performance.

r.e. the physics… I think maybe increasing the restitution on the ball/bricks to get more action out of the bounces…
r.e. the ball hitting the floor… that’s something you’ll have to check for or detect better, probably by adding a collision callback with the outer box and checking for the ball to hit the bottom plane.

1 Like
3

Thx for the advice. I didn’t notice that increasing the restitution could help getting the game more lively.

1 Like