{"id":201,"date":"2015-04-11T16:43:40","date_gmt":"2015-04-11T19:43:40","guid":{"rendered":"http:\/\/www.galirows.com.br\/meublog\/gideros\/?page_id=201"},"modified":"2015-04-19T10:53:07","modified_gmt":"2015-04-19T13:53:07","slug":"fisica-box2d","status":"publish","type":"page","link":"http:\/\/www.galirows.com.br\/meublog\/gideros\/outros-recursos\/fisica-box2d\/","title":{"rendered":"Outros recursos &#8211; f\u00edsica com a box2D"},"content":{"rendered":"<p>A box2D \u00e9 uma biblioteca com m\u00e9todos que simplificam a aplica\u00e7\u00e3o de f\u00edsica nas aplica\u00e7\u00f5es. A utiliza\u00e7\u00e3o da box2D na Gideros depende da inclus\u00e3o do recursos atrav\u00e9s da instru\u00e7\u00e3o <em>require &#8220;box2d&#8221;<\/em>, como ilustrado no c\u00f3digo a seguir. Para a aplica\u00e7\u00e3o faremos uso de 2 sprites da Gideros que se encontram em \/examples\/physics\/ e que s\u00e3o o grass.png e box.png.<\/p>\n<p>Ap\u00f3s adicionar a biblioteca, precisamos criar um mundo e adicionar elementos nesse mundo. A defini\u00e7\u00e3o de um mundo \u00e9 realizada atrav\u00e9s do m\u00e9todo b2.World.new() que espera at\u00e9 3 par\u00e2metros, sendo:<\/p>\n<ul>\n<li>Primeiro uma gravidade horizontal: aplicada para simular o vento. Valores positivos fazem essa gravidade \u201cempurrar\u201d para a direita e valores negativos levam para a esquerda;<\/li>\n<li>O segundo par\u00e2metro \u00e9 a gravidade: a gravidade da Terra \u00e9 muitas vezes simplificada para 9,8; e<\/li>\n<li>Como terceiro par\u00e2metro tem-se se a f\u00edsica deve ser aplicada para objetos inativos. Normalmente deixa-se os elementos sem simula\u00e7\u00e3o para diminuir o custo computacional, sendo necess\u00e1rio informar, nessa situa\u00e7\u00e3o, o valor <em>true<\/em> para m\u00e9todo que j\u00e1 o valor padr\u00e3o.<\/li>\n<\/ul>\n<p>A instru\u00e7\u00e3o seguinte mostrada n\u00e3o c\u00f3digo \u00e9 respons\u00e1vel por criar um novo corpo no mundo. Criaremos dois corpos nesse exemplo, onde o primeiro representar\u00e1 a bola e o segundo representar\u00e1 o ch\u00e3o da aplica\u00e7\u00e3o. Come\u00e7ando pela bola, foi especificado dois itens de sua cria\u00e7\u00e3o, onde primeira foi informado o tipo e como a bola ir\u00e1 mover-se utilizando a f\u00edsica do jogo, esta foi definida como din\u00e2mica e foi definida uma posi\u00e7\u00e3o inicial para in\u00edcio do objeto.<\/p>\n<p><a href=\"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-content\/uploads\/sites\/3\/2015\/04\/image057.png\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full wp-image-225 aligncenter\" src=\"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-content\/uploads\/sites\/3\/2015\/04\/image057.png\" alt=\"image057\" width=\"661\" height=\"68\" srcset=\"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-content\/uploads\/sites\/3\/2015\/04\/image057.png 661w, http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-content\/uploads\/sites\/3\/2015\/04\/image057-300x31.png 300w\" sizes=\"auto, (max-width: 661px) 100vw, 661px\" \/><\/a><\/p>\n<p>O primeiro passo para detalhar um corpo \u00e9 especificar sua forma primitiva. No c\u00f3digo abaixo est\u00e1 inicialmente instanciando uma forma de pol\u00edgono e em seguida configurando essa forma para o formato de uma caixa. Como par\u00e2metros para o m\u00e9todo <em>setAsBox<\/em> s\u00e3o fornecidos os tamanhos de metade da largura e metade da altura o objeto (como a figura box.png ser\u00e1 utilizada para representar essa forma e ela possui altura e largura de 80 pixels, foi informado o valor 40 para cada par\u00e2metro).<\/p>\n<p>Na terceira instru\u00e7\u00e3o mostrada no c\u00f3digo abaixo, \u00e9 adiciona uma s\u00e9rie de propriedades f\u00edsica ao elemento que est\u00e1 sendo especificado. O primeiro par\u00e2metro informado \u00e9 a nossa forma e depois s\u00e3o informadas\u00a0tr\u00eas propriedades principais dos corpos f\u00edsicos:<\/p>\n<ul>\n<li>Densidade (density): a densidade \u00e9 multiplicada pela \u00e1rea do formato do corpo para determinar sua massa. A base para este c\u00e1lculo \u00e9 que 1.0 \u00e9 equivalente \u00e0 \u00e1gua.<\/li>\n<li>Elastidade\/restitui\u00e7\u00e3o (restitution): usada para calcular o quanto de velocidade do objeto \u00e9 retornada depois que uma colis\u00e3o ocorre. Um valor de 1.0 significada que o objeto mant\u00e9m toda sua velocidade e nada \u00e9 perdido durante a colis\u00e3o. O valor padr\u00e3o \u00e9 0.2.<\/li>\n<li>Fric\u00e7\u00e3o (friction): A fric\u00e7\u00e3o \u00e9 aplicada quando um corpo se move atrav\u00e9s do ambiente. O padr\u00e3o \u00e9 0.3.<\/li>\n<\/ul>\n<p>As 3 linhas finais do c\u00f3digo s\u00e3o para adicionar a representa\u00e7\u00e3o gr\u00e1fica nessa forma especificada. Duas das instru\u00e7\u00f5es j\u00e1 s\u00e3o conhecidas, enquanto a instru\u00e7\u00e3o do meio utiliza o m\u00e9todo <em>setAnchorPoint()<\/em> que \u00e9 novo. Esse m\u00e9todo \u00e9 para determinar o ponto de ancoragem do gr\u00e1fico, sendo que esse ponto afeta o posicionamento. A defini\u00e7\u00e3o com os valores 0.5, desloca o ponto de origem da figura para o centro dela (o valor padr\u00e3o \u00e9 0,0).<\/p>\n<p><a href=\"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-content\/uploads\/sites\/3\/2015\/04\/image058.png\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full wp-image-227 aligncenter\" src=\"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-content\/uploads\/sites\/3\/2015\/04\/image058.png\" alt=\"image058\" width=\"657\" height=\"116\" srcset=\"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-content\/uploads\/sites\/3\/2015\/04\/image058.png 657w, http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-content\/uploads\/sites\/3\/2015\/04\/image058-300x53.png 300w\" sizes=\"auto, (max-width: 657px) 100vw, 657px\" \/><\/a><\/p>\n<p>Para adicionar o ch\u00e3o de grama, fazemos inclus\u00e3o do elemento gr\u00e1fico da grama e a posicionamos na parte inferior da tela. Para poder interagir com a f\u00edsica de nosso outro objeto, precisamos defini-la tamb\u00e9m como um corpo. O ch\u00e3o ser\u00e1 um corpo est\u00e1tico o que j\u00e1 \u00e9 padr\u00e3o do m\u00e9todo createBody(), ent\u00e3o n\u00e3o ser\u00e3o especificados valores para essa defini\u00e7\u00e3o. J\u00e1 a forma foi definida pelo m\u00e9todo EdgeShape.new() que solicita o ponto inicial e o ponto final.<\/p>\n<p><a href=\"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-content\/uploads\/sites\/3\/2015\/04\/image059.png\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full wp-image-228 aligncenter\" src=\"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-content\/uploads\/sites\/3\/2015\/04\/image059.png\" alt=\"image059\" width=\"408\" height=\"96\" srcset=\"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-content\/uploads\/sites\/3\/2015\/04\/image059.png 408w, http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-content\/uploads\/sites\/3\/2015\/04\/image059-300x71.png 300w\" sizes=\"auto, (max-width: 408px) 100vw, 408px\" \/><\/a><\/p>\n<p>Agora temos criados dois objetos e duas representa\u00e7\u00f5es gr\u00e1ficas, uma para cada objeto. A representa\u00e7\u00e3o do ch\u00e3o \u00e9 fixa j\u00e1 que est\u00e3o o corpo que representa o ch\u00e3o e seu gr\u00e1fico, parados no mesmo lugar. O mesmo n\u00e3o acontece com a caixa, onde precisaremos fazer a representa\u00e7\u00e3o gr\u00e1fica da caixa seguir o corpo que est\u00e1 sofrendo as for\u00e7as f\u00edsicas. Para fazer o acompanhamento do corpo e do gr\u00e1fico, precisamos adicionar um evento que a cada frame sincronize os dois. O c\u00f3digo abaixo realiza essa tarefa fazendo o gr\u00e1fico seguir a mesma posi\u00e7\u00e3o e \u00e2ngulo do corpo.<\/p>\n<p><a href=\"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-content\/uploads\/sites\/3\/2015\/04\/image060.png\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full wp-image-226 aligncenter\" src=\"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-content\/uploads\/sites\/3\/2015\/04\/image060.png\" alt=\"image060\" width=\"444\" height=\"129\" srcset=\"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-content\/uploads\/sites\/3\/2015\/04\/image060.png 444w, http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-content\/uploads\/sites\/3\/2015\/04\/image060-300x87.png 300w\" sizes=\"auto, (max-width: 444px) 100vw, 444px\" \/><\/a><\/p>\n<p>Uma r\u00e1pida altera\u00e7\u00e3o no c\u00f3digo: altere a gravidade horizontal para 2, incorpore ao projeto a imagem da bola e adicione ela no lugar da box.png. Em seguida, troque a defini\u00e7\u00e3o da forma da caixa para local para shape = b2.CircleShape.new(0,0,40), sendo 40 o raio correspondente da figura da bola. Teste agora o resultado e veja a f\u00edsica sendo aplicada a esse corpo agora redondo e que precisa girar.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A box2D \u00e9 uma biblioteca com m\u00e9todos que simplificam a aplica\u00e7\u00e3o de f\u00edsica nas aplica\u00e7\u00f5es. A utiliza\u00e7\u00e3o da box2D na Gideros depende da inclus\u00e3o do recursos atrav\u00e9s da instru\u00e7\u00e3o require &#8220;box2d&#8221;, como ilustrado no c\u00f3digo a seguir. Para a aplica\u00e7\u00e3o faremos uso de 2 sprites da Gideros que se encontram em \/examples\/physics\/ e que s\u00e3o [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":198,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-201","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-json\/wp\/v2\/pages\/201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-json\/wp\/v2\/comments?post=201"}],"version-history":[{"count":4,"href":"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-json\/wp\/v2\/pages\/201\/revisions"}],"predecessor-version":[{"id":233,"href":"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-json\/wp\/v2\/pages\/201\/revisions\/233"}],"up":[{"embeddable":true,"href":"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-json\/wp\/v2\/pages\/198"}],"wp:attachment":[{"href":"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-json\/wp\/v2\/media?parent=201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}