Tutorial - Nosso Primeiro Jogo 2D - Extra

Este será o nosso último tutorial da série de desenvolvimento do nosso primeiro jogo 2D. Esse tutorial foi baseado nos vídeos Beginners Guide to 2D Games encontrado no site creators.xna.com.

Nesta última parte iremos surpreender os jogadores do nosso simples jogo com explosões bem legais a cada destruição.

Salvando as Novas Imagens e Adicionando ao Projeto

Começaremos esta parte do nosso tutorial, adicionando ao nosso projeto as imagens que usaremos para a explosão e a fumaça de nossas explosões. Para isso vamos salvar as imagens abaixo com seus seguintes nomes em nosso PC clicando com o botão direito do mouse.

explosion:

smoke:
Agora, no Visual C# Express Edition, no Solution Explorer, vamos clicar com o botão direito do mouse na pasta Sprites que está dentro de Content. Agora iremos adicionar as novas imagens assim como fizemos com as outras, clicando em Add->Existing Item e selecionando as novas imagens no local onde as salvamos.


Criando o Sistema de Particulas

Para fazer as explosões dos aviões inimigos no nosso jogo iremos precisar de um sistema de particulas para que fiquem mais realistas as explosões e a fumaça.

Assim ainda no solution explorer, vamos criar uma nova classe que será a responsável por cada particula de efeito no nosso jogo, clicando em Belonave->Add->New Item->Class, o nome do arquivo se chamará Particle.cs.

Essa nossa classe será uma classe pública, assim vamos mudar a declaração dela para public class Particle. E não podemos esquecer também de mudar os using para os do XNA como na figura abaixo.


Nossa partícula terá os seguintes atributos: position; velocity; acceleration; lifetime, por quanto tempo a particula ficará viva; timeSinceStart, quanto tempo já passou desde que ela foi criada; scale; rotation; rotationSpeed, a velocidade da rotação da particula; e também o isActive, que indicará se a partícula ainda está "viva".


Nossa partícula também terá dois métodos, um para inicializa-la e um para atualiza-la. O primeiro irá inicializa-la em uma posição, com uma velocidade e aceleração, um tempo em que ficará viva, sua escala e a velocidade de sua rotação. Daremos também, ainda nesse primeiro método, o tempo desde que foi iniciada a particula como 0.0 já que esse método é o que inicializa nossa particula. Se estivermos atentos iremos perceber que ainda falta inicializarmos a rotação, mas isso faremos em outro momento mais a frente.


Agora trataremos da parte de atualização da nossa particula. O que faremos basicamente é manter os atributos dela atualizados a cada intervalo de tempo.

Agora que temos nosso modelo de particula, podemos criar o nosso sistema de particulas, que será responsável por gerenciar todas as particulas do nosso jogo. Assim como fizemos para criar o Particle.cs, vamos fazer o mesmo para criar o ParticleSystem.cs.

Mas nessa nossa nova classe, não só trocaremos os using, e tornaremos ela pública, como também a tornaremos abstrata e faremos ela herdar da classe DrawableGameComponent. Isso significa que ela irá proporcionar as funcionalidades básicas para criarmos um efeito de partículas. Outras subclasses irão extender os efeitos dessa classe de uma maneira mais customizada.


Ela terá acesso a diversos atributos de outras classes como do objeto ao qual daremos o efeito de explosão e fumaça. Teremos também um gerador de números randomicos para dar mais realidade ao nosso efeito.


Outras constantes também serão necessárias pois serão usadas nos sistemas de particulas mas especializados que criaremos a seguir. Continuaremos na linha onde paramos anteriormente.



Agora poderemos passar para o construtor da nossa classe. No construtor receberemos o nosso Game, o numero de particulas que esperamos ver na tela a cada momento e o nome da nossa textura.

Nossa classe terá também a implementação das funções Initialize, LoadContent, Update e Draw. Mas antes de começarmos a implementá-las, temos que implementar diversos métodos auxiliares para nosso sistema de particulas, ainda continuando abaixo de onde paramos antes.
Agora abaixo das implementações que acabamos de fazer, vamos implementar os métodos Initialize:

LoadContent:

Update:

e Draw:

E temos também que lembrar que deixamos para setar o atributo rotation da classe Particle, o que faremos agora:

Sistemas de Particulas Customizados

Agora que já temos a base do nosso sistema de particulas, podemos começar a trabalhar nos nossos sistemas especializados em explosões e fumaça. Como fizemos para adicionar o Particle.cs e o ParticleSystem.cs, vamos adicionar também mais dois arquivos ao nosso projeto, o ExplosionParticleSystem.cs e o SmokeParticleSystem.cs.

Faremos também as mesmas alterações dos using que fizemos nos outros arquivos e tornaremos estas classes também públicas e as faremos herdar do nosso recém finalizado ParticleSystem.

Devido ao grande trabalho que tivemos implementando o nosso ParticleSystem, nessas nossas classes especializadas, só precisaremos implementar três funções: a InitializeConstants(), InitializeParticle() e o construtor delas.

Começaremos pela classe ExplosionParticleSystem:

Seu construtor:
InitializeConstants:

InitializeParticle:
Agora na classe SmokeParticleSystem:

Seu construtor:
InitializeConstants:

Agora, para finalizarmos, devemos ir a nossa classe Game.cs e fazer as seguintes alterações:

Mais algumas variáveis:


Construtor:
UpdateCannonMissiles:

Ahh... ainda em Game.cs não podemos esquecer de um último detalhe:


Se não nos esquecemos de nenhum detalhe, podemos rodar nosso jogo e veremos explosões e fumaças realistas ao derrubarmos cada aeronave inimiga.

Resumo

Esta foi a ultima parte do nosso tutorial de como criar um jogo 2D com o XNa Game Studio. Nela conseguimos criar um sistema de particulas e simular explosões e fumaça no nosso jogo... Poderiamos expandir esse sistema para abordar outras formas de particulas como um brilho mágico, neblina, sei lá, depende da sua imaginação.

Espero que as coisas fiquem bem claras e qualquer dúvida não exitem em entrar em contato comigo, via comentários, via e-mail, etc.

Sei que ficou bastante "cuspido" esta ultima parte, mas é resultado da minha falta de tempo, por isso estou bem aberto para responder a duvidas sejam quais forem.

Espero que tenha ajudado e que a maioria tenha gostado.

Em breve colocarei uma enquete aqui para saber qual será a temática do próximo tutorial.

Abraços a todos.

Tutorial - Nosso Primeiro Jogo 2D - Parte 6

Neste tutorial veremos, passo a passo, como criar um jogo 2D simples. Este tutorial foi baseado nos vídeos Beginners Guide to 2D Games encontrados no site creators.xna.com.

Esta é a sexta parte do nosso tutorial de como criar um jogo 2D com o XNA Game Studio. Aqui veremos como manter e atualizar o controle da pontuação do nosso jogo. Mas antes...

Pesquisando sobre as colisões em jogos 2D, encontrei um método de verificar a colisão por pixel que funciona checando se os pixels de uma imagem intercedem algum pixel de uma outra imagem. Assim podemos tornar nossas colisões mais realistas pois só irão colidir se os pixels das duas imagens entrarem em contato.

Atualizando as Colisões

No nosso arquivo GameObject.cs vamos adicionar um vetor de cores que chamaremos de textureData e que armazenará a informação dos pixels dos nossos objetos.

No arquivo Game1.cs, onde carregamos nossos mísseis, e onde carregamos as aeronaves inimigas, vamos carregar também os vetores de textura de cada um deles.

Agora que temos os dados das texturas de cada imagem, tanto dos mísseis como das aeronaves inimigas, vamos criar no final do arquivo Game1.cs o método IntersectPixels que receberá os retangulos que envolvem duas imagens e suas informações de textura e retornará verdadeiro ou falso caso essas imagens colidam ou não. Esse método também está disponível no site creators.xna.com.

Por último, na função UpdateCannonMissiles(), no trecho em que testávamos a colisão dos mísseis com as aeronaves inimigas, vamos utilizar o método que acabamos de criar.

Se não esquecemos de nada e modificamos tudo direito o projeto deve compilar e rodar sem problemas e agora com colisões mais precisas.

Agora podemos partir para nosso placar. rs.

Criando e Carregando o Arquivo de Definição de Fonte

Para criarmos o nosso controle da pontuação do jogo, precisaremos criar um arquivo que descreverá a fonte que usaremos para escrever algo na tela. Assim, no Solution Explorer, vamos criar uma sub pasta dentro da pasta Content. Clicando com o botão direito na pasta Content, no Solution Explorer, Add->New Folder. Chamaremos essa nova pasta de Fonts.

Após a criação da nossa nova pasta chamada Fonts, iremos clicar com o botão direito nela e Add-> New Item. Aparecerá na tela uma janela para adicionarmos um novo item ao nosso projeto. Selecionaremos adicionar um Sprite Font cujo nome será gameFont.spritefont.

Clicando no botão Add veremos o arquivo gameFont.spritefont ser adicionado ao projeto dentro da pasta em que o inserimos no Solution Explorer e uma nova aba aberta exibindo o conteúdo do nosso novo arquivo. Esse arquivo não é descrito em C# mas em XML que é uma linguagem criada para descrever dados. O nosso arquivo XML está organizado de modo que descreve as informações de nossa fonte.

Faremos algumas alterações nesse arquivo para que fique de acordo com o que desejamos em nosso jogo. Dentro das tags que descrevem o nome da nossa fonte, FontName, iremos colocar o nome da fonte que desejamos utilizar no nosso jogo e que tenhamos no nosso sistema, neste caso usaremos a fonte Arial. Logo abaixo das tags de nome da nossa fonte, temos as tags Size, responsáveis pelo seu tamanho e iremos alterá-la para 18. Feitas essas alterações, podemos salvar nosso arquivo.

Agora iremos ao arquivo Game1.cs e no início do arquivo, logo depois das declarações de variáveis que fizemos para os inimigos vamos declarar mais algumas. A primeira variável que iremos declarar é um inteiro chamado score para computar os pontos que o jogador fizer, logo após iremos declarar uma variável do tipo SpriteFont chamada font que será a representação da nossa fonte e por último um vetor da posição da tela onde nosso placar será desenhado.

Dentro da função LoadContent() iremos carregar com a variável font nossa fonte ao Content Pipeline como fizemos com todas as outras imagens do nosso jogo.

Antes de desenhar nosso placar na tela, vamos verificar como estamos computando as baixas das aeronaves inimigas.

Atualizando a Pontuação a Cada Colisão

No método UpdateCannonBalls() temos um trecho de código que identifica as colisões dos mísseis com as aeronaves inimigas. Dentro da condição que checa essa colisão vamos incrementar a nossa variável score para que ela registre o número de inimigos que derrubamos.


Desenhando o Placar na Tela

Vamos ao método Draw(). Após o trecho de código onde desenhamos nossos inimigos, iremos utilizar o spriteBatch mais uma vez para desenharmos nosso placar. Mas dessa vez utilizaremos sua função DrawString().

Se não nos esquecemos de nenhum detalhe podemos rodar o jogo e teremos nosso placar no canto esquero superior da tela e a cada aeronave que destruimos ele será atualizado.

Resumo

Nesta sexta parte do nosso tutorial de como criar um jogo 2D com o XNA Game Studio vimos como adicionar um placar para a contagem de inimigos que acertamos durante o jogo.

Na sétima e última parte do nosso tutorial de como criar um jogo 2D com o XNA Game Studio veremos como animar um pouco mais as cenas inserindo explosões realistas a cada colisão.

Tutorial - Nosso Primeiro Jogo 2D - Parte 5

Finalmente, depois de muita espera, o tutorial do nosso primeiro jogo 2D está de volta. Tive alguns problemas com meu PC, que infelizmente "pifou" e não pude continuar postando. Como ainda não estão nos meus planos consertar meu PC, tive que tomar uma atitude quanto a continuidade dos nossos tutoriais... Instalar o Visual C# e o XNA aqui no PC do trabalho! Isso implica em ficar horas a mais "trabalhando"... rs

Neste tutorial veremos, passo a passo, como criar um jogo 2D simples. Este tutorial foi baseado nos vídeos Beginner's Guide 2D encontrados no site creators.xna.com.

Esta é a quinta parte do nosso tutorial de como criar um jogo 2D com o XNA Game Studio. Aqui veremos como calcular a colisão dos mísseis com as aeronaves inimigas e destrui-las. Também veremos como criar e atualizar nossa pontuação.

Detectando a Colisão entre os Mísseis e as Aeronaves

Atualmente no nosso jogo, quando um míssil cruza com uma aeronave inimiga nada acontece, cada um desses objetos continua seu trajeto como se nada tivesse acontecido. Não é esse efeito que desejamos durante o jogo. Gostariamos que quando o míssil encontrasse a aeronave inimiga, ambos desaparecessem indicando a colisão. Para isso, vamos ao método UpdateCannonMissiles(). Nele verificamos, para cada míssil, se o mesmo ainda está "vivo". Se estiver, apenas o "matamos" caso esteja fora da tela, que é a checagem mais básica que podemos fazer. Para checarmos se o míssil encontra a aeronave inimiga faremos uma checagem um pouco parecida. Assim, logo depois do final do escopo da checagem do caso do míssil ainda estar dentro da tela, criaremos um retângulo que é do tamanho da textura do nosso míssil, e que a cada loop do nosso jogo estará iniciado de acordo com a posição do míssil.

Agora teremos que criar outro retângulo, que compararemos com esse, para saber se eles colidem ou não. Criaremos retângulos ao redor das aeronaves inimigas, que são os objetos com os quais desejamos identificar colisões. Ainda dentro do método UpdateCannonMissiles(), logo em seguida do trecho que acabamos de escrever, faremos um loop em que, para cada aeronave inimiga, criaremos um retângulo. Testaremos também se há interseção entre esses dois retângulos e, se houver, "mataremos" tanto o míssil quanto a aeronave.


Para conseguirmo visualizar melhor as colisões, vamos alterar o valor das variáveis MaxCannonMissiles e MaxEnemyPlanes para 3. Esse modo de verificar colisões através de retângulos é o jeito mais simples de verificarmos colisões mas não é muito bom, pois a forma de nossos objetos não são retangulares o que causa algumas detecções mesmo sem haverem colisões. Se não nos esquecemos de nenhum detalhe podemos rodar nosso jogo e teremos os mísseis colidindo com as aeronaves.


Resumo

Nesta quinta parte do nosso tutorial de como criar um jogo 2D com o XNA Game Studio vimos como detectar as colisões dos mísseis de nosso Belonave com as aeronaves dos inimigos.

Deixarei para uma sexta parte do nosso tutorial como manter e atualizar a pontuação do nosso jogo e nesse finalzinho me focarei em algumas alterações que devemos fazer para melhorar a experiencia do jogo, principalmente com relação a esse recém introduzido sistema de colisões.

Alterações

Como pudemos perceber, nosso sistema de colisões está muito falho. Muito desse problema se deve ao seguinte fato: Utilizamos uma imagem grande para as aeronaves e a reduzimos no momento em que a desenhamos. Com isso, ao gerarmos o retangulo com as dimensões da aeronave, o fazemos baseado nas dimensões da imagem grande, o que causa grande erro nas nossas detecções de colisão. A alternativa mais simples que temos para esse caso é diminuir a imagem das aeronaves inimigas que adicionamos ao projeto com o nome de EnemyOne.png.


Ao baixarmos a imagem acima, temos que adiciona-la no projeto substituindo a que estavamos usando. Primeiramente podemos excluir do projeto a imagem da aeronave que já estamos usando. Faremos isso clicando com o botão direito do mouse em cima da imagem que está em Content->Sprites no Solution Explorer.


Agora podemos clicar com o botão direito na pasta Sprites e selecionar Add->Existing Item..., onde procuraremos e adicionaremos a nova imagem reduzida da aeronave.


Também teremos que fazer uma alteração no código do nosso jogo 2D. Onde desenhavamos a aeronave como sendo 65% da imagem original, podemos desenha-la sendo 100% da nova imagem redimensionada. Assim passaremos para a função Draw do spriteBatch 1.0f que é a escala que desejamos desenhar nossa aeronave.


Com essas alterações, se não nos esquecemos de nenhum detalhe podemos rodar nosso jogo e teremos as imagens no tamanho que estavam antes, mas a detecção de colisões teve uma notável melhora, pois agora estamos desenhando retângulos do tamanho das imagens que estamos desenhando.

Finalização

Na sexta parte do nosso tutorial de como criar um jogo 2D com o XNA Game Studio iremos descobrir como mantemos e atualizamos o controle da pontuação do nosso jogo.

Tutorial - Nosso Primeiro Jogo 2D - Parte 4

Neste tutorial veremos, passo a passo, como criar um jogo 2D simples. Este tutorial foi baseado nos videos Begginers Guide 2D encontrados no site creators.xna.com.

Esta é a quarta parte do nosso tutorial de como criar um jogo 2D com o XNA Game Studio. Aqui veremos como criar as aeronaves inimigas para que apareçam em posições randomicas do canto direito da tela.


Adicionando e Inicializando as Variáveis Relacionadas as Aeronaves

Agora vamos então começar a trabalhar para colocarmos os inimigos no nosso jogo. No arquivo Game1.cs, na classe Game1, abaixo de onde declaramos as variáveis previousgamepadstate e previouskeyboardstate iremos declarar mais uma série de variáveis ligadas as aeronaves inimigas. Assim como fizemos com os mísseis, os inimigos também terão um número máximo e um array, mas além disso teremos as velocidades mínima e máxima possiveis a uma aeronave inimiga, e a altura mínima e máxima onde é possível um inimigo aparecer. Teremos também uma variável que gerará um valor randomico para nós sempre que precisarmos.

Assim como fizemos com os mísseis, temos que inicializar nosso array de inimigos. Vamos então ao método LoadContent() e abaixo do for onde inicializamos nosso array de mísseis vamos instanciar nosso array de inimigos e inicializar cada posição desse array com o uso de um loop.


Atualizando as Aeronaves Inimigas

Depois de inicializar nossos inimigos vamos então ao método Update() e abaixo da chamada ao método UpdateCannonMissiles() vamos fazer outra chamada, só que agora ao método UpdateEnemyPlanes(). Como fizemos no caso dos mísseis, esse método ainda não existe e teremos que implementa-lo.

Para criar o nosso método vamos ao final do método Update() e depois da chave que termina esse método vamos implementar o nosso método UpdateEnemyPlanes(). Esse método irá "matar" as aeronaves inimigas assim que elas forem saindo da tela para que novas aeronaves possam ser desenhadas na tela.

Ainda estamos considerando apenas o caso de a aeronave inimiga "morrer" por sair da tela para redesenha-las. Assim ainda no método UpdateEnemyPlanes() utilizaremos um bloco else logo após o bloco if em que checamos se o inimigo está "vivo". Nesse bloco tornaremos o inimigo vivo de novo e faremos ele nascer em uma nova posição aleatória e com uma nova velocidade aleatória.


Desenhando e Alterando o Tamanho dos Inimigos na Tela

Agora já podemos desenhar as aeronaves inimigas na tela. Usaremos um overload do método Draw do SpriteBatch que nos possibilide alterar a escala da nossa Sprite visto que se desenhassemos a imagem original as aeronaves ficariam muito maiores que o resto dos objetos do jogo e não ficaria tão legal o visual do nosso jogo.

Se não nos esquecemos de nenhum detalhe podemos rodar nosso jogo e teremos aeronaves se movimentando da direita para a esquerda a alturas e velocidades aleatórias.


Resumo

Nesta quarta parte do nosso tutorial de como criar um jogo 2D com o XNA Game Studio vimos como criar e desenhar as aeronaves inimigas na tela em posições e com velocidades aleatórias e também mudando seu tamanho ao desenha-las.

Na quinta parte do nosso tutorial de como criar um jogo 2D com o XNA Game Studio veremos a destruição das aeronaves inimigas devido colisão dos nossos mísseis com as mesmas e também como manter e visualizar a pontuação em nosso jogo.