Hoje estou postando aqui no blog uma parte extra do nosso tutorial Nossa Primeira Aplicação. Recebi alguns pedidos e algumas perguntas de como tratamos entradas do teclado e do controller do XBOX360. Nesse post mostrarei como trata-las fazendo nosso aviãozinho voar mais alto ou mais baixo, ou seja, daremos uma movimentação vertical a ele além da movimentação horizontal que ele já possui. Em seguida faremos com que ele não saia da tela nos limites superiores e inferiores.
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.
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.
Movimentando de Acordo com o Input
Com o XNA Game Studio podemos ter diversos inputs diferentes, seja ele o controller do XBOX360, o teclado do PC ou até mesmo os botões do Zune. Aqui, por enquanto, cobriremos somente as duas primeiras entradas, o teclado e o controller. Caso você não tenha um controller do XBOX360 em casa, não será possivel testar se o código que você fez para o controller funciona corretamente, caso tenha é só conectar o controller do seu XBOX360 em uma porta USB do seu PC e testar o código que escreveremos aqui.
Vamos ao método Update() da nossa classe Game1 pois é nesse método que quando pressionada a tecla Up ou Down do teclado ou do Dpad do nosso controller atualizaremos a posição do nosso avião. Como ainda lembramos do nosso sistema de coordenadas da tela, sabemos que ao pressionarmos o botão Down do teclado ou do Dpad temos que incrementar de um valor o Y da posição do nosso avião e ao pressionarmos o botão Up do teclado ou do Dpad temos que decrementar de um valor o Y da posição do nosso avião.
Devemos inserir o código no método Update() acima das modificações que haviamos feito anteriormente. Assim fazemos o teste com o if onde nossa condição é se o estado do teclado ou do Dpad tiver pressionado os botões Down ou Up fazemos planePosition.Y += ou -= 2.5f.
Se rodarmos nossa aplicação e pressionarmos o Down ou o Up veremos que o avião se move para baixo ou para cima ainda respeitando os limites laterais da nossa tela mas ultrapassando seus limites superiores e inferiores. Como corrigir isso?
Respeitando os Limites da Tela
Uma das opções é fazermos uma checagem da posição do aviãozinho com relação ao limite superior ou inferior da tela.
Se sua posição em Y for maior ou menor do que os limites da tela em Y igualaremos sua posição em Y ao limite em Y da tela.
Talvez, para ficar mais interessante, fosse legal darmos uma pequena rotação na nossa imagem no sentido horário caso esteja descendo e no sentido anti-horário caso esteja subindo.
Rotacionando nossa Imagem
Para realizarmos essa rotação precisaremos de uma outra variável na nossa classe. Iremos declarar a nossa variável do tipo float, planeRotation, junto com as outras variáveis da nossa classe. Não iremos inicializá-la ainda.
Essa variável receberá um valor em radianos da anlgulação que queremos que a nossa imagem gire.
Agora novamente no início do método Update() iremos inicializar nossa variável planeRotation com o valor 0.0f, para que a cada loop se não pressionarmos Down ou Up nossa imagem seja desenhada da maneira original.
E dentro de cada bloco em que checarmos se pressionamos Down ou Up do teclado ou do Dpad do controller iremos atribuir uma angulação de acordo com o movimento que estamos fazendo.
Ainda temos que passar para o spriteBatch essa atualização na rotação que fizemos da nossa imagem para que ele possa desenha-la levando em consideração essas modificações. Então no método Draw():
Agora está quase tudo ok. Se rodarmos e mexermos um pouquinho veremos o porque nossa aplicação ainda não está 100%.
Ao vermos essa imagem até parece que está tudo bem com nossa aplicação, se algum de vocês já tiver rodado sua aplicação verá que não está tudo bem pois a imagem a esquerda mostra a posição do aviãozinho subindo após sua imagem estar flipada e a da direita mostra ele descendo após sua imagem estar flipada, deveria ser o contrário!
Corrigiremos isso invertendo a rotação caso a imagem estaja flipada, ou seja, ao desenharmos, quando fazemos o check se a imagem está flipada, antes iremos fazer com que o nosso planeRotation = -planeRotation.
Agora tudo estará rodando como desejamos. Podemos rodar e ver os resultados.
Resumo
Nesta parte extra do nosso tutorial Nossa Primeira Aplicação vimos como tratar a entrada do teclado e tembém uma entrada vinda do controller do XBOX360. Vimos também um pouquinho de como rotacionamos uma imagem que estamos desenhando na tela além de masi alguma pratica com blocos condicionais.
Espero que gostem e que estejam conseguindo fazer coisas interessantes a partir das noções que foram dadas aqui nesse primeiro tutorial que nos dá uma visão bem básica do XNA Game Studio e de aplicações 2D utilizando essa ferramenta.
Movimentando de Acordo com o Input
Com o XNA Game Studio podemos ter diversos inputs diferentes, seja ele o controller do XBOX360, o teclado do PC ou até mesmo os botões do Zune. Aqui, por enquanto, cobriremos somente as duas primeiras entradas, o teclado e o controller. Caso você não tenha um controller do XBOX360 em casa, não será possivel testar se o código que você fez para o controller funciona corretamente, caso tenha é só conectar o controller do seu XBOX360 em uma porta USB do seu PC e testar o código que escreveremos aqui.
Vamos ao método Update() da nossa classe Game1 pois é nesse método que quando pressionada a tecla Up ou Down do teclado ou do Dpad do nosso controller atualizaremos a posição do nosso avião. Como ainda lembramos do nosso sistema de coordenadas da tela, sabemos que ao pressionarmos o botão Down do teclado ou do Dpad temos que incrementar de um valor o Y da posição do nosso avião e ao pressionarmos o botão Up do teclado ou do Dpad temos que decrementar de um valor o Y da posição do nosso avião.
Devemos inserir o código no método Update() acima das modificações que haviamos feito anteriormente. Assim fazemos o teste com o if onde nossa condição é se o estado do teclado ou do Dpad tiver pressionado os botões Down ou Up fazemos planePosition.Y += ou -= 2.5f.
Se rodarmos nossa aplicação e pressionarmos o Down ou o Up veremos que o avião se move para baixo ou para cima ainda respeitando os limites laterais da nossa tela mas ultrapassando seus limites superiores e inferiores. Como corrigir isso?
Respeitando os Limites da Tela
Uma das opções é fazermos uma checagem da posição do aviãozinho com relação ao limite superior ou inferior da tela.
Se sua posição em Y for maior ou menor do que os limites da tela em Y igualaremos sua posição em Y ao limite em Y da tela.
Talvez, para ficar mais interessante, fosse legal darmos uma pequena rotação na nossa imagem no sentido horário caso esteja descendo e no sentido anti-horário caso esteja subindo.
Rotacionando nossa Imagem
Para realizarmos essa rotação precisaremos de uma outra variável na nossa classe. Iremos declarar a nossa variável do tipo float, planeRotation, junto com as outras variáveis da nossa classe. Não iremos inicializá-la ainda.
Essa variável receberá um valor em radianos da anlgulação que queremos que a nossa imagem gire.
Agora novamente no início do método Update() iremos inicializar nossa variável planeRotation com o valor 0.0f, para que a cada loop se não pressionarmos Down ou Up nossa imagem seja desenhada da maneira original.
E dentro de cada bloco em que checarmos se pressionamos Down ou Up do teclado ou do Dpad do controller iremos atribuir uma angulação de acordo com o movimento que estamos fazendo.
Ainda temos que passar para o spriteBatch essa atualização na rotação que fizemos da nossa imagem para que ele possa desenha-la levando em consideração essas modificações. Então no método Draw():
Agora está quase tudo ok. Se rodarmos e mexermos um pouquinho veremos o porque nossa aplicação ainda não está 100%.
Ao vermos essa imagem até parece que está tudo bem com nossa aplicação, se algum de vocês já tiver rodado sua aplicação verá que não está tudo bem pois a imagem a esquerda mostra a posição do aviãozinho subindo após sua imagem estar flipada e a da direita mostra ele descendo após sua imagem estar flipada, deveria ser o contrário!
Corrigiremos isso invertendo a rotação caso a imagem estaja flipada, ou seja, ao desenharmos, quando fazemos o check se a imagem está flipada, antes iremos fazer com que o nosso planeRotation = -planeRotation.
Agora tudo estará rodando como desejamos. Podemos rodar e ver os resultados.
Resumo
Nesta parte extra do nosso tutorial Nossa Primeira Aplicação vimos como tratar a entrada do teclado e tembém uma entrada vinda do controller do XBOX360. Vimos também um pouquinho de como rotacionamos uma imagem que estamos desenhando na tela além de masi alguma pratica com blocos condicionais.
Espero que gostem e que estejam conseguindo fazer coisas interessantes a partir das noções que foram dadas aqui nesse primeiro tutorial que nos dá uma visão bem básica do XNA Game Studio e de aplicações 2D utilizando essa ferramenta.
Um comentário:
Uma dúvida.. quando o avião está voltando, apesar do angulo estar correto, a origem da rotação está errada.. como se corrige isso??
Postar um comentário