✨ Se você quiser pular a leitura e pular direto para o código, encontrará aqui. Ademais, implantei um demonstração ao vivo aqui.✨
Pesquisa
Recentemente, decidi reformar algo antigo, que fiz há 4 anos por um projeto meu. Aqui está como ficou:
Naquele momento, eu escolhi usar uma biblioteca chamada Paperjs. Naquela época, essa biblioteca me dava o mais próximo do que eu queria alcançar. Como se viu, existem muito mais opções hoje, quando falamos de bibliotecas JavaScript para fazer animações com ou sem física. Antes de apresentar a minha última escolha, que você verá abaixo, eu tenho jogado com Anime.js, Velocity.js, Popmotion, Three.js, GreenSock JS, Mo.js e Matter.js. Todos eles têm vantagens e desvantagens, e como em tudo na vida, a escolha entre eles depende das necessidades específicas que se possa ter. Eu escolha Matter.js.
Conheça Matter.js
O Matter.js é um mecanismo de física JavaScript de corpo rígido em 2D. Parece complexo, mas não é. O que isto está realmente dizendo é que esta biblioteca contém todo o material necessário para criar animações físicas 2D realistas com JavaScript. Para obter informações detalhadas sobre o que o Matter.js tem a oferecer, você pode verificar as documentação. No nosso caso, tiraremos proveito principalmente do Módulo do corpoe os recursos que possui. Vamos ver como na próxima seção.
Bolas e Tubo
O componente “tubo” é fácil. É apenas um plano de fundo imagem Estou usando para criar uma ilusão de que as bolas estão voando dentro de um objeto de vidro semelhante a uma esfera. A parte interessante é o código para criar as animações e detectar as colisões entre as bolas e as paredes. Mas vamos passo a passo.
Dissemos que o “tube” é uma imagem de fundo que estou adicionando via CSS simples propriedade de fundo. Vamos ver as próprias bolas. Para eles, eu tinha duas opções – tente desenhar círculos na tela e fazê-los parecer bolas ou usar imagens simples. Escolhi a opção posterior, pois queria ter uma visão mais realista das bolas. Então, com a ajuda de um programa de processamento gráfico, um amigo meu criou para mim 75 Imagens, um para cada bola.
Tendo todos os ativos de que precisamos, agora estamos prontos para aprofundar e implementar um pouco de física com o Matter.js.
Implementar, testar, implementar, testar
Antes de ir para a animação em si, precisamos mencionar algumas coisas específicas do Matter.js. Ao criar animações com esta biblioteca, é necessário definir como mínimo:
Experimente e Jogue
No começo deste artigo, eu publiquei o link no diretório Repositório do GitHub com o código e os ativos nele. Se você quiser jogar mais, pode facilmente conferir e tentar diferentes modificações. Você pode querer brincar com as forças que estão sendo aplicadas ou com o tamanho das bolas, etc. Há muito espaço para experimentar quando falamos de Física. E é sempre divertido, especialmente quando adicionamos animações à imagem.
Conclusão
Como se vê, Matter.js é uma ótima biblioteca para fazer animações realistas em 2D, apoiadas pelas leis da física. Obviamente, existem outras opções que podemos escolher, mas, como dissemos, isso é uma questão de escolha e necessidades do projeto. Pessoalmente, eu recomendaria pelo menos tentar e ver por si mesmo. Para alguém com experiência em Flash ou similar, o Matter.js é definitivamente fácil de começar. E se você for teimoso o suficiente para continuar tentando configurações diferentes, poderá obter resultados incríveis.
Recursos
https://brm.io/matter-js/ – O site da biblioteca
https://burakkanber.com/blog/modeling-physics-in-javascript-introduction/ – artigos interessantes e bem explicados relacionados à física em JavaScript
https://spicyyoghurt.com/tutorials/html5-javascript-game-development/collision-detection-physics/ – tutorial de detecção de colisões
https://codepen.io/AlexRA96/full/egaxVV – exemplo de bola quicando
https://codepen.io/Shokeen/pen/WjKmMG?editors=1010 – exemplo de codepen com aplicação de forças
https://code.tutsplus.com/tutorials/getting-started-with-matterjs-body-module–cms-28835 – tutorial para iniciantes para você começar com o Matter.js
https://codepen.io/jh3y/pen/gOPmMyO?editors=0110 – outro exemplo legal com ursos caindo
https://codepen.io/danielgivens/pen/geKrRx – exemplo ainda mais bacana com um relógio circular e partículas dentro
https://codepen.io/dotcli/pen/NEXrQe – outro exemplo de limites circulares e partículas (meias!) dentro