Introdução ao Matter.js: introdução

Matter.js é um mecanismo de física de corpo rígido 2D escrito em JavaScript. Esta biblioteca pode ajudá-lo a simular facilmente a física 2D no navegador. Ele oferece muitos recursos, como a capacidade de criar corpos rígidos e atribuir propriedades físicas como massa, área ou densidade a eles. Você também pode simular diferentes tipos de colisões e forças como gravidade e atrito.

Matter.js suporta todos os principais navegadores, incluindo IE8+. Além disso, é adequado para uso em dispositivos móveis, pois pode detectar o toque e tem capacidade de resposta. Todos esses recursos fazem com que valha a pena investir seu tempo para aprender a usar o mecanismo, pois você poderá criar jogos ou simulações 2D baseados em física facilmente. Neste tutorial, abordarei o básico desta biblioteca, incluindo sua instalação e uso, e fornecerei um exemplo funcional.

Instalação

Você pode instalar o Matter.js usando gerenciadores de pacotes como o NPM com a ajuda dos seguintes comandos:

npm install matter-js

Você também pode obter um link para a biblioteca de um CDN e incluí-lo diretamente em seus projetos como este:

O Matter.js frequentemente lança atualizações que podem exigir que você faça pequenas modificações em seu código para que funcione. Os exemplos neste tutorial são baseados na versão 0.18.0.

Um exemplo básico

A melhor maneira de aprender sobre o Matter.js é ver algum código real e entender como ele funciona. Nesta seção, criaremos alguns corpos e passaremos pelo código necessário linha por linha.

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);

Começamos criando aliases para todos os módulos Matter.js que podemos precisar em nosso projeto.

o Matter.Engine O módulo contém métodos para criar e manipular mecanismos. Os motores são necessários em um projeto para atualizar a simulação do mundo.

o Matter.Render module é um renderizador básico baseado em tela HTML5. Este módulo é necessário para visualizar diferentes motores. Os cálculos feitos pelo motor para diferentes corpos em uma simulação são mostrados visualmente aos usuários com a ajuda deste módulo. Por exemplo, o módulo de mecanismo pode calcular onde um objeto deve estar e o módulo de renderização o desenhará lá.

o Matter.Runner módulo lhe dá acesso a um loop de jogo para atualizar continuamente o motor e seu mundo.

o Matter.Bodies módulo permite que você crie objetos de corpo rígido. Outro módulo semelhante chamado Matter.Body permite manipular corpos individuais.

O último módulo que carregamos é o Matter.Composite módulo que permite criar uma coleção de corpos, restrições ou outros objetos compostos. Um composto pode consistir em um único corpo ou em toda a simulação.

A próxima linha usa o create([settings]) método do Matter.Engine módulo para criar um novo motor. Da mesma forma, também criamos um novo runner e um novo renderizador. o settings O parâmetro no método acima é na verdade um objeto com pares chave-valor para substituir os valores padrão de algumas propriedades relacionadas ao mecanismo. Mantivemos tudo no valor padrão para nosso exemplo.

Por exemplo, você pode controlar o fator de escala global de tempo para todos os corpos do mundo. Definir um valor menor que 1 fará com que o mundo interaja em câmera lenta. Da mesma forma, um valor maior que 1 tornará o mundo acelerado. Você aprenderá mais sobre o Matter.Engine módulo no próximo tutorial da série.

Depois disso, usamos o create([settings]) método do Matter.Render módulo para criar um novo renderizador. Assim como o módulo Engine, o parâmetro settings no método acima é um objeto usado para especificar diferentes opções para o parâmetro. Você pode usar o element key para especificar o elemento onde a biblioteca deve inserir a tela. Da mesma forma, você também pode usar o canvas key para especificar o elemento canvas onde o mundo Matter.js deve ser renderizado.

Há um engine chave que você pode usar para especificar o mecanismo que deve ser usado para renderizar o mundo. Há também um options chave que realmente aceita um objeto como seu valor. Você pode usar esta chave para definir valores para diferentes parâmetros, como o width ou height da lona. Você também pode ativar ou desativar os wireframes definindo o valor de wireframe chave para true ou false respectivamente. Também tornamos a tela para o nosso mundo na cor branca, definindo o valor do plano de fundo para branco.

As próximas linhas criam diferentes corpos que irão interagir em nosso mundo. Os corpos são criados com a ajuda do Matter.Bodies módulo em Matter.js. Neste exemplo, acabamos de criar dois círculos e um retângulo usando o circle() e rectangle() método. Outros métodos também estão disponíveis para criar diferentes polígonos.

Depois de criarmos os corpos, precisamos adicioná-los a um mundo de nossa escolha usando o add() método do Matter.Composite módulo. Depois de adicionar os corpos necessários ao nosso mundo, só precisamos executar o runner e o renderizador usando o run() método dos respectivos módulos. Esse é basicamente todo o código que você precisa para criar e renderizar um mundo no Matter.js.

O código no início desta seção cria o seguinte resultado.

Módulos comuns do Matter.js

Existem mais de 20 módulos diferentes no Matter.js. Todos esses módulos fornecem métodos e propriedades diferentes que são úteis para criar diferentes tipos de simulações e permitem que você interaja com elas. Alguns desses módulos lidam com colisões, enquanto outros lidam com renderização e simulação.

O exemplo da seção anterior usou quatro módulos diferentes para lidar com a renderização, simulação e criação de corpos. Nesta seção, você aprenderá sobre as funções de alguns módulos comuns disponíveis no Matter.js.

• Motor: você precisa de mecanismos para atualizar as simulações do seu mundo Matter.js. o Engine O módulo fornece diferentes métodos e propriedades que permitem controlar o comportamento de diferentes mecanismos.
• Renderizar: um renderizador é necessário para você criar corpos reais em sua simulação que os usuários possam ver. Você pode usá-lo para desenvolver jogos básicos com suporte para sprites etc.
• Corredor: Corpos em qualquer mundo que você simular irão interagir uns com os outros continuamente. O módulo runner lida com essas atualizações contínuas do motor e do mundo.
• Corpos: O Bodies O módulo contém diferentes métodos para ajudá-lo a criar corpos rígidos com formas comuns, como círculo, retângulo ou trapézio.
• Corpo: Este módulo fornece diferentes métodos e propriedades para criar e manipular os corpos rígidos que você criou usando as funções do Bodies módulo. Este módulo permite dimensionar, girar ou transladar corpos individuais. Ele também tem funções para permitir que você especifique a velocidade, densidade ou inércia de diferentes corpos. Por causa de tantas funções, o terceiro tutorial desta série discute apenas os métodos e propriedades disponíveis no módulo Body.
• Compósitos: Assim como o Bodies módulo, este módulo contém diferentes métodos que você pode usar para criar corpos compostos com configurações comuns. Por exemplo, você pode criar uma pilha ou pirâmide de caixas retangulares usando apenas um único método com a ajuda de Composites módulo.
• Composto: O Composite O módulo possui métodos e propriedades que permitem criar e manipular corpos compostos. Você pode ler mais sobre o Composite e Composites módulos no quarto tutorial da série.
• Restrição: Este módulo permite criar e manipular restrições. Você pode usar uma restrição para garantir que dois corpos ou um ponto fixo no espaço do mundo e um corpo mantenham uma distância fixa. É semelhante a conectar dois corpos através de uma haste de aço. Você pode modificar a rigidez dessas restrições para que a haste comece a agir mais como molas. Matter.js usa restrições ao criar um berço de Newton ou um composto de cadeia.
• Restrição de Mouse: Este módulo fornece métodos e propriedades que permitem criar e manipular restrições de mouse. Isso é útil quando você deseja que diferentes corpos no mundo interajam com o usuário.

Pensamentos finais

Este tutorial foi feito para apresentar a você a biblioteca Matter.js. Tendo isso em mente, forneci uma visão geral rápida dos recursos e instalação da biblioteca. O exemplo básico envolvendo dois círculos e uma caixa mostra como é fácil criar simulações simples usando a biblioteca.

Como o Matter.js tem muitos módulos, cada um dos quais adiciona seus próprios métodos exclusivos ao mecanismo, escrevi um breve resumo de alguns módulos comuns. O restante da série se concentrará em ensiná-lo sobre esses módulos comuns com mais detalhes.

Este post foi atualizado com contribuições de Monty Shokeen. Monty é um desenvolvedor full-stack que também adora escrever tutoriais e aprender sobre novas bibliotecas JavaScript.