[TMoS Game] Debug drawing for physics

Visuals are nice for debugging

To allow for easier debugging and quicker configuration of physics, I have added drawing of data from the Rapier physics world. PixiJS has a special class called Graphics that can be used to draw primitive shapes of various sorts. There is a simple example on their site for the curious to play around with.

Physics debug drawing en masse. Image Jens Nilsson

Using this functionality it was possible to add drawing of the different types of colliders, joints and objects that I have derived. While it would be useful to have an editor to create and position colliders for art, being able to do it in text and see the result instantly is nearly as good. At least for now the time spent vs usefulness ratio felt optimal.

A look at the various drawing options

The physics can be drawn in various configurations. Showing only static, dynamic or perhaps joints. The drawing can be done on its own, or on top of the regular game art. When creating gameobjects for the game it is possible to configure many types of colliders with different usages. Lets take a look at the player.

Drawing sensors. Image Jens Nilsson
The player has two sensors. Sensors are colliders that register contact with other colliders, but do not physically collide. The large box is used to check collisions with other objects, for example in the current test build the walls changes colors when a collision is registered. The small circle sensor in the center of the player, is used to detected when the player is in the water and if so apply the refraction effect to the player art.

Drawing dynamic colliders. Image Jens Nilsson

The player body that collides with other objects consists of four colliders. A circle for the head, a larger rectangle for torso and two smaller rectangles for the "feet". It is possible to configure what object (or even specific collider) collides with what other objects (or colliders). The player collides with most other objects. The rope however is the opposite, it only collides with static colliders, meaning walls and other static, unmovable objects.

Code that configures the player physics. Image Jens Nilsson

Creating the colliders is fairly straightforward, but takes up a bit of space. Using copy & paste and having code completion with "at the prompt"-documentation, does make it faster than it might look. When the colliders are created it is easy to tweak the size and position as the game hot reloads on the changes.

Joint drawing. Image Jens Nilsson

Joints are drawn as circles where they are anchored and a line between the anchors. In the image I changed the first joint from a revolute type to a prismatic type. A revolute joint only allows movement that rotates, and a prismatic joint only allows for movement that translates. Rapier currently supports these two types + a fixed type, a joint that allows no movement.

Lets end this post with a gif showing all the debug drawing active. In addition to what we have looked at so far, this adds drawing of static physics and bounding boxes as well.

Debug over regular art, followed by debug only. Image Jens Nilsson

Thanks for reading!

---

Spelmakare is game development using web technologies.

Spelmakare.se
Discord
GitHub
Play Hive P v. S