Introdução ao Matter.js: o módulo Body

No tutorial anterior da série, você aprendeu sobre os módulos World e Engine no Matter.js. Os métodos disponíveis nesses dois módulos visam controlar o comportamento de vários corpos ou do mundo inteiro de uma só vez. No entanto, em algum momento será necessário ter controle sobre as propriedades dos corpos individuais em seu mundo.

Por exemplo, você pode querer aplicar alguma força em um objeto específico ou alterar seu coeficiente de atrito. Nesses casos, o módulo Body em Matter.js pode ser de grande ajuda. Este módulo contém muitos métodos e propriedades para permitir que você especifique valores para todos os tipos de atributos físicos, desde massa até coeficiente de restituição. Neste tutorial, você aprenderá sobre todos esses métodos e propriedades e como usá-los corretamente.

Dimensionamento, rotação e translação de um corpo

Você pode girar qualquer corpo rígido no mundo Matter.js usando o rotate(body, rotation) método. A rotação é relativa ao ângulo atual do corpo e não transmitirá nenhuma velocidade angular a ele. O ângulo de rotação é especificado em radianos.

Você também pode dimensionar um corpo usando o scale(body, scaleX, scaleY, [point]) método. Os parametros scaleX e scaleY especifique a quantidade de dimensionamento nas direções horizontal e vertical, respectivamente. Tenha em mente que qualquer dimensionamento também atualizará as propriedades físicas do corpo, como sua massa, área e inércia. O quarto parâmetro especifica o ponto em torno do qual ocorre o dimensionamento. Quando não especificado, o valor padrão do ponto de escala é considerado o centro do corpo.

É possível mover um corpo por um determinado vetor em relação à sua posição atual usando o translate(body, translation) método. O parâmetro translation especifica a nova posição do objeto em relação à sua posição atual. Aqui está a parte do código da demonstração que dimensiona, gira e move a caixa.

var Body = Matter.Body;
var box = Bodies.rectangle(460, 120, 40, 40);

$('.scale').on('click', function () {
    Body.scale( box, 1.5, 1.2);
});

$('.rotate').on('click', function () {
    Body.rotate( box, Math.PI/6);
});

$('.translate').on('click', function () {
    Body.translate( box, {x: -10, y: 20});
});

Configurando Velocidades e Aplicando Forças

Você também pode transmitir velocidade linear a um objeto usando o setVelocity(body, velocity) método. A aplicação de uma velocidade dessa maneira não altera o ângulo, a força aplicada ou a posição do objeto em questão. A posição do objeto ou seu ângulo provavelmente mudará, mas a biblioteca não os define especificamente para nenhum valor. Seus valores são determinados por outras forças que atuam sobre o objeto, como o atrito.

Assim como a velocidade linear, você também pode alterar a velocidade angular de um objeto usando o setAngularVelocity(body, velocity) método. Também neste caso, a posição, o ângulo e a força aplicada no objeto permanecem inalterados.

Uma coisa que você deve ter em mente é que a velocidade é um vetor em setVelocity() e um número em setAngularVelocity().

$('.linear').on('click', function () {
    Body.setVelocity( box, {x: 10, y: -10});
});

$('.angular').on('click', function () {
    Body.setAngularVelocity( box, Math.PI/6);
});

Além de transmitir velocidades aos objetos, você também pode aplicar um vetor de força neles. o applyForce(body, position, force) método pode ser usado para aplicar force vetor em um corpo de um dado position. Essa força pode ou não resultar na aplicação de torque em um determinado corpo.

O código a seguir aplica uma força bem no centro do corpo. O vetor força é {x: 0, y: -0.05}. Isso significa que a força aplicada será puramente vertical e no sentido ascendente. Você deve ter em mente que as forças verticais em direção para cima têm um sinal negativo em Matter.js. Outra coisa que vale a pena notar é quão pequeno é o número que especifica a força vertical. A força de gravitação em si tem um valor de apenas 1 em Matter.js.

O movimento da bola após a aplicação das forças parece natural, desde que a bola não colida com nenhuma das paredes ou o chão. Normalmente, quando as coisas colidem com algo, esperamos que elas se recuperem. A energia com que um objeto retorna é determinada pelo coeficiente de restituição.

No Matter.js, seu valor é definido como zero por padrão. Isso significa que qualquer objeto que tenha a restituição definida como zero e colida com outra coisa não retornará. Um valor de 1 significa que o objeto irá se recuperar com energia cinética igual à que tinha antes da colisão. Um valor como 0,5 significa que o objeto retornará apenas com 50% de sua energia cinética anterior. O valor de restituição de um objeto pode ser controlado usando o restitution chave.

Em certas simulações, pode ser necessário alterar o atrito entre diferentes corpos. Isso pode ser conseguido usando o friction, frictionAir e frictionStatic chaves.

• o friction chave especifica o valor do atrito cinético para um corpo. Pode ter um valor entre 0 e 1. Um valor de 0 implica que um corpo pode continuar se movendo indefinidamente uma vez que tenha sido colocado em movimento. A única maneira de pará-lo será aplicar alguma outra força externa. O valor final do atrito entre dois objetos é determinado usando a fórmula Math.min(bodyA.friction, bodyB.friction).
• o frictionStatic chave especifica o valor do atrito quando um corpo está em repouso. O valor padrão para atrito estático é 0,5. Um valor mais alto significa que uma quantidade maior de força será necessária para fazer o corpo se mover.
• o frictionAir A chave é usada para especificar o valor do atrito entre um corpo e o ar circundante. Um valor mais alto significa que o corpo desacelerará muito rapidamente ao se mover pelo ar. O efeito do atrito do ar não é linear.

$('.red-friction').on('click', function () {
  circleA.friction = 0.05;
  circleA.frictionAir = 0.0005;
  circleA.restitution = 0.9;
});

$('.res-friction').on('click', function () {
  circleA.friction = 0.1;
  circleA.frictionAir = 0.001;
  circleA.restitution = 0;
});

Controlar a renderização de corpos

Até este ponto, não especificamos a cor, a largura do contorno ou o estilo de traço a ser usado ao renderizar um corpo. Todas essas propriedades estão aninhadas dentro do render chave. o fillStyle aceita uma string para especificar o estilo de preenchimento que renderiza o corpo. o lineWidth aceita um número que define a largura da linha a ser usada ao criar o contorno de um corpo.

Um valor zero significa que nenhuma linha será renderizada. o strokeStyle pode ser usada para especificar o estilo de traço a ser usado ao renderizar o contorno do corpo. Você pode impedir que um corpo seja renderizado configurando o visible chave para false. A opacidade do corpo que você deseja renderizar pode ser controlada usando o opacity chave.

Você também pode usar uma imagem em vez de cores e contornos simples para renderizar um corpo. Os parâmetros para renderizar um corpo usando sprites são especificados usando um conjunto diferente de propriedades. o texture A propriedade define o caminho da imagem que deve ser usada como textura de sprite.

o xOffset e yOffset propriedades podem ser usadas para definir o deslocamento nos respectivos eixos para o sprite. Da mesma forma, você pode usar o xScale e yScale propriedades para definir a escala no eixo x e no eixo y para o sprite. Aqui está um código que substitui o fundo azul claro da nossa bola por um sprite de futebol do site Open Game Art.

var ball = Bodies.circle(90, 280, 20, {
  render: {
    sprite: {
      texture: "path/to/soccer_ball.png",
      xScale: 0.4,
      yScale: 0.4
    }
  }
});

Alterando Propriedades Físicas

Você já viu como especificar o atrito ou coeficiente de restituição para um objeto em Matter.js. Existem muitas outras propriedades cujos valores podem ser especificados da mesma maneira. Por outro lado, existem propriedades que são somente leitura e não podem ser alteradas por você.

Você pode definir a posição de um corpo no mundo usando o position key, que aceita um vetor como seu valor. Você também pode especificar a massa de um corpo usando o mass propriedade, mas então você também terá que definir um valor para o inverseMass propriedade, que é calculada usando 1/mass. Uma maneira melhor de controlar a massa de um corpo é com a ajuda do density propriedade.

Depois de alterar a densidade de um corpo, sua massa será calculada automaticamente com base em sua área. Dessa forma, você também pode diferenciar entre diferentes objetos com base em sua densidade. Por exemplo, um corpo que usa uma pedra como seu sprite deve ter densidade maior do que um corpo do mesmo tamanho que usa uma bola de futebol como seu sprite.

Algumas propriedades como speed, velocity e angularVelocity são somente leitura, mas seus valores podem ser definidos usando métodos apropriados como setAngularVelocity() e setVelocity(). Você pode ler mais sobre as diferentes propriedades do módulo Body na documentação.

Conclusão

Neste tutorial, você aprendeu sobre todos os métodos e propriedades importantes no módulo Body da biblioteca Matter.js. Conhecer essas diferentes propriedades e o que elas fazem pode ajudá-lo a criar simulações mais realistas da física da vida real. No próximo e último tutorial da série, você aprenderá sobre o módulo Composite no Matter.js.

Se você tiver alguma dúvida relacionada a este tutorial ou algumas dicas para usar a biblioteca, compartilhe-as conosco.