Enable 2D Physics for Sprites

CreatiCode

Introduction

After initializing a physics world for the project, we have a physics engine running in the background. However, it does not know anything about the sprites yet, so it can not do anything for us. Therefore, we need to tell the physics engine how a sprite should behave. We can also think of this step as adding an object in the physics world to represent this sprite.

For example, we can tell the physics engine “this sprite should behave like a ball that falls due to gravity”. After this step, the physics engine will move this sprite for us as if it is a ball.

Make the Sprite Behave As a Simple Shape

For most sprites in our project, we can represent them using simple shapes, such as a box or a circle. This allows the physics engine to handle collision among objects much faster.

You can use the following block to tell the physics engine how to treat the current sprite as a simple shape:

It takes 4 input parameters:

Movement Type

Fixed: A fixed object will not move or turn. This option is suitable for objects like the ground or trees.
Dynamic: A dynamic object will behave like a natural object around us. It can move or turn, and it can be pushed by forces or pulled by gravity. This option is suitable for most objects, such as balls, rocks or characters.
Movable: A movable object can not be influenced by any force, but you can set its moving speed directly. This option is most suitable for objects like moving platforms or elevators.

Object Type

Object: This type of sprite will collide with other sprites, such as balls or trees.
Sensor: This type of sprite will not collide with other sprites. In other words, other sprites can move through a sensor. This option is most suitable for objects that can be collected, such as coins or potion bottles.

Shape Type

Circle: This option will allow the physics engine to treat our sprite as a circle (a ball), no matter what’s its actual shape. The physics engine will find the smallest circle that can hold the entire sprite in it. If you would like the sprite to roll and bounce like a ball, this is a good choice. For example, this is what you get when using the circle shape for the butterfly and apple sprites.

Box: This option will allow the physics engine to treat our sprite as a box (a cube), no matter what’s its actual shape. The physics engine will find the smallest box that can hold the entire sprite in it. If you would like the object to stay up-right (instead of rolling around), the box shape is a good choice. For example, this is what you get when using the box shape for the butterfly and apple sprites.

Capsule: This option will allow the physics engine to treat our sprite as a capsule, no matter what’s its actual shape. The physics engine will find the smallest capsule that can hold the entire sprite in it. This option is most suitable for objects that are taller. For example, this is what you get when using the capsule shape for the butterfly and girl sprites:

Convex Hull: This option will allow the physics engine to find a convex shape that can hold the entire sprite in it. A convex shape is a shape that has no dent around it. Usually, you won’t use this option unless you are not happy with the 3 shapes above. This option would make the shape very close to the actual contour of the sprite, but it is usually not symmetric. For example, this is what you get when using the convex hull shape for the butterfly and girl sprites:

Debug

When this option is “Yes”, the physics engine will draw out the shape it is using (see the red shapes above). Usually you should set this option to “Yes” when you are developing a program, then set it to “No” when you are happy with the physics simulation you are getting.

Move the Costume to the Center of the Canvas

It is very important that you need to place the costume at the center of the canvas. You can select the costume, then align its center point to the center of the canvas. Without this step, the shape will not match the position of the sprite. Here is an illustration of this problem:

Make the Sprite Behave As a Compound of Multiple Shapes

Sometimes the 4 types of simple shapes described above are not accurate enough for a sprite. For example, suppose we want to make a slope for a ball using the sprite below, and we use a box shape or a convex hull shape for it, then the physics engine would treat it as the red box, and the ball won’t fall inside it:

In this case, we can use multiple convex hull shapes to piece together this sprite much more accurately. For example, the physics engine can automatically convert the shape into a few convex hull shapes like this:

To use this compound shape, you need to draw this sprite’s costume in the vector mode. You can draw one or multiple shapes in the costume, but you need to make sure their overall center is at the canvas’s center. After that, run the following block:

Compared to the first block, the only change is that we no longer need to specify a simple shape, but use 2 parameters to control how the physics engine calculates the convex hulls for us.

Curve Tolerance: A value between 0 and 1 that tells you how tolerant you are if the convex hulls do not reflect the curves in the sprite’s costume very closely. The higher the tolerance, the less accurate the result, but also the faster to calculate it.
Point Distance: This is the average distance between 2 points on the edge of the compound shape. A larger distance value will make the contour of the sprite less accurate but also faster to calculate.

You can play with an example project here:

https://play.creaticode.com/projects/e439acb8573250efdfab0186