[TMoS Game] Debug drawing for physics

in Game Development2 years ago

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.

news.png
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.

sensor.png
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.

dynamic.png
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.png
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.

joints.png
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.

debugdraw.gif
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

Sort:  

That's interesting. So this is how a video game is made?! 😲👏💜🦄

Congratulations @smjn! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):

You distributed more than 62000 upvotes.
Your next target is to reach 63000 upvotes.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

To support your work, I also upvoted your post!

Check out the last post from @hivebuzz:

Our Hive Power Delegations to the February PUM Winners
Today is the beginning of a new Hive Power Up Month!
Hive Power Up Day - March 1st 2022
Support the HiveBuzz project. Vote for our proposal!