{"id":150,"date":"2015-04-10T20:56:47","date_gmt":"2015-04-10T23:56:47","guid":{"rendered":"http:\/\/www.galirows.com.br\/meublog\/gideros\/?page_id=150"},"modified":"2015-04-11T16:27:40","modified_gmt":"2015-04-11T19:27:40","slug":"animacao-movieclip","status":"publish","type":"page","link":"http:\/\/www.galirows.com.br\/meublog\/gideros\/capitulo-1-introducao\/animacao-movieclip\/","title":{"rendered":"Introdu\u00e7\u00e3o a codifica\u00e7\u00e3o – adicionar anima\u00e7\u00e3o (movieclip)"},"content":{"rendered":"

A anima\u00e7\u00e3o em jogos \u00e9 um recurso extremamente utilizado e por isso um conceito essencial para o desenvolvimento. Sua utiliza\u00e7\u00e3o parte do desenvolvimento pelos artistas dos sprites<\/em> animados de elemento (um personagem, uma paisagem ou um objeto do jogo) e posteriormente s\u00e3o adicionados ao jogo.<\/p>\n

Na Gideros, a anima\u00e7\u00e3o pode ser implementada a partir de um movieclip<\/em>, que receber\u00e1 imagens (normalmente armazenadas em um vetor). Essas imagens precisam ser feitas de maneira que sua intercala\u00e7\u00e3o gere a percep\u00e7\u00e3o de um movimento. A figura abaixo mostra 3 partes (frames) da anima\u00e7\u00e3o que, com a intercala\u00e7\u00e3o de tempos em tempos delas, gerar\u00e3o uma anima\u00e7\u00e3o de caminhar.<\/p>\n\n\n\n
\u00a0\"image049\"<\/td>\n\u00a0\"image048\"<\/td>\n\u00a0\"image047\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Figura 14. Sprites que ser\u00e3o utilizados na anima\u00e7\u00e3o<\/p>\n

Considerando que essas imagens j\u00e1 est\u00e3o incorporadas ao projeto (conforme mostrado anteriormente), criamos um vetor adicionando em cada \u00edndice do vetor um frame de imagem na sequencia da anima\u00e7\u00e3o. O c\u00f3digo abaixo realiza isso, onde na primeira \u00e9 criado um vetor vazio e adicionado em cada frame a instancia de uma nova imagem.<\/p>\n

\"image050\"<\/p>\n

Tendo definido o vetor de imagens, criamos com o c\u00f3digo a seguir o movieclip<\/em> propriamente dito. O movieclip exige que seja especificado cada quadro informando tamb\u00e9m a quantidade de frames de dura\u00e7\u00e3o. Por exemplo, o primeiro quadro da anima\u00e7\u00e3o durar\u00e1 10 frames (do frame 1 at\u00e9 o frame 10) para o pr\u00f3ximo frame. Quanto menor for esta quantidade de frames dedicada ao frame, mais rapidamente o elemento ir\u00e1 estar animado. A quantidade de frame m\u00ednima para a sensa\u00e7\u00e3o de continuidade necess\u00e1ria para uma anima\u00e7\u00e3o \u00e9 de 10 frames por segundo, mas essa taxa de frames \u00e9 baixa \u00e9 gerar\u00e1 uma apar\u00eancia de stopmotion<\/em> na anima\u00e7\u00e3o. Em compensa\u00e7\u00e3o, para ter uma boa anima\u00e7\u00e3o, s\u00e3o precisos v\u00e1rios quadros, exigindo mais trabalho na elabora\u00e7\u00e3o art\u00edstica.<\/p>\n

\"image051\"<\/p>\n

Observe que o \u00faltimo quadro da anima\u00e7\u00e3o \u00e9 uma reutiliza\u00e7\u00e3o do segundo quadro. Ele pode ser reutilizado pois nessa anima\u00e7\u00e3o ele \u00e9 um quadro intermedi\u00e1rio que permite tal reutiliza\u00e7\u00e3o.<\/p>\n

Ap\u00f3s especificar o movieclip<\/em>, ele pode ser posicionado e adicionado a cena, op\u00e7\u00f5es que s\u00e3o mostradas no c\u00f3digo abaixo. Diferente do posicionamento feito anteriormente onde posicion\u00e1vamos o elemento gr\u00e1fico indicando as coordenadas X e Y de maneira independente, outra forma \u00e9 mostrada na primeira instru\u00e7\u00e3o mostrada (setPosition) , sendo informados a coordenada completa do elemento gr\u00e1fico. Na instru\u00e7\u00e3o seguinte o movieclip<\/em> \u00e9 finalmente adicionado na cena.<\/p>\n

\"image052\"<\/p>\n

Ao executar o c\u00f3digo percebemos que a anima\u00e7\u00e3o executou uma vez, percorrendo cada frame e depois parando. Para manter a anima\u00e7\u00e3o em repeti\u00e7\u00e3o, \u00e9 preciso uma nova instru\u00e7\u00e3o, que indica quais frames estar\u00e3o interligados na repeti\u00e7\u00e3o. No caso do c\u00f3digo a seguir, \u00e9 indicado que quando a anima\u00e7\u00e3o chegar ao frame de n\u00famero 40, ela deve voltar ao frame de n\u00famero 1. Para parar uma anima\u00e7\u00e3o, simplesmente fazemos uso do m\u00e9todo stop()<\/em>.<\/p>\n

\"image053\"<\/p>\n

Os conceitos vistos agora enriquecem o desenvolvimento gr\u00e1fico do jogo e permitem desenvolver jogos com aspecto visual melhorado, al\u00e9m de tamb\u00e9m melhorar as possibilidades de retorno as a\u00e7\u00f5es do usu\u00e1rio.<\/p>\n

 <\/p>\n

Pr\u00f3ximo passo: mostrar textos<\/a><\/strong><\/span><\/p>\n

\n","protected":false},"excerpt":{"rendered":"

A anima\u00e7\u00e3o em jogos \u00e9 um recurso extremamente utilizado e por isso um conceito essencial para o desenvolvimento. Sua utiliza\u00e7\u00e3o parte do desenvolvimento pelos artistas dos sprites animados de elemento (um personagem, uma paisagem ou um objeto do jogo) e posteriormente s\u00e3o adicionados ao jogo. Na Gideros, a anima\u00e7\u00e3o pode ser implementada a partir de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":122,"menu_order":6,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-150","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-json\/wp\/v2\/pages\/150","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=150"}],"version-history":[{"count":4,"href":"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-json\/wp\/v2\/pages\/150\/revisions"}],"predecessor-version":[{"id":196,"href":"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-json\/wp\/v2\/pages\/150\/revisions\/196"}],"up":[{"embeddable":true,"href":"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-json\/wp\/v2\/pages\/122"}],"wp:attachment":[{"href":"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-json\/wp\/v2\/media?parent=150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}