Best Practices with Physics for a Board Game (Angular Project)

Questions
1

Hello First of all I want to say, that I started working with babylon one week ago and so far enjoyed it a lot.
Here are some good Links I want to share that helped me getting started with the project structure:

The reason why im writing is not that I want my concrete problems solved. If you have a solution for me I would take it for sure, but that’s not the point.
Im more interested about the best practices when creating a board game in general.

  • Should I move the meshes by position change or with impulse vector?
  • Which are the right masses for the meshes?
  • How to move intersecting meshes and keep them standing upwards?
  • What does restitution do?
  • Whats the best way to rotate Meshes? Rotation or rotationQuaternion?
  • Is Colyseus a good way to sync the meshes (position and rotation)?

What I want do do
I played around with some features of Babylon. At some point I added the skybox and physics which lead to some questions in my mind.
I want to develop a board game like monopoly. Here is a screenshot of what I did so far:

board1
board11565×937 217 KB

board2
board21335×940 204 KB

What I tried so far
My first goal is that the board is dragable to both sides on the x-Axis in a given range (pictures above). I solved this by adding a PointerDragBehavior to the Board which checks if the new position would be in range before moving.For the figures I did the same but without the range check so they can be moved from the table.

My second goal is that the figures can fall from the table. Therefore I added PhysicsImpostor to the table:

table.physicsImpostor = new BABYLON.PhysicsImpostor(table,
BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, friction: 1, restitution: 0 }, this.scene);

And for the figures:

figure.physicsImpostor = new BABYLON.PhysicsImpostor(figure, BABYLON.PhysicsImpostor.MeshImpostor, { mass: 1, friction: 0.1, restitution: 0 }, this.scene);
This makes the figures stand on the table.
So far so good.

My third goal is that the figures can stand on the board. Therefore I need to apply a PhysicsImpostor to the board too correct? Same way do did before.

this.boardLeft.physicsImpostor = new BABYLON.PhysicsImpostor(this.boardLeft,*
BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0.01, friction: 0.01, restitution: 0 }, this.scene);

this.boardRight.physicsImpostor = new BABYLON.PhysicsImpostor(this.boardRight,*
BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0.01, friction: 0.01, restitution: 0 }, this.scene);

If I do this, the the figures are be behaving in a strange way like rotating around after movement.

My fourth goal is that if I move the board, the figures standing on it, should also be moved.
I solved that by moving all intersecting meshes in the PointerDragBehavior mentioned above.

// Move all intersecting figures
this.scene.meshes.forEach(mesh => {
if (mesh.parent == null && (mesh.name.startsWith(‘sk-figure’))) {
// Mesh and childMeshes (true)
if (mesh.intersectsMesh(this.brettLeft, true, true)) {
mesh.position.x += event.delta.x;
}
}
});

My observations concluded

  1. No Impostor set on the board + the positions are by changed by changing the position-Attribute (mesh.position.x, mesh.position.y) → The Figures do not stand on the board because they don’t realize it as a collider
  2. BoxImpostor on the board with mass: 0 → Board cant be moved with a simple position change; somehow it is working if figures is standing on it
  3. BoxImpostor on the board with mass: 1 → Movement is possible but the boards are pushing against each other and the firgures are sometime behaving strange (rotation…); The board can move behind the defined range because the position is calculated by the physics engine
  4. BoxImpostor on the board and position change by an impulse-vector → The board can move behind the defined range
  5. I had no success with trying to disable the physics while dragging or make the collider sleep for some time.

What I didn’t try yet

  1. Make separate collider boxes for the board with visible=false and apply the Impostor only on them

Skybox
Another problem that I have is the skybox. What I want to achieve is something like that: https://www.shangshouculture.com/
Aside from the mountains in the background. I found it in the coummunity project section.
I tried around with the skybox and its attributes but cant change the color of the sky.
What has to be done reach such an effect?

I hope I described my problems in a understandable way =)
If i should provide more code just let me know. Is there a way to create new playgrounds?

Any kind of answer is welcome. Have a nice day!

2

Hello and welcome

let me summon the master of Physics @RaananW

3

Awesome questions! Let’s start :slight_smile:

  1. It depends! If you can move them with impulses, it will be ideal. But this is not really an option most (if not all) if the time. You don’t want to give your objects a push to get them to a certain position, you want them to BE there. And this will require you to change the position. The downside of change the position is that if the object has velocity defined it will still be there when you change position. so this is something you should know. If i want to reset an object and change its position, i always tend to reset linear and angular velocity.
  2. Mass influences (mostly) the collisions. So, whatever fits you. Just like in the real world, they will fall down at the same speed :slight_smile:
  3. That’s very “not physicy” :slight_smile: What you can do it make an object’s bottom so heavy (using joints) that it won’t tip over. I don’t have a proper example for this right now, but this should work. If it does tip over (you can check its direction every few frames) reset its rotation.
  4. How much force is maintained when this object collides with a different one. 1 would be - infinite bouncing, 0 would be - don’t bounce at all.
  5. quaternion. rotation stops working when you use a physics engine
  6. Anything goes! as long as it works for you.

I am very happy you decided to use a physics engine (which makes sense a lot of times), but i think in your case (based on what you wrote) the simpler collision system will be better. Performance-wise it will be much better, and it will simplify your development for sure. It will be a little less “physics-based”. Collision documentation is here - https://doc.babylonjs.com/babylon101/cameras,_mesh_collisions_and_gravity#cameras-mesh-collisions-and-gravity

If you do want to stick with a physics engine, we can dive into the rest of the questions.

About the skybox, you will need to find the right images to use in your skybox. That would be the best place to start - https://doc.babylonjs.com/how_to/skybox

1 Like
4

Hello @RaananW

thank you for your answers which helped me a lot =)

For now i disabled the physics at all. I think its a tradeoff between a much simpler development (expecially when syncing the mesh position) and the natural feeling, which you get with physics. As you said before.

Regarding my rotaion questions … I solved it by using the rotate() funtion,but resetting it before to the Verctor.Zero(). Together with an UI-Slider its all i wanted =) I dont use the quaternions at all. Or are the set automatically when using the rotate() function?

I will write my further outcomings within the next days.

1 Like