{"id":115,"date":"2014-08-20T22:01:04","date_gmt":"2014-08-21T01:01:04","guid":{"rendered":"http:\/\/www.galirows.com.br\/meublog\/gideros\/?page_id=115"},"modified":"2015-04-10T20:50:07","modified_gmt":"2015-04-10T23:50:07","slug":"movimento","status":"publish","type":"page","link":"http:\/\/www.galirows.com.br\/meublog\/gideros\/capitulo-1-introducao\/movimento\/","title":{"rendered":"Introdu\u00e7\u00e3o a codifica\u00e7\u00e3o \u2013 adicionando movimento ao jogo"},"content":{"rendered":"

Vimos at\u00e9 o momento como adicionar elementos na tela e posiciona-los onde s\u00e3o necess\u00e1rios, mas um jogo normalmente exige movimenta\u00e7\u00e3o dos elementos gr\u00e1ficos. Para adicionar movimenta\u00e7\u00e3o \u00e9 preciso adicionar um evento que seja chamado de tempos em tempos e realize o deslocamento dos elementos gr\u00e1ficos.<\/p>\n

Dando continuidade\u00a0 ao nosso c\u00f3digo anterior, adicionaremos um aumento no valor da coordenada do eixo Y da bola, fazendo ela se deslocar para baixo na cena e esse aumento ser\u00e1 aplicado a cada frame do jogo. O c\u00f3digo abaixo adiciona essa funcionalidade.<\/p>\n

\"image028\"<\/p>\n

O c\u00f3digo iniciar com o cabe\u00e7alho de uma fun\u00e7\u00e3o. Essa fun\u00e7\u00e3o recebe como par\u00e2metro um \u201cevent\u201d \u00e9 que passado pois essa fun\u00e7\u00e3o ser\u00e1 chamada atrav\u00e9s de do ouvinte especificado na \u00faltima linha do c\u00f3digo. A fun\u00e7\u00e3o possui tr\u00eas comandos, onde no primeiro \u00e9 especificado que uma vari\u00e1vel chamada \u201cy\u201d receber\u00e1 o atual valor da coordenada Y da bola (atrav\u00e9s da instru\u00e7\u00e3o ball:getY), no segundo comando o valor da vari\u00e1vel \u201cy\u201d \u00e9 incrementado em uma unidade e por fim \u00e9 modificado o valor da coordenada Y da bola, fazendo ela aparecer 1 pixel mais abaixo do que anteriormente.<\/p>\n

Ao executar a fun\u00e7\u00e3o criada por vezes consecutivas, o que veremos na execu\u00e7\u00e3o do jogo \u00e9 a bola ir descendo na tela de maneira constante, at\u00e9 sumir completamente da tela. Complementa-se que se o valor do incremento de \u201cy\u201d for maior do que 1, a bola ir\u00e1 se deslocar mais rapidamente. Para fazer a fun\u00e7\u00e3o ser executada repetidas vezes, a fazemos ser chamada por um ouvinte.<\/p>\n

A \u00faltima linha do c\u00f3digo adiciona um ouvinte na cena que realiza a chamada da fun\u00e7\u00e3o\u00a0 a cada frame do jogo. Essa configura\u00e7\u00e3o do ouvinte \u00e9 realizada a partir dos dois par\u00e2metros especificados para o ouvinte, onde no primeiro faz com que a chamada seja realizada a cada frame (Event.ENTER_FRAME) e o segundo par\u00e2metro \u00e9 qual fun\u00e7\u00e3o dever\u00e1 ser chamada. Se o leitor possuir algum conhecimento de ActionScript<\/em> do Flash, notar\u00e1 uma grande similaridade na codifica\u00e7\u00e3o dos eventos.<\/p>\n

No atual c\u00f3digo a bola ir\u00e1 sumir da tela, continuando sua descida infinitamente. Para impedir que o elemento saia da cena, faremos uso de um desvio condicional adicionado no c\u00f3digo abaixo, onde \u00e9 testado se a bola chegou no limite inferior da tela. Se a bola n\u00e3o chegou ao limite inferior, o valor da vari\u00e1vel \u201cy\u201d aumenta. O c\u00f3digo tamb\u00e9m conta com o uso da instru\u00e7\u00e3o print<\/em>, que ir\u00e1 mostrar na \u00e1rea de sa\u00edda (output) o valor que a vari\u00e1vel \u201cy\u201d vai assumindo no c\u00f3digo.<\/p>\n

\"image029\"<\/p>\n

De considerarmos que o interesse era realmente deixar a bola sumir na parte inferior da cena (como no pen\u00faltimo c\u00f3digo) e n\u00e3o apenas deixar ela parada (o que fizemos no \u00faltimo c\u00f3digo), o que observamos \u00e9 que a bola continuar\u00e1 tendo seu incremento da coordenada Y infinitamente, consumindo o tempo todo processamento, mesmo n\u00e3o existindo mais para o jogo. Nesse sentido \u00e9 preciso remover essa inst\u00e2ncia do jogo, o que \u00e9 feito atrav\u00e9s no c\u00f3digo ilustrado a seguir.<\/p>\n

\"image030\"<\/p>\n

A instru\u00e7\u00e3o stage:removeChild(ball) ir\u00e1 remover a inst\u00e2ncia da bola a partir do momento que ela alcan\u00e7ar o limite inferior da cena. Simplesmente solicitar a remo\u00e7\u00e3o como feito n\u00e3o \u00e9 suficiente e gerar\u00e1 o erro mostrado na figura 13, que \u00e9 uma janela indicando um erro durante a execu\u00e7\u00e3o do jogo.<\/p>\n

\"image031\"<\/p>\n

O erro acorreu devido ao fato de que a inst\u00e2ncia da bola foi removida, mas a fun\u00e7\u00e3o que faz ela mover-se na cena continua tentando moviment\u00e1-la, mas sua referencia foi perdida. Para corrigir esse problema precisamos parar de executar nossa fun\u00e7\u00e3o criada e ela \u00e9 executada a partir de um ouvinte. A remo\u00e7\u00e3o do ouvinte \u00e9 mostrada no acr\u00e9scimo da instru\u00e7\u00e3o removeEventListener mostrada no c\u00f3digo a seguir. A chamada da fun\u00e7\u00e3o removeEventListener depende da passagem dos mesmos par\u00e2metros informados no momento de adi\u00e7\u00e3o do ouvinte.<\/p>\n

\"image032\"<\/p>\n

A partir dos c\u00f3digos vistos at\u00e9 o momento conseguimos adicionar elementos gr\u00e1ficos na tela, remove-los quando necess\u00e1rio, fazer com que os gr\u00e1ficos se movam na tela e, no item a seguir tamb\u00e9m faremos com que seja executado algum som trazendo um retorno auditivo. Esses s\u00e3o os princ\u00edpios elementares para o desenvolvimento, embora n\u00e3o se tem um jogo se ele n\u00e3o aceitar intera\u00e7\u00e3o do usu\u00e1rio.<\/p>\n\n\n\n
\n

Para praticar:<\/strong> fa\u00e7a com que quando a bola chega na parte inferior da cena, ela comece a subir sumindo apenas na parte superior da tela.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

Pr\u00f3ximo passo: adicionar som<\/a><\/strong><\/span><\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Vimos at\u00e9 o momento como adicionar elementos na tela e posiciona-los onde s\u00e3o necess\u00e1rios, mas um jogo normalmente exige movimenta\u00e7\u00e3o dos elementos gr\u00e1ficos. Para adicionar movimenta\u00e7\u00e3o \u00e9 preciso adicionar um evento que seja chamado de tempos em tempos e realize o deslocamento dos elementos gr\u00e1ficos. Dando continuidade\u00a0 ao nosso c\u00f3digo anterior, adicionaremos um aumento no […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":122,"menu_order":3,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-115","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t