Ponto V!

Home XNA XNA Criando seus próprios jogos para XBox 360 – Parte III
Alexandre Lobão
Criando seus próprios jogos para XBox 360 – Parte IIIImprimir
Escrito por Alexandre Lobão

Bem vindos à terceira e última parte desta série de artigos sobre como utilizar o XNA para criar seus próprios jogos que rodam no XBox 360 - e no Windows, de quebra!

Nos dois números anteriores, nós vimos como é possível, com menos de 20 linhas de código, criar um jogo quase completo – o “Tennis for one”. Neste jogo simples, que lembra o Pong (um dos primeiros jogos de fliperama e de console), você controla os dois bastões, um de cada lado da tela, para rebater a bola.

No primeiro artigo vimos como carregar imagens a serem usadas no jogo. No artigo passado, vimos como alterar a posição destas imagens na tela, utilizando os dois thumbsticks do gamePad para controlar os bastões, e incluindo um código simples para mover a bola. Para concluir nosso jogo, vamos agora escrever o código para rebater a bola nos cantos da tela e nos bastões.

Rebater a bola na parte de cima da tela é simples: basta inverter a velocidade se a coordenada Y da bola (armazenada na variável posBola) for menor do que zero, já que a coordenada Y começa do zero, na parte de cima da tela. Assim, inclua no método Update a da classe Game1 as seguintes linhas:

if (posBola.Y + velBola.Y < 0)
   velBola.Y *= -1;

Lembrando: tanto a posição quanto a velocidade da bola são do tipo Vector2, um tipo de dados especial que armazena duas posições (X e Y). Multiplicando a velocidade por -1, invertemos o valor de X e de Y, gerando o efeito da rebatida.

Para rebater na parte de baixo da tela, o teste é semelhante, sendo que devemos lembrar de dois detalhes: A tela possui (como padrão, podendo ser mudado via código) 600 pixels de altura; e para rebater desde a parte “de baixo” da bola , precisamos somar o tamanho da bola - 16 pixels – pois sua posBola é a posição do canto superior direito da bola:

if (posBola.Y + 16 + velBola.Y > 600)
   velBola.Y *= -1;

Seguindo o mesmo raciocínio, podemos testar as bordas direita e esquerda da tela, com uma diferença nestes casos: Ao invés de quicar a bola, vamos colocá-la de novo no centro da tela, e contar pontos (armazenados em duas novas variáveis, pontosDir e pontosEsq) para cada um dos lados da tela. Assim, defina as novas variáveis no início da classe Game1:

int pontosDir = 0; 
int pontosEsq = 0;

E no método update, vamos incluir novos testes:

// Bola saiu pela direita, conta pontos para a esquerda
if (posBola.X + 16 + velBola.X > 800)
{
   pontosEsq += 1;
   posBola = new Vector2(400f, 300f);
}

// Bola saiu pela esquerda, conta pontos para a direita
if (posBola.X + velBola.X < 0)
{
   pontosDir += 1;
   posBola = new Vector2(400f, 300f);
}

Se executarmos nosso programa agora, a bola vai quicar nos cantos de cima e de baixo da tela, e somar pontos e reiniciar quando saindo pelos lados. Para completar nosso jogo, precisamos apenas mostrar a pontuação na tela, e fazer os bastões rebaterem a bola.

Para calcular se a bola está batendo no bastão, precisamos testar se alguma das coordenadas X,Y da bola está entre as coordenadas X,Y do bastão.

Neste caso, não há como fugir de um pouco de matemática. Lembrando que a bola tem 16 pixel de altura e de largura; que o bastão tem 16 pixels de largura e 96 de altura; precisamos testar se as coordenadas da bola estão entre as coordenadas do bastão. Para o bastão da esquerda, que é fixo na posição 20 da tela (conforme o código que escrevemos no primeiro artigo desta série) este teste seria:

if (posBola.X < (20+16) && posBola.X + 16 > 20 
   && posBola.Y < posBastaoEsquerda + 96 
   && posBola.Y + 16 > posBastaoEsquerda)
{
   velBola *= -1;
}

O código pode parecer meio confuso a princípio, mas desenhe a bola e o bastão com suas coordenadas em um papel e acompanhe o código que você entenderá melhor. Caso queira explicações mais detalhadas, basta procurar por “detecção de colisão” e “XNA” na internet, que você encontrará diversos sites falando do assunto – inclusive o do autor deste artigo, com aulas completas sobre jogos com XNA.

Para fazer o teste com o bastão da direita, basta repetir o mesmo código, trocando o número 20 por 764, a posição do bastão da direita.

Por fim, vamos ver como escrever a pontuação na tela.

Primeiramente, precisamos adicionar uma fonte em nosso projeto. Para isso, clique com o botão da direita sobre a palavra “content” (conteúdo) na janela “Solution Explorer”, e selecione “Add / New Item” (adicionar novo item). Na janela que aparece, selecione SpriteFont, e dê o nome “FontePontos”. Pressionando OK, será criada uma nova fonte com este nome em seu projeto.

Para usar esta fonte, precisamos criar, no início da classe Game1, um objeto do tipo SpriteFont.

SpriteFont fonte;

Depois, precisamos associar este objeto com a fonte de criamos, incluindo no método LoadContent a linha:

fonte = Content.Load("FontePontos");

Por fim, para escrever na tela, basta agora adicionar uma linha ao método “Draw”, dentro do bloco de desenho com spriteBatch que criamos no primeiro artigo:

spriteBatch.DrawString(fonte, pontosEsq.ToString() + ":" + pontosDir.ToString(), new Vector2(380, 20), Color.Yellow);

Com esta linha, estamos convertendo as variáveis de contagem de pontos para string (o tipo de dados usado para armazenar texto), posicionando o texto na posição 380 em X (mais ou menos no centro da tela) e 20 em Y (pouco abaixo do topo), e com a cor amarela.

clip_image002

Rodando o jogo agora, podemos ver que os bastões rebatem a bola, e quando erram, um ponto é contabilizado para o adversário.

Nosso “jogo”, então, está pronto. Obviamente, há muitas melhorias a fazer para que ele se torne mais desafiador, como por exemplo considerar a velocidade do bastão e a posição de contato com a bola para rebatê-la em ângulos diferentes, mas nosso objetivo aqui não é criar o mais novo “hit” do Xbox Live, mas sim mostrar os primeiros passos para a criação de seus próprios jogos!

Enquanto novos artigos do Ponto V! não vem, você pode saber mais sobre XNA vendo diversos slides com aulas interessantes sobre o assunto no site http://www.AlexandreLobao.com, incluindo como carregar modelos 3D, uso de som, conceitos básicos para jogos em rede, e outros! Outra excelente fonte em português é o site http://www.sharpgames.net, onde você pode ficar informado sobre as novidades mais recentes do XNA!


Comentários (2)
  • leonardo  - joogo xbox
    avatar

    team q ser no xna pago pra fazer o jogo ou não? :dry:

  • Vinícius Godoy de Mendonça
    avatar

    Para fazer o jogo, não, é de graça.

    Para publicar na Live, existe uma taxa, mas é beeeeem baixa. Coisa de U$9,99 por ano.

Escrever um comentário
Your Contact Details:
Gravatar enabled
Comentário:
[b] [i] [u] [url] [quote] [code] [img]   
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch::(:shock:
:X:side::):P:unsure::woohoo::huh::whistle:;):S:!::?::idea::arrow:
Security
Por favor coloque o código anti-spam que você lê na imagem.
LAST_UPDATED2  

Busca

Linguagens

Twitter