Bowling game pins not working as expected

Hey everyone,

I’m new with BabylonJS and I’m trying to start from the basics to implement some fun ideas I have.

As one of my objectives is to learn Babylon only using JS Vanilla and not typescript, I tried to find a simple tutorial that used JS only.

I found this somewhat old tutorial about a bowling game and tried to give it a go.

However, when I tried to implement it I noticed some odd behaviors and couldn’t find out why.

Here is a Playground link replicating the problems I’m having:

It has a ball, a lane and some pins.
If you click with the mouse in the lane, it will apply an impulse to the ball.
The longer you hold the mouse click, stronger will be the impulse.
The ‘R’ key reset the pins.

I have 2 questions that was hoping you could help me with.

The first and my main issue is related to the Physics of the pin…
When you start the scene they simple ‘explode’ and start behaving odd.
If I check the debugger, I can see that their quaternation keeps being updated, but I don’t know why.
I can’t find anything in this code that could be the responsible for that.

My second question is related to the follow camera, I’m having problems to understand why a specific object is not being updated.

When you throw the ball using the mouse click, a follow camera is created on the left bottom that follows the ball.

Originally on the code it had a followObject that was used instead of the ball to avoid having the camera spinning together with the ball.

You can find it on the line 274 of the playground code commented.

On the line 275 when we have ‘followObject.position = ball.position;’, due to JS using assigments by reference, I was expecting the followObject to use the same position JS object of the ball, and thus be updated everytime the ball position changed.

But this didn’t happen, the followObject was kept at the original position and the camera didn’t follow it even when the ball was moving.

I left the original code commented so you can see how the follow camera should behave, however, it is spinning together with the ball as Im using the ball as the target.

Really appreciate if you can give some guidance on those basic concepts. :wink:

And I’m keen to keep learning more about babylon,

Regards,
RR

EDIT: Simpler playground for each problem:

1 - https://playground.babylonjs.com/#4WANIF#1
Pins doesn’t “explode” but they start moving radomly

2 - https://playground.babylonjs.com/#GKAJJE#1
Follow mesh not changing position according to the ball

I’ll start with the first question first. Can you please try to repro with a simpler PG? It makes difficult to dig/test with such a big one. Like a prepro with 1 pin mesh only.

Hey Cedric,
Thanks for the answer!

So…
The thing is that when I start removing the elements the “exploding effect” is reduced as well.

Here I tried to isolate as much as possible only keeping 3 pins and the ground:

You will notice that after some seconds, the pins start to move randomly.
It also happens with just one pin, I left 3 just to have a perspective.

I’m not sure if it is related to the high scale “explosion” on the full code but it is the only thing I was able to notice that is odd.

I don’t think it’s the same problem but it will good to rebuild 1st PG step by step so you’ll see more easily where the problem is.
This said, it’s somehow expected to have the pin to slide after a while. Friction for ground and pins was 0. It’s like having a ground perfectly smooth. With float inaccuracy, you get errors that accumulate with time.

I’ve fixed it here : https://playground.babylonjs.com/#4WANIF#2

Hey Cedric!
The pin sliding due to the friction makes sense.
Thank you for pointing it out!
I will try to identify the exact part in the first playground’s code that might be related to it later, and will send it again here on the forums.

Other than that, related to the second issue, do you have any idea why the position of the following object is not updated when the ball position changes?

Here is a simplified PG for it as well:

On line 73 we have:

follow.position = ball.position;

I was expecting to have the same JS object for both meshes as JS pass the object by reference.

but the behavior I’m getting is almost like using:

follow.position = ball.position.clone();

Let me know if you have any suggestions for this one as well.

Cheers,
RR

Internally, it might be what’s happening: position is used to compute a matrix or something but it’s not the same object as the one provided.
A good practice for that is to use parenting instead: set the camera as a child of the object you want to follow.

Setting the camera as a child of the ball also makes it spins together with the ball.

The idea was to have the follow object that wouldn’t spin just use the same position.

I only wanted to know if it was something I was doing wrong or something else like you said…

Maybe the position of the follow mesh is being updated in background and thus losing its reference.

Do you know if it is possible to avoid it being updated?

Yes, your are right, camera will spin.

Did you check this type of camera? Camera Introduction | Babylon.js Documentation

The ‘following camera’ is the one I’m using.

However,
if I define the ball as the target, it also spins.

That is why I wanted to use the follow mesh.

This is weird, I think it should not spin.
cc @PolygonalSun