Getting Started With Matter.js: Introduction

Matter.js is a 2D rigid body physics engine written in JavaScript. This library can help you easily simulate 2D physics in your browser. It provides many features, such as the ability to create rigid bodies and assign physical properties such as mass, area, or density. You can also simulate different types of collisions and forces, such as gravity friction.

Matter.js supports all mainstream browsers. Additionally, it is suitable for mobile devices as it detects touches and is responsive. All of these features make it worth your time to learn how to use the engine, as this makes it easy to create a physics-based 2D game or simulation. In this tutorial, I will cover the basics of this library, including its installation and usage, and provide a runnable example.

Installation

You can install Matter.js with the following command using a package manager like NPM:

npm install matter-js

You can also get links to the library from the CDN and include it directly in your project like this:

<!-- CDN链接 -->

Matter.js frequently publishes updates, which may require some minor modifications to your code to make it work properly. The examples in this tutorial are based on version 0.18.0.

A basic example

The best way to learn Matter.js is to look at some actual code and understand how it works. In this section, we will create some objects and introduce the required code line by line.

const Engine = Matter.Engine,
    Render = Matter.Render,
    Runner = Matter.Runner,
    Bodies = Matter.Bodies,
    Composite = Matter.Composite;

const iEngine = Engine.create();
const iRunner = Runner.create();

const iRender = Render.create({
  element: document.body,
  engine: iEngine,
  options: {
    width: 800,
    height: 400,
    wireframes: false,
    background: "white"
  }
});

const boxA = Bodies.rectangle(400, 200, 80, 80);
const ballA = Bodies.circle(380, 100, 40, 10);
const ballB = Bodies.circle(460, 10, 40, 10);
const ground = Bodies.rectangle(400, 380, 810, 60, { isStatic: true });

Composite.add(iEngine.world, [boxA, ballA, ballB, ground]);

Render.run(iRender);

Runner.run(iRunner, iEngine);

We first create aliases for all Matter.js modules that may be needed in the project.

Matter.Runner module allows you to access the game loop for continuous updates to the engine and your world.

Matter.Composite module allows you to create collections, constraints, or other composite objects of objects. A complex can contain a single object or an entire simulation.

The next line uses the Matter.Engine method of the create([settings]) module to create a new engine. Similarly, we also created a new runner and a new renderer. The settings parameter in the above method is actually a key-value pair object that overwrites the default values ​​of certain properties related to the engine. For our example, we have left everything as default.

For example, you can control the global time scaling factor for all objects in the world. Setting a value less than 1 will cause the world to interact in slow motion. Similarly, values ​​greater than 1 will make the world fast. You will learn more about the Matter.Engine module in the next tutorial in this series.

After

, we use the Matter.Render method of the create([settings]) module to create a new renderer. Like the Engine module, the settings parameter in the above method is an object for specifying different options for the parameter. You can use the element key to specify the elements that the library should insert into the canvas. Similarly, you can also use the canvas key to specify the canvas elements that should render the Matter.js world.

There is a engine key that you can use to specify the engine you apply to the rendering world. There is also a options key that actually accepts an object as its value. You can use this key to set values ​​for different parameters, such as width or height of the canvas. You can also turn the wireframe on or off by setting the value of the wireframe key to true or false respectively. We also make the canvas color in our world white by setting the value of the background to white.

The next few lines create different objects that will interact in our world. These objects are created in Matter.js using the Matter.Bodies module. In this example, we only use the circle() and rectangle() methods to create two circles and a rectangle. Other methods can also be used to create different polygons.

After creating objects, we need to add them to the world of our choice using the

method in the Matter.Composite module. After adding the necessary objects to our world, we just need to run the runner and renderer using the add() method in our respective modules. This is basically all the code you need to create and render in the Matter.js world. run()

The code at the beginning of this section creates the following results.

Common Matter.js modules

There are more than 20 different modules in Matter.js. All of these modules provide different methods and properties that are useful for creating different types of simulations and allow you to interact with them. Some of these modules handle collisions, while others handle rendering and simulation.

The examples in the previous section use four different modules to handle rendering, simulation, and object creation. In this section, you will learn about the role of some commonly used modules in Matter.js.

• Engine: You need an engine to update the simulation of the Matter.js world. The Engine module provides different methods and properties that allow you to control the behavior of different engines.
• Render: A renderer is required to create an actual object that the user can see in the simulation. You can use it to develop basic games that support elves and more.
• Runner: Objects in any world you simulate will constantly interact with each other. The runner module handles these continuous updates to the engine and the world.
• Bodies: Bodies module contains different methods that can help you create rigid bodies with common shapes such as circles, rectangles, or trapezoids.
• Body: This module provides you with different methods and properties for creating and manipulating rigid bodies you create using functions in the Bodies module. This module allows you to scale, rotate, or translate a single object. It also has functions that allow you to specify the velocity, density, or inertia of different objects. Since there are many functions, the third tutorial in this series only discusses the methods and properties available in the Body module.
• Composites: Similar to the Bodies module, this module contains different methods that you can use to create composite objects with common configurations. For example, you can create a stack or pyramid of rectangular boxes using a single method in the Composites module.
• Composite: Composite module has various methods and properties that allow you to create and manipulate composite objects. You can read more about the Composite and Composites modules in the fourth tutorial in this series.
• Constraint: This module allows you to create and manipulate constraints. You can use constraints to ensure that two objects or a fixed world space point and an object are kept at a fixed distance. This is similar to connecting two objects through reinforcement. You can modify the stiffness of these constraints so that the rod starts to be more like a spring. Matter.js uses constraints when creating Newtonian pendulum or chain complexes.
• MouseConstraint: This module provides you with different methods and properties that allow you to create and manipulate mouse constraints. This is useful when you want different objects in the world to interact with the user.

The final thought

This tutorial is intended to introduce you to the Matter.js library. With this in mind, I've provided a quick overview of the functionality and installation of the library. The basic example involving two circles and a square shows how easy it is to create a simple simulation using the library.

Since Matter.js has many modules, each adding its own unique approach to the engine, I've already made a brief summary of some common modules. The rest of this series will focus on explaining these commonly used modules in more detail.

This post has been updated with contributions from Monty Shokeen. Monty is a full stack developer who also loves writing tutorials and learning new JavaScript libraries.

The above is the detailed content of Getting Started With Matter.js: Introduction. For more information, please follow other related articles on the PHP Chinese website!