Fun with cloth physics and meshes
Playing around with cloth physics and meshes give fun and interesting results. Use it to create a net for a football goal or a basketball hoop. I've included a complete example of the technique, and you can use it in your own game!
Updated: Jul 26, 2023
Published: Jul 22, 2023
How I created a basketball hoop using cloth physics and a mesh
I participated in yet another game-jam, WamJam. I think it's becoming an addiction. You can play my game on Itch.io (it works best on mobile.) As always when I create a game for a jam, I try to focus on one thing and work around that. I wanted to learn more about meshes, and thought it would be a good idea to create a combination of cloth physics and mesh to simulate a basketball hoop. Here's how the end result looks like.
Notice how the net is reacting to the balls hitting it? Using the technique I describe in this blog post will help you with the tools to create something similar.
This blog post will be focused on using the same technique I used for the hoop, but focus on a single image instead. I've picked the famous Phaser logo in this blog post.
Creating the mesh
A mesh in this context is just a way of representing how the image should be rendered on the screen. We partition the image into several vertices connected in a grid of triangles (the yellow and green grid we see on the main image of the Phaser logo.)
I'm using Phaser in my examples. We can create a mesh by loading an image, and use Phaser's built in function to convert the image to a mesh, and partition the image into our grid of vertices. Note that this only works with WebGL.
ourScene.js
class Level extends Phaser.Scene {
mesh;
preload() {
this.load.image('example', 'assets/sprites/phaser3-logo.png');
}
create() {
this.createMesh();
}
createMesh() {
const mesh = this.add.mesh(300,300, 'example');
// Create the mesh grid
Phaser.Geom.Mesh.GenerateGridVerts({
width: 412, // width of image
height: 93, // height of image
texture: 'example',
mesh,
widthSegments: 5,
heightSegments: 2,
});
// need to call it once to make setOrtho work for some reason
mesh.panZ(1);
// make the mesh visible in the scene
mesh.setOrtho(mesh.width, mesh.height);
this.mesh = mesh;
}
}Creating the cloth physics
I'm not going to describe the technical parts of cloth physics, but I will go through how you can set it up and use it. Phaser has a good cloth physics example on their official home page, and I recommend taking a look to play around with it.
A cloth is very similar to the structure we created for our mesh. It's a series of vertices that make up a grid of rectangles. The cloth follows the rules of the physics engine, matter.js in this example, and it behaves similar to what we would expect a piece of cloth would be in the real world. We create it using Phaser's built in function. We define the position, width and height, as well as how large each cell should be.
ourScene.js
class Level extends Phaser.Scene {
cloth;
createCloth() {
const group = this.matter.world.nextGroup(true);
const particles = {
friction: 0.00001,
collisionFilter: { group: group },
render: { visible: false }
};
const constraints = { stiffness: 0.06 };
// softBody signature (x, y, columns, rows, columnGap, rowGap, crossBrace, particleRadius, particleOptions, constraintOptions)
const cloth = this.matter.add.softBody(
250, 400, 6, 3, 65, 35, false, 8, particles, constraints
);
// Crete two anchors, to prevent the cloth from collapsing
cloth.bodies[0].isStatic = true;
cloth.bodies[5].isStatic = true;
this.cloth = cloth;
}
}