Tutorial - Nossa Primeira Aplicação - Parte 3/3

Nesta terceira parte de nosso tutorial iremos interagir com a imagem que adicionamos ao projeto e desenhamos na tela. O objetivo é primeiro fazer nosso aviãozinho se mexer, depois veremos como fazer o aviãozinho detectar os limites de nossa janela e tratar isso fazendo com que ele bata no limite da tela e volte, como não queremos que ele volte de "marcha ré", veremos também como girar ou inverter nossa imagem. Ao final teremos uma aplicação em que nosso aviãozinho fica voando, indo e voltando no topo da tela e com isso teremos entendendo alguns principios mais basicos de manipulação de imagens em um ambiente 2D com o XNA Game Studio.

Abriremos novamente o Visual C# 2005 Express Edition e o nosso projeto, ou pela Start Page em Recent Projects, ou em File->Open Project... se sabemos onde salvamos nosso projeto.

Voltamos a ter nosso Game1.cs aberto. Caso o Game1.cs não esteja aberto é só dar um duplo clique em Game1.cs no Solution Explorer.

Antes de darmos algum movimento a nossa imagem vamos tentar entender um pouco melhor como funciona o sistema de coordenadas 2D que usaremos no XNA Game Studio.

Sistema de Coordenadas 2D

Como muitos de nós estudamos no colégio, em duas dimensões, temos um plano que chamamos de plano cartesiano que é representado por um eixo X e um eixo Y perpendiculares. O sistema de coordenadas 2D do XNA Game Studio, que chamamos de "coordenadas da tela", apresenta apenas uma diferença sobre esse que estudamos no colégio. No cartesiano, a origem dos eixos, geralmente fica na parte inferior esquerda e o eixo Y cresce de baixo para cima enquanto no plano da tela, a origem dos eixos fica na parte superior esquerda e o eixo Y cresce de cima para baixo. No plano da tela, os eixos X e Y estão diretamente relacionados com a resolução da tela, ou seja, se sua tela tem resolução de 800x600 isso quer dizer que o eixo X terá 800 pixels e o Y terá 600 pixels.

Por isso ao inicializarmos nossa variável planePosition como um vetor Zero, ou seja, um vetor que tem 0 como coordenada X e 0 como coordenada Y, nosso aviãozinho apareceu lá na parte superior esquerda da tela.

Movimentando Nossa Imagem

Então, agora que entendemos como é o sistemna de coordenadas da tela, como faríamos para o nosso aviãozinho se mexer? Sabemos que o método Draw() está desenhando nosso aviãzinho de acordo com sua posição a cada quadro, e sabemos também que no método Update() podemos fazer alterações a cada quadro. Assim no método Update() iremos somar um valor a nossa variável posição para que a posição de nosso aviãozinho seja atualizada a cada quadro.

No caso, fiz com que planePosition = planePosition + (1.0, 0.0), o que faz com que a cada quadro a posição do aviãozinho aumente 1 pixel em X.

Se rodarmos nosso projeto, ou na setinha verde de Start Debugging, ou em menu Debug->Start Debugging ou em F5, e tivermos feito as modificações exatamente como as mostradas, nosso aviãozinho irá se movimentar para a direita... direita... direita... até que sai da nossa janela de visualização.

Detectando os Limites da Tela

Agora vamos tentar evitar que o nosso aviãozinho saia da tela. A cada quadro iremos checar se ele ainda está na tela e caso não esteja iremos tratar isso. Podemos tratar de inumeras maneiras dependendo do que queremos, nesse caso do aviãozinho, podemos mandar ele parar ou então ir na direção contraria.

Como comentei ao explicar um pouquinho sobre as coordenadas da tela, o plano que podemos ver na tela em que o aviãzinho está se movimentando tem as dimensões da resoluçã de nossa janela, assim podemos testar antes de cada movimento se a posição do aviãzinho ultrapassa essas barreiras e se ultrapassar faremos com que ele "voe" na direção contraria que estava voando.

Criaremos uma variável velocity que indica a direção em que nosso avião se moverá. Essa variável irá substituir aquele vetor fixo que estavamos usando para fazer o avião se mover 1 pixel para a direita.

Agora, se nosso aviãozinho chegar em qualquer extremidade da tela, faremos com que planeVelocity = -planeVelocity, o que inverterá a direção do vôo. Em C#, assim como em outras linguagens, realizamos testes usando o comando if(checagem){faça algo}.

Para conseguir informações como as dimensões da nossa janela, usaremos a variável graphics que já vem declarada e inicializada para nós com o graphicsDeviceManager.


Testaremos se a posição X do nosso aviãozinho é menos do que zero(limite esquerdo da tela) ou ( simbolizado por || ) é maior que a largura da nossa tela menos a largura da nossa imagem. A subtração pela largura da nossa imagem é necessária pois a posição da mesma é indicada pela sua parte superior esquerda.

Rodando nossa aplicação veremos que o aviãozinho voa, voa, chega no final, bate e volta... mas volta de "marcha ré" e esse não seria o efeito desejado num jogo.

Fazendo o Flip da Imagem

Vamos declarar na nossa classe Game1.cs mais uma variável, desta vez um bool que chamaremos de planeFlip. Esse bool assumirá o valor true se o avião precisar ser "flipado" e false se puder ser desenhado da maneira normal. Inicializamos essa variavel com false para que inicialmente o nosso avião seja desenhado da maneira como é a imagem.


No método Update(), ao detectarmos uma colisão com os limites da tela, devemos mudar o planeFlip para que desenhe a imagem como desejamos. A cada colisão invertemos o sentido da imagem fazendo o planeFlip ser o inverso do que era anteriormente.

Agora no método Draw(), verificamos através do planeFlip como devemos desenhar a nossa imagem. O spriteBatch.Draw() tem um overload que nos permite aplicar efeitos a imagem que estamos desenhando e um desses efeitos é o flip horizontal que dará o efeito que desejamos. Sempre que o aviãozinho bater na direita devemos desenhar ele flipado até bater na direita quando o desenhamos normal.

Então, finalmente, rodando nossa aplicação veremos que nosso aviãozinho voa para um lado e para o outroda maneira que esperavamos.


Resumo

Nesta última parte do nosso tutorial vimos o conceito de coordenadas da tela, vimos também como dar movimento a uma imagem e como usar efeitos ao desenha-la na tela, e como obter parametros da tela através do graphicsDeviceManager.

Aos menos familiarizados com programação e nossa linguagem C# vimos variáveis do tipo bool que assumem valores verdadeiro ou falso, vimos também como fazer um bloco de código condicional com if e else.

Espero que tenham gostado deste nosso primeiro tutorial nos dando uma visão bem básica do XNA Game Studio mas revelando também a diversidade de possibilidades que temos para desenvolver um jogo nessa ferramenta.

No próximo tutorial implementaremos um joguinho básico, onde, além dos conceitos vistos neste tutorial veremos como organizar melhor nosso código através da criação de outras classes e falarei um pouco de orientação a objetos, veremos como podemos embelezar mais um jogo colocando um background e também veremos como realizar interações através da leitura do teclado, do mouse ou do XBox Controller.