{"id":107,"date":"2014-08-20T21:55:13","date_gmt":"2014-08-21T00:55:13","guid":{"rendered":"http:\/\/www.galirows.com.br\/meublog\/gideros\/?page_id=107"},"modified":"2015-04-10T20:54:05","modified_gmt":"2015-04-10T23:54:05","slug":"codificacao-elementos-graficos","status":"publish","type":"page","link":"http:\/\/www.galirows.com.br\/meublog\/gideros\/capitulo-1-introducao\/codificacao-elementos-graficos\/","title":{"rendered":"Introdu\u00e7\u00e3o a codifica\u00e7\u00e3o \u2013 adicionar elementos gr\u00e1ficos"},"content":{"rendered":"

Um elemento primordial no desenvolvimento de games s\u00e3o os elementos gr\u00e1ficos e seu posicionamento na tela. A manipula\u00e7\u00e3o gr\u00e1fica no Gideros \u00e9 bastante simples e consiste na instancia\u00e7\u00e3o de uma imagem e sua inclus\u00e3o na \u00e1rea gr\u00e1fica. O c\u00f3digo a seguir instancia, na primeira linha, uma das imagens dispon\u00edveis no projeto (chamada field.png) que ser\u00e1 utilizada como fundo de tela (background). A segunda linha \u00e9 utilizada para adicionar a instancia na \u00e1rea de jogo (chamada de stage).<\/p>\n

\"image006\"<\/p>\n

A imagem relacionada no c\u00f3digo precisa estar incorporada no projeto. Isso \u00e9 feito clicando na pasta do projeto com o bot\u00e3o direito do mouse e escolhendo a op\u00e7\u00e3o \u201cAdd Existing Files\u201d e posteriormente selecionando os arquivos de imagem. A Figura 3 ilustra o acesso a adi\u00e7\u00e3o de arquivos no projeto e tamb\u00e9m \u00e9 poss\u00edvel visualizar a op\u00e7\u00e3o \u201cAdd New File\u201d que permite criar um novo script de programa\u00e7\u00e3o em LUA.<\/p>\n

\"image007\"Figura 3. Adi\u00e7\u00e3o de novos elementos ao projeto<\/p>\n

Os elementos gr\u00e1ficos devem ser elaborados para uma determinada resolu\u00e7\u00e3o de tela. No caso da imagem de fundo, essa precisa ter largura e altura iguais a resolu\u00e7\u00e3o de tela. Em um jogo onde existe uma \u201cpassagem\u201d do fundo (como nos jogos side-scrolling), essa dever\u00e1 ter uma largura ou altura maior e ser feito o deslocamento do gr\u00e1fico conforme necess\u00e1rio. As duas imagens que est\u00e3o sendo utilizadas nesse tutorial est\u00e3o dispon\u00edveis na pasta \u201c\\Examples\\Graphics\\Jumping Ball\u201d a partir do diret\u00f3rio de instala\u00e7\u00e3o da Gideros.<\/p>\n

Destaca-se que a Gideros permite tratar automaticamente a escala do jogo para outras resolu\u00e7\u00f5es de tela. Esse recurso \u00e9 configurado na op\u00e7\u00e3o \u201cProperties\u201d acessada como visto na Figura 3. A tela de configura\u00e7\u00e3o do jogo \u00e9 mostrada na figura 4 onde \u00e9 poss\u00edvel visualizar a op\u00e7\u00e3o \u201cscale mode\u201d que permite solicitar esse ajuste autom\u00e1tico a v\u00e1rias resolu\u00e7\u00f5es.<\/p>\n

\"image008\"<\/a>Figura 4. Janela de configura\u00e7\u00e3o das propriedades do jogo<\/p>\n

A figura 5 representa um peda\u00e7o de 3 execu\u00e7\u00f5es no jogo em escalas diferentes. A primeira tela representa a op\u00e7\u00e3o sem ajuste de escala (No Scale \u2013 Top Left) onde \u00e9 mostrada as imagens sem qualquer altera\u00e7\u00e3o nos tamanhos, fazendo com que os elementos gr\u00e1ficos devam ser exportados para v\u00e1rias resolu\u00e7\u00f5es de tela distintas.<\/p>\n

A segunda tela mostra o jogo com a op\u00e7\u00e3o de escala \u201ccrop\u201d<\/em> e a execu\u00e7\u00e3o em uma tela maior do que para a qual os gr\u00e1ficos foram elaborados. Observe que nessa segunda tela a imagem da bola aparece cortada na parte superior, isso porque o ajuste da resolu\u00e7\u00e3o acabou exigindo o corte de alguns pixels na altura do jogo. Observe tamb\u00e9m que para se adequar a uma resolu\u00e7\u00e3o maior a imagem perdeu qualidade gr\u00e1fica. Destaca-se que com essa configura\u00e7\u00e3o de escala o gr\u00e1fico n\u00e3o sofre distor\u00e7\u00e3o na propor\u00e7\u00e3o das imagens e isso \u00e9 um recurso importante em v\u00e1rios jogos como o apresentado, pois de outro modo a bola ficaria ovulada se as propor\u00e7\u00f5es n\u00e3o fossem mantidas. As op\u00e7\u00f5es de escala \u201cstretch<\/em>\u201d, \u201cfit width<\/em>\u201d e \u201cfit height<\/em>\u201d s\u00e3o op\u00e7\u00f5es que ajustam a escala causando distor\u00e7\u00e3o na propor\u00e7\u00e3o das imagens.<\/p>\n

Por fim, a terceira imagem da Figura 5 mostra o jogo em escala \u201cPixel Perfect<\/em>\u201d que consegue manter o ajuste autom\u00e1tico sem cortar parte da cena e sem distorcer as imagens, mas para isso acaba gerando bordas ao redor da cena. Essa escala tamb\u00e9m acaba diminuindo a qualidade gr\u00e1fica.<\/p>\n

\"dim0\"<\/a>Figura 5. Peda\u00e7os da cena do jogo em algumas op\u00e7\u00f5es de escala<\/p>\n

Na figura 4 ainda \u00e9 poss\u00edvel verificar outros elementos de configura\u00e7\u00e3o, como a configura\u00e7\u00e3o das dimens\u00f5es da tela (logical dimensions), onde \u00e9 poss\u00edvel definir a largura e altura para a qual o jogo \u00e9 objetivado; a orienta\u00e7\u00e3o da tela, podendo o jogo ser projetado para visualiza\u00e7\u00e3o em orienta\u00e7\u00e3o retrato (portrait) e paisagem (landscape). A orienta\u00e7\u00e3o tamb\u00e9m permite algo que seria o uso em orienta\u00e7\u00e3o retrato de \u201ccabe\u00e7a para baixo\u201d, bem como paisagem de \u201ccabe\u00e7a para baixo\u201d; por fim tamb\u00e9m \u00e9 pode-se observar a op\u00e7\u00e3o FPS (frames per second) que \u00e9 uma configura\u00e7\u00e3o de quantos frames o jogo mostrar\u00e1 a cada segundo. Quanto maior a quantidade de frames maior o custo computacional, mas melhor ser\u00e1 a visualiza\u00e7\u00e3o e a resposta aos comandos.<\/p>\n

Com rela\u00e7\u00e3o a taxa de FPS, a Gideros somente permite a op\u00e7\u00e3o de 30 e 60 frames por segundo. 30 FPS \u00e9 o que uma pessoa consegue realmente visualizar e pode ser utilizada em diversos jogos em que a resposta aos comandos n\u00e3o \u00e9 essencial, como jogos de racioc\u00ednio. Para jogos que envolvem reflexo, como jogos de a\u00e7\u00e3o, \u00e9 recomend\u00e1vel utilizar 60 FPS pois o jogo responder\u00e1 mais rapidamente aos comandos do jogador.<\/p>\n

Plano cartesiano<\/h2>\n

Antes de dar continuidade codifica\u00e7\u00e3o do jogo \u00e9 preciso ter conhecimento de um conceito primordial. Para o desenvolvimento de jogos \u00e9 importante entender como \u00e9 realizado o posicionamento dos elementos gr\u00e1ficos e para isso \u00e9 preciso entender o plano cartesiano (Relembre os conceitos a partir de: http:\/\/www.youtube.com\/watch?v=y2r8UfK0LTg<\/a>). No caso de jogos 2D \u00e9 utilizado o plano cartesiano bidimensional, enquanto jogos 3D precisam da manipula\u00e7\u00e3o do plano cartesiano tridimensional (que n\u00e3o ser\u00e1 abordado nessa obra).<\/p>\n

O plano cartesiano bidimensional como \u00e9 apresentado na escola \u00e9 como o mostrado na Figura 6, onde existe um eixo horizontal (denominado eixo X) e um eixo vertical (denominado eixo Y). Onde esses eixos se cruzam \u00e9 estabelecido como ponto de origem<\/strong> do plano e referenciado como 0,0<\/strong> onde o primeiro valor (antes da v\u00edrgula) representa o valor no eixo X e o segundo valor (depois da v\u00edrgula) representa o valor no eixo Y. Aumentando o valor de X se tem pontos mais para a direita e aumentando os valores de Y tempos pontos mais para cima. O plano cartesiano \u00e9 representado normalmente tendo o ponto de origem<\/strong> no centro do plano.<\/p>\n

\"image014\" Figura 6. Representa\u00e7\u00e3o tradicional do plano cartesiano<\/p>\n

A ideia do plano cartesiano \u00e9 mantida no computador, mas com uma altera\u00e7\u00e3o. Repare na Figura 7 que existe uma diferen\u00e7a no eixo Y (no eixo X n\u00e3o existe mudan\u00e7a). Veja que quando os valores de Y aumentam, o ponto acaba sendo mais para baixo (ao contr\u00e1rio do visto antes).<\/p>\n

\"image016\" <\/a>Figura 7. Plano cartesiano do computador.<\/p>\n

Outra diferen\u00e7a existente na representa\u00e7\u00e3o no computador \u00e9 que o ponto de origem n\u00e3o \u00e9 no centro do plano, sendo considerando no canto superior esquerdo. Isso faz com que os valores negativos de X e Y formem posi\u00e7\u00f5es fora da tela do computador. A Figura 8 mostra onde est\u00e1 o ponto de origem da cena que \u00e9 exibida e tamb\u00e9m de um elemento gr\u00e1fico inserido na cena (a bola). A origem considera sempre a orienta\u00e7\u00e3o retrato (portrait), mesmo que o jogo seja executado em uma orienta\u00e7\u00e3o diferente.<\/p>\n

\"dim1\" Figura 8. Ponto de origem da cena e do elemento gr\u00e1fico<\/p>\n

A posi\u00e7\u00e3o 0,0 destaca na bola \u00e9 o ponto de origem do elemento gr\u00e1fico da bola. Mesmo sendo um c\u00edrculo, os elementos gr\u00e1ficos s\u00e3o sempre considerados em forma retangular. Essa bola tem sua origem posicionada dentro da cena em posi\u00e7\u00e3o 120,20, manipula\u00e7\u00e3o que ser\u00e1 vista a seguir.<\/p>\n

Adicionando outro elemento gr\u00e1fico ao jogo<\/h2>\n

Tendo entendido como posicionar elementos gr\u00e1ficos no plano, vamos adicionar e posicionar um novo elemento gr\u00e1fico (a bola) ao jogo e posiciona-lo na cena. O c\u00f3digo abaixo realiza essa tarefa.<\/p>\n

\"image021\"<\/p>\n

A primeira e a \u00faltima foram explicadas anteriormente. Destaca-se aqui a segunda e terceira linhas que realizam o posicionamento da boa. Isso \u00e9 feito atrav\u00e9s das instru\u00e7\u00f5es setX e setY alterando, respectivamente, as coordenadas X e Y do gr\u00e1fico. Se n\u00e3o definida a posi\u00e7\u00f5es X e Y, por padr\u00e3o \u00e9 atribu\u00eddo zero para cada coordenada, o que faria a bola ser posicionada no canto superior esquerdo da cena. O posicionamento na coordenada 120,20 gera um resultado como mostrado anteriormente na Figura 8.<\/p>\n

Digamos que agora precisamos posicionar a bola no centro com rela\u00e7\u00e3o a largura da cena. Em um primeiro momento poder\u00edamos pensar na seguinte forma: pegamos a largura da cena (no nosso caso 320) e dividimos por 2, pegando o meio da cena. O c\u00f3digo abaixo ilustra essa defini\u00e7\u00e3o. Em vez de solicitar a opera\u00e7\u00e3o aritm\u00e9tica, tamb\u00e9m poderia ser fornecido o diretamente o resultado da opera\u00e7\u00e3o, no caso 160, dispensando esse processamento.<\/p>\n

\"image023\"<\/p>\n

A figura 9 mostra como fica posicionada a bola com a aplica\u00e7\u00e3o dessa coordenada X e vemos que o gr\u00e1fico n\u00e3o ficou posicionado exatamente no meio. A figura 10 ajuda a entender o motivo desse posicionamento n\u00e3o ter funcionado. A linha em azul corta a cena ao meio, no coordenada 160 em X. As setas em vermelho possuem intersec\u00e7\u00e3o na origem do objeto, sendo que \u00e9 essa origem do objeto que posicionamos no atrav\u00e9s das instru\u00e7\u00f5es setX e setY. Da maneira como solicitamos o posicionamento do elemento gr\u00e1fico fez com que ele come\u00e7asse a partir do centro da cena.<\/p>\n

\"image024\" Figura 9. Resultado da tentativa de posicionar a bola no centro da cena<\/p>\n

\"figura10\" Figura 10. Destaques na imagem para explicar o posicionamento no centro da cena<\/p>\n

Para o correto posicionamento da bola no centro da largura da cena precisamos colocar o centro da largura da bola no centro da largura da cena. Para isso precisamos posicionar a bola mais a esquerda, diminuindo sua coordenada X. O elemento gr\u00e1fico da bola possui largura de 80 pixels, ent\u00e3o poder\u00edamos em um segundo momento fazer o seguinte c\u00e1lculo para a posi\u00e7\u00e3o: 160 da posi\u00e7\u00e3o X central da cena subtra\u00eddos os 80 pixels da largura da bola, resultando na posi\u00e7\u00e3o 80. O resultado dessa nova posi\u00e7\u00e3o \u00e9 mostrado na figura 11 onde vemos que nossa tentativa foi novamente frustrada j\u00e1 que a bola ficou posicionada muito para a esquerda. Isso aconteceu pois consideramos toda a largura da bola, enquanto o que precis\u00e1vamos era descontar apenas at\u00e9 o centro dela, ou seja 40 pixels. Se colocarmos a posi\u00e7\u00e3o X com valor 120 (160 \u2013 40), o resultado ser\u00e1 o esperado (mostrado na figura 12).<\/p>\n

 <\/p>\n

\"image024_\" Figura 11. Resultado da nova tentativa de posicionar a bola no centro da cena<\/p>\n

\"image026\" Figura 12. Resultado da nova tentativa de posicionar a bola no centro da cena<\/p>\n

Existe uma maneira melhor para especificar o posicionamento que queremos e esse modo \u00e9 mostrado no c\u00f3digo a seguir, onde \u00e9 utilizada uma instru\u00e7\u00e3o que retornam o tamanho da largura da tela (stage:getWidth) e\u00a0 outra instru\u00e7\u00e3o que retorna a largura da bola (ball:getWidth , onde ball \u00e9 o nome definido anteriormente no c\u00f3digo para o elemento gr\u00e1fico da bola). A utiliza\u00e7\u00e3o dessas instru\u00e7\u00f5es \u00e9 interessante para permitir que o script possa ser reutilizado mesmo com elementos gr\u00e1ficos de tamanho diferentes, caso se pretenda fazer vers\u00f5es do jogo para resolu\u00e7\u00f5es de tela diferentes.<\/p>\n

\"image027\"<\/p>\n

 <\/p>\n

Pr\u00f3ximo passo: \u00a0adicionar movimento ao jogo<\/a><\/span><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

Um elemento primordial no desenvolvimento de games s\u00e3o os elementos gr\u00e1ficos e seu posicionamento na tela. A manipula\u00e7\u00e3o gr\u00e1fica no Gideros \u00e9 bastante simples e consiste na instancia\u00e7\u00e3o de uma imagem e sua inclus\u00e3o na \u00e1rea gr\u00e1fica. O c\u00f3digo a seguir instancia, na primeira linha, uma das imagens dispon\u00edveis no projeto (chamada field.png) que ser\u00e1 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":122,"menu_order":2,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-107","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-json\/wp\/v2\/pages\/107","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=107"}],"version-history":[{"count":6,"href":"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-json\/wp\/v2\/pages\/107\/revisions"}],"predecessor-version":[{"id":145,"href":"http:\/\/www.galirows.com.br\/meublog\/gideros\/wp-json\/wp\/v2\/pages\/107\/revisions\/145"}],"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=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}