Curso XNA

Desenhando Sprites
Abra o Visual Studio e criei um novo projeto, selecionando File, New, Project, Na janela New Project selecione Windows Game (4.0), vamos cham-lo de DesenharSprite.

Curso XNA
Desenhando Sprites
Antes de qualquer coisa precisamos de uma imagem para o nosso sprite. No diretrio de compartilhado da rede voc ir encontrar um arquivo de nome NaveEspacial.png.

Curso XNA
Desenhando Sprites
Lembre-se de qualquer recurso deve ser adicionado ao projeto de contedo. Em nossa soluo foi criada automaticamente o projeto DesenharSpriteContent, como voc pode ver na imagem:

Curso XNA

Curso XNA
Desenhando Sprites
Para no haver erros no projeto necessrio organizar o contedo dentro do projeto de contedo, por isso clique com o boto direto sobre o projeto DesenharSpriteContent, selecione Add e New Folder.

Curso XNA
Desenhando Sprites
De o nome da pasta de Imagens. Vamos agora adicionar a imagem. Clique com o boto direito na pasta, selecione Add, Existem Item. Localize o arquivo NaveEspacial.png e adicione a soluo.

Curso XNA
Clique sobre a imagem a pouco adicionada para selecion-la e visualize a janela de propriedades:

Curso XNA
Desenhando Sprites
Observe a propriedade Asset Name. O valor desta propriedade a forma como faremos referencia a esta imagem em nosso cdigo, ou seja, o nome do arquivo irrelevante.

Curso XNA
Desenhando Sprites
O XNA Studio automaticamente define um Asset Name removendo a extenso do nome do arquivo, mas voc pode colocar o valor que quiser para esta propriedade. Vamos mante-la com o nome sugerido.

Curso XNA
Desenhando Sprites
Para desenhar o sprite vamos precisar de uma instancia da classe Texture2D, que suporta uma imagem bidimensional, e do mtodo Draw de uma instancia da classe SpriteBatch.

Curso XNA
Desenhando Sprites
Porm, se voc lembra-se da aula1 (ou recorde-se agora olhando o cdigo do projeto), o projeto j vem com uma instancia da classe SpriteBatch de nome spriteBatch.

Curso XNA
Desenhando Sprites
Tudo a fazer ento declarar o tipo Texture2D, carregar a imagem, e exibi-la atravs do mtodo Draw. Vamos ver o procedimento passo a passo.

Curso XNA
Primeiro declare a varivel sprite, do tipo Texture2D, em nvel de classe, o cdigo adicionado esta sublinhado nestes primeiros exemplos esta sublinhado para diferenciar do cdigo gerado pelo Visual Studio:

Curso XNA
Agora localize o mtodo LoadContent. Lembra que neste mtodo devemos carregar todos os nossos recursos? Bom, chegou a hora de carregar nosso sprite:

Curso XNA
O que fizemos? Carregamos o sprite para nossa varivel atravs do classe Load do gerenciador de contedo, processado atravs do Content Pipeline que estudamos na aula anterior. Veja que definimos o tipo do contedo, e o Asset Name do mesmo.

Curso XNA
Sprite carregado, tudo pronto para desenh-lo. Se voc lembra da aula anterior, o mtodo para desenhar na tela o Draw. O desenho deve ser feito atravs do mtodo spritebatch, que, como o nome sugere, permite que um lote de sprites sejam desenhados na tela num mesmo frame.

Curso XNA
O mtodo Draw possuir 7 sobrecargas. A assinatura que vamos utilizar recebe trs parmetros: um tipo Texture2D, onde obviamente informaremos nossa varivel sprite, um tipo Vector2, e um tipo Color, que define a cor com que o sprite ser pintando.

Curso XNA
Logo em seguida vamos falar mais sobre o tipo Vector2 e como funciona o sistema de coordenadas em 2D. Semelhante a uma transao de banco de dados, temos que indicar o incio e o fim do lote de desenhos usando os mtodos Begin e End.

Curso XNA
Logo em seguida vamos falar mais sobre o tipo Vector2 e como funciona o sistema de coordenadas em 2D. Semelhante a uma transao de banco de dados, temos que indicar o incio e o fim do lote de desenhos usando os mtodos Begin e End.

Curso XNA

Curso XNA
Execute a aplicao. Se tudo deu certo, voc ver a tela com na imagem abaixo:

Curso XNA
Sistema de Coordenadas em Jogos 2D
Antes de darmos movimento a nosso sprite, precisamos entender como o sistema de coordenas em jogos 2D funciona.

Curso XNA
Sistema de Coordenadas em Jogos 2D
O sistema semelhante ao sistema de coordenadas cartesianos, sendo o eixo X horizontal, e o eixo Y vertical, tambm chamados de abscissa e ordenada.

Curso XNA
Sistema de Coordenadas em Jogos 2D
A diferena que no sistema de jogos em 2D, o ponto de coordenadas (0,0) esta localizado na parte superior esquerda do plano, enquanto que no sistema cartesiano, esta localizado tambm a esquerda, porm na parte inferior.

Curso XNA
Sistema de Coordenadas em Jogos 2D
No sistema de Jogos 2D, qualquer valor negativo significa que o objeto estar abandonando os limites da tela. Isto indica que para movermos objetos temos sempre que considerar a altura e a largura da tela, ou seja, a resoluo.

Curso XNA
Sistema de Coordenadas em Jogos 2D
No sistema de Jogos 2D, qualquer valor negativo significa que o objeto estar abandonando os limites da tela. Isto indica que para movermos objetos temos sempre que considerar a altura e a largura da tela, ou seja, a resoluo.

Curso XNA

Curso XNA
Sistema de Coordenadas em Jogos 2D
Para movermos um objeto horizontalmente, basta incrementarmos o valor de X, da mesma forma, para movermos verticalmente, incrementamos Y. Alterando os dois valores simultaneamente, obtemos um movimento obliquo.

Curso XNA
Sistema de Coordenadas em Jogos 2D
No segundo parmetro do nosso mtodo Draw, indicamos a posio em que o sprite seria desenhado, passando coordenadas X e Y atravs do objeto Vector2. Zero informa coordenadas zero, tanto para X quanto para Y.

Curso XNA
Consideraes sobre transparncia
Antes de partirmos para o movimento de nosso sprite, vamos ver algumas consideraes importantes sobre transparncia.

Curso XNA
Consideraes sobre transparncia
J que imagens possuem sempre formatos retangulares, precisamos de alguma forma definir reas transparentes, ou teremos um jogo formando por pilhas de retngulos, o que no seria nada agradvel.

Curso XNA
Consideraes sobre transparncia
Existem duas formas de determinar reas transparentes em uma imagem. Primeiramente, voc pode definir reas transparentes atravs do canal alfa de um arquivo do tipo PNG, usando um editor de imagens como o Photoshop ou Gimp.

Curso XNA
Consideraes sobre transparncia
A outra forma adicionar a cor Magenta nas reas em que deseja que haja transparncia. Neste caso podemos usar inclusive um bitmap, como o utilizado em nosso exemplo.

Curso XNA
Consideraes sobre transparncia
Se voc no precisa de recursos sofisticados de edio de imagens, poder aplicar o Magenta at com o prprio PaintBrush que acompanha o Windows.

Curso XNA
Consideraes sobre transparncia
Para tal basta abrir a imagem, clicar em editar cores, definir Vermelho como 255, Verde como 0, e Azul 255 ( o que equivale a RGB (255,0,255), clique em adicionas as cores personalizadas e em seguida aplique sobre a rea que dever ser apresentada com transparncia:

Curso XNA

Curso XNA
Movendo o Sprite
Mover no Sprite na tela relativamente simples. Declaramos um tipo Vector2 em nvel de classe, incrementamos os valores de X e/ou Y desta varivel no mtodo Update. Depois, s substituir o segundo parmetro do mtodo Draw, onde temos Vector2.Zero, pela nossa varivel.

Curso XNA
Movendo o Sprite
Vamos por partes. Primeiro declaramos nossa varivel vetor do tipo Vector2 a nvel de classe:

Curso XNA
Movendo o Sprite
Incrementamos X da varivel vetor no mtodo Update:

Curso XNA
Movendo o Sprite
Finalmente, alteramos nosso mtodo Draw:

Curso XNA
Rode a aplicao e veja nossa nave espacial se movimentado verticalmente no topo da tela:

Curso XNA
Movendo o Sprite
O movimento apenas vertical porque estamos incrementando apenas o valor de X. Para fazer um movimento obliquo, incrementamos X e Y: ++vetor.X; ++vetor.Y;

Curso XNA
Movendo o Sprite
Veja que o objeto se movimenta lentamente, para aumentar a velocidade, basta atribuir um valor superior a X e/ou a Y: vetor.X += 5; vetor.Y += 5;

Curso XNA
Respeitando os limites da Tela
Se voc acompanhar seu jogo por alguns instantes, vai notar que a nossa nave espacial vai desaparecer no infinito e nunca mais voltar.

Curso XNA

Respeitando os limites da Tela

Ao invs de desaparecer, vamos fazer com a nave ricocheteie nas bordas da janela, assumindo a direo contrria.

Curso XNA
Respeitando os limites da Tela
Para produzir tal cdigo, devemos verificar se a posio da Nave no eixo X esta maior que a largura da tela a largura do sprite, ou ainda, se a posio X menor que zero.

Curso XNA
Respeitando os limites da Tela
Para o eixo Y a lgica semelhante, verificamos se a posio do sprite esta maior que altura da janela menos a altura do sprite, ou se esta menor que a posio zero.

Curso XNA
Respeitando os limites da Tela
A largura atual da janela pode ser obtida inspecionado-se a propriedade Window.ClientBounds.Width, j para a altura, inspecionamos Window.ClientBounds.Height.

Curso XNA
Respeitando os limites da Tela
A largura atual da janela pode ser obtida inspecionado-se a propriedade Window.ClientBounds.Width, j para a altura, inspecionamos Window.ClientBounds.Height.

Curso XNA
Respeitando os limites da Tela
Porm como inverter a direo? Existem vrias formas. Uma maneira interessante seria criar uma varivel auxiliar, velocidade, que determinaria o incremento da posio no eixo X ou Y.

Curso XNA
Respeitando os limites da Tela
Ao intersectar umas das bordas da janela, esta varivel seria multiplicada por -1, consequentemente a direo da nave espacial mudaria, e o sprite assumiria a direo contrria.

Curso XNA
Respeitando os limites da Tela
Primeiramente declaramos uma varivel velocidade do tipo Vector2 em nvel de classe:

Curso XNA
Respeitando os limites da Tela
No mtodo Inicialize inicializamos a velocidade. Usamos o valor 3, ou seja, a sprite dever se mover a 3 pixels por frame.

Curso XNA
Respeitando os limites da Tela
No mtodo Inicialize inicializamos a velocidade. Usamos o valor 3, ou seja, a sprite dever se mover a 3 pixels por frame.

Curso XNA
Finalmente, altere seu mtodo Update para fazer com a imagem ricocheteie, invertendo o incremento da varivel velocidade: