Eai galera, após algumas semanas fazendo meus trabalhos do mestrado decidi tirar uma rápida folga para escrever a parte 3 do tutorial que vai tratar de detalhar o movimento da bola e escrever a pontuação dos jogadores na tela.
Movimento da bola
Vamos analisar neste momento o que precisamos para fazer uma bola se movimentar no nosso jogo.
Na figura acima podemos ver que para uma bola se movimentar precisamos de um vetor que vai indicar qual direção a bola ira se mover, e também vamos precisar definir uma velocidade de movimento. Sendo assim, a próxima posição pode ser definida como a posição atual somada ao vetor direção multiplicado pela velocidade. Simples não?
Vamos começar a ver então como isso vai ficar em nosso jogo, abra o projeto que estamos desenvolvendo, para quem não tem o projeto clique aqui. E vamos então definir inicialmente a velocidade da bola e o seu vetor direção inicial. Para isso clique no arquivo Ball.cs e modifique os seguintes atributos do construtor da bola.
public Ball(Vector2 newPosition, Texture2D loadedTexture)
{
this.texture = loadedTexture;
this.position = newPosition;
// Define direcao em X = 1 e Y = 1
this.direction = new Vector2(1, 1);
// Define velocidade em X = 3 e Y = 3
this.speed = new Vector2(3, 3);
}
O que fizemos então, definimos a velocidade X e Y da bola em 3 pixels e nosso vetor direção com o valor 1 para X e 1 para Y, ou seja quando multiplicarmos velocidade por 1, o valor será a própria velocidade, e isso incrementado a posição vai dar o deslocamento positivo em X e Y da bola. Mas para a bola se movimentar precisamos atualizar sua posição então abra o arquivo Game1.cs e acrescente a seguinte linha de código abaixo antes das entradas do teclado do jogador 1 e 2.
// Atualiza a posição da bola</p>
// posição = posição anterior * direcao * velocidade
ball.position += ball.direction * ball.speed;</p>
Pronto, se você executar o programa agora, você verá a bola andando na diagonal para baixo a direita e vai sumir da tela. Para ela não atravessar o campo na parte inferior precisamos limitar seu movimento e caso ela ultrapasse esse limite modificamos seu vetor direção.
Primeiramente vamos limitar seu movimento ao colidir com a parte superior e inferior do campo, para isso digite logo abaixo das entradas do teclado no método Update() o seguinte código.
// Checa colisões da bola com as paredes do campo
// Verifica se a bola colidiu em baixo
if (ball.position.Y + ball.texture.Height > 570)
{
ball.direction.Y *= -1;
}
// Verifica se a bola colidiu em baixo
if (ball.position.Y < 70)
{
ball.direction.Y *= -1;
}
Veja, quando a posição y da bola é maior que 570 a linha inferior do campo, mudamos o vetor direção para -1, ou seja a seta do nosso vetor vai inveter o sentido. O mesmo acontece para quando a posição y da bola é menor que 0. Mas se executar o programa agora você verá a bola colidir com a parte inferior do campo porem ela vai sumir a direita e não vai aparecer novamente, pois quando ela ultrapassa a direita ou a esquerda da tela algum jogador recebe pontos por ter marcado um gol e logo em seguida a bola volta ao centro do campo para recomeçar a partida. Como fazer isso?
Colocado a pontuação dos jogadores
Vamos definir uma variavel para armazenar os pontos dos jogadores, então logo abaixo de definir so objetos raquetes, escreve o seguinte código.
// Objets Raquetes</p>
Bat bat1, bat2;</p>
// Score do jogo
int[] score = new int[2];</p>
Agora precisamos quando o jogo começar dizer para nosso score que os jogadore tem 0 pontos. Então no método Initialize() digite o seguinte código após inicializarmos o objeto raquete 2.
// Inicializando o score dos jogadores</p>
score[0] = 0; // Jogador 1
score[1] = 0; // Jogador 2
Então agora quando a bola passar os limites de tala a direita (0) e a esquerda (800), precisamos fazer a bola retornar a sua posição inicial e aumentar um ponto no score do outro jogador. Digite o seguinte código logo após o código de fazer a bola colidir com o campo.
// Verifica se alguem marcou ponto
// Se a bola passar pela direita da tela
if (ball.position.X + ball.texture.Width > 800)
{
score[0] += 1; // aumenta um ponto ao score do jogador 1
// Coloca a bola no centro do campo novamente
ball.position = new Vector2(393, 313);
// Muda a direção de disparo da bola
ball.direction.X *= -1;
}
// Se a bola passar pela esquerda da tela
if (ball.position.X < 0)
{
score[1] += 1; // aumenta um ponto ao score do jogador 2
// Coloca a bola no centro do campo novamente
ball.position = new Vector2(393, 313);
// Muda a direção de disparo da bola
ball.direction.X *= -1;
}
Agora se executar o jogo poderá ver a bola ultrapassar a posição do campo de um jogador, aumentar um ponto do jogador que marcou ponto, retornar a bola ao centro e mudar a direção x da bola fazendo que ao recomeçar a partida a bola comece para o outro lado. Agora com o movimento da bola funcionando precisamos somente exibir a pontuação na tela para informar quanto esta a partida, para isso vamos definir uma definir uma font arial de tamanho 30 como o nome de gameFont.spritefont.
Clique com o botão direito do mouse em Content -> Add -> New Folder e coloque o nome da pasta como Fonts, após fazer isso clique com o botão direito na pasta Fonts que acabou de criar Add -> New Item e selecione SpriteFont colocando o de gameFont. Se Solution Explorer é para ficar como a figura abaixo.
Vamos agora criar uma variável do tipo SpriteFont e carregar nossa font no método LoadContent(). Então abaixo do local onde declaramos nosso score, vamos fazer a seguinte declaração.
// SpriteFont para escrever na tela
SpriteFont font;
E no método LoadContent() após carregar o background do jogo digite o seguinte código para carregar a font.
// Carrega a font para escrita
font = Content.Load<SpriteFont>(@"Fonts\gameFont");
Legal galera, o ultimo passo é só desenhar o score na tela, para fazermos isso vamos no método Draw() logo após desenha a bola e vamos digitar o seguinte código.
// Desenhando o score do jogador 1 no centro do quadrado
Vector2 textSize = font.MeasureString(score[0].ToString());
spriteBatch.DrawString(font, score[0].ToString(), new Vector2(300, 35) - textSize/2, Color.White);
// Desenhando o score do jogador 2 no centro do quadrado
textSize = font.MeasureString(score[1].ToString());
spriteBatch.DrawString(font, score[1].ToString(), new Vector2(500, 35) - textSize/2, Color.White);
O que estamos fazendo, estamos declarando um vetor com o nome de tamanho do texto (textSize), e estamos falando que ele recebe o tamanho em pixel da escrita do valor. Para que isso? Para desenhar nosso texto em um centro especifico, pois assim como ao desenhar imagens ele desenha de um ponto (x,y) para frente, ou seja quando nossa pontuação aumentar da casa unitária para casa decimal, ele vai ficar fora do centro do quadrado da nossa imagem. Sendo assim, pegamos o centro do local que queremos desenhar menos metade do tamanho desta escrita e começamos a desenhar a partir deste (x,y), mantendo sempre a escrita do score no cento do quadrado.
E acho que por hoje é isso pessoal, se não nos esquecemos de nada, podemos rodar nossa aplicação e ver o resultado da nossa janela com a imagem de fundo, caso não tenha erros.
Para fazer download do projeto clique aqui.
Resumo do tutorial
Aprendemos como funciona o movimento continuo de um objeto dentro do jogo, criamos então o movimento da bola não deixando ela sair fora do campo e colocamos também a pontuação dos jogadores.
No próximo tutorial, vamos colocar os efeitos sonoros de batida, rebatida, pontuação e uma música de fundo, além de colocar colisões da bola com a raquete.
