Ir para conteúdo
Entre para seguir isso  
sequeled

Tutorial - Nossa Primeira Aplicação -p1

Recommended Posts

sequeled    0
sequeled

retirado do camello - xna

alterado e atualizado por Sequeled.

Tutorial - Nossa Primeira Aplicação

 

 

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# 2008 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.

 

coordenadas.jpgPor 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étodoDraw() 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.

 

meuprojeto_update_position.jpgNo 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.

 

meuprojeto_aviao_mov.jpgSe 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.

 

meuprojeto_velocity.jpgAgora, 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 ographicsDeviceManager.

 

meuprojeto_viewport.jpg

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 umbool 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.

 

meuprojeto_flip_declaration.jpg

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.

 

meuprojeto_flip_update.jpgAgora 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.

 

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

 

meuprojeto_aviao_flip.jpg

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.

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
Eventide    7
Eventide

XNA suporta 3D? Tem como fazer em outras linguagens que não seja C#? Compila no Mono também ou só no visual studio?

Compartilhar este post


Link para o post
Compartilhar em outros sites
sequeled    0
sequeled

suporta 3d, é possível fazer em outras linguagens e compila no mono também, porém a maneira mais facíl de se compilar e criar um projeto no xna é em c#.

Compartilhar este post


Link para o post
Compartilhar em outros sites
Eventide    7
Eventide

eu tava pensando em aprender xna mas agr descobri q ele não dá suporte a um monte de placa de video, incluindo a minha... (descobri isso depois de tentar rodar um jogo feito no XNA)

Compartilhar este post


Link para o post
Compartilhar em outros sites
Haxy    0
Haxy

Nego tem preguiça de trabalhar uns meses no açougue pra ter um pc decente e ainda coloca a culpa na microsoft, afastar pobre não é bug, é feature!

Compartilhar este post


Link para o post
Compartilhar em outros sites
LsM    2
LsM

XNA é uma merda vei, faz a engine no c++ e pronto x_x...

Compartilhar este post


Link para o post
Compartilhar em outros sites
Eventide    7
Eventide
XNA é uma merda vei, faz a engine no c++ e pronto x_x...

Concordo que XNA é uma merda, mas para um desenvolvedor indie fazer a sua própria engine(mesmo que usando opengl ou directx como base) é perda de tempo, nem empresas grandes fazem isso, o tempo que você perde dizendo a sua placa de video o que ela tem que fazer poderia estar desenvolvendo coisas que sejam realmente interessantes para o jogador, sem falar que é no mínimo pretensioso achar que você sozinho conseguirá fazer melhor que todas as cabeças que desenvolvem a engine a vários anos.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Faça login para comentar

Você vai ser capaz de deixar um comentário após fazer o login



Entrar Agora
Entre para seguir isso  

  • Quem Está Navegando   0 membros estão online

    Nenhum usuário registrado visualizando esta página.

×