Neste tutorial veremos, passo a passo, como criar um jogo 2D simples. Este tutorial foi baseado nos videos
.
Esta é a primeira parte do nosso tutorial de
como criar um jogo 2D com o XNA Game Studio. Aqui vamos rever como criar um novo projeto e como adicionar imagens ao nosso projeto. Vamos ver também como carregar e desenhar na tela uma imagem de fundo no nosso jogo.No nosso jogo teremos basicamente um navio, seus mísseis e aviões. O objetivo do jogo é, controlando o canhão do navio, conseguir acertar o maior número de aviões que passarem voando na tela.
Criando um Novo ProjetoPrimeiramente vamos começar criando um novo projeto. No
Visual C# 2005 Express Edition vamos no menu
File->New Project..., ou apenas
Ctrl+Shift+N. Selecionaremos como
Project Type: XNA Game Studio 2.0 e como
Template: Windows Game. O
Name do projeto eu chamei de
Belonave e procurando na
Wikipédia temos a seguinte definição: "
Belonave é a designação de qualquer tipo de embarcação, fluvial ou marítima, para utilização em combate.", o que tem muito a ver com nosso jogo. Também selecionaremos o
Location que acharmos melhor para armazenarmos nosso projeto em nosso PC. Em
Solution escolheremos a opção
Create a new Solution, deixaremos a opção
Create directory for solution marcada e clicaremos em
OK.
Salvando as Imagens e Adicionando ao ProjetoAgora que criamos nosso novo projeto, já podemos ver no
Solution Explorer os arquivos que o compõem. Ainda não modificaremos nenhum arquivo. Antes vamos baixar e adicionar ao projeto as imagens que usaremos em nosso jogo. Clique em cada imagem abaixo e, com o botão direito do mouse, salve elas em seu PC com os seguintes nomes:
backgroundTexture:
shipCannon:
cannonMissile:
enemyPlane:

Para organizarmos melhor nossas imagens, após telas salvo em nosso PC, vamos voltar ao
Visual C# 2005 Express Edition e vamos clicar com o botão direito do mouse em
Content, no
Solution Explorer,
Add->New Folder e nomearems essa nova pasta como
Sprites. Mais uma vez na
Wikipédia encontramos a seguinte definição: "
Sprite é um objeto gráfico bi ou tridimensional que se move numa tela sem deixar traços de sua passagem.". Nessa pasta ficarão armazenadas todas as imagens que usaremos em nosso projeto.
Clicando com o botão direito do mouse na pasta recém criada, no
Solution Explorer dentro de
Content,
Add->Existing Item e vamos ao local onde salvamos nossas imagens. Selecionaremos e adicionaremos cada uma delas.
Carregando e Desenhando a Imagem de FundoDepois que já tivermos todas as imagens adicionadas ao projeto na pasta
Sprites vamos começar a modificar nosso código. Caso ainda não esteja aberto, abriremos o arquivo
Game1.cs clicando duas vezes nele no
Solution Explorer. Com o arquivo aberto, procuraremos a classe
Game1 dentro dele. Abaixo de
GraphicsDeviceManager graphics; iremos declarar a variável que será responsável pela imagem de fundo do nosso jogo. Essa variável será do tipo
Texture2D e se chamará
backgroundTexture. Abaixo de nossa variável
backgroundTexture vamos declarar outra variável, que será responsável por definir a área máxima que um objeto poderá ter. Esta será do tipo
Rectangle e a chamaremos de
viewportRect. Essas variáveis que acabamos de declarar ficaram acima do
SpriteBatch spriteBatch; que é uma classe do
XNA framework que utilizaremos para desenhar todas as imagens que usamos nesse tutorial.

Para carregarmos nossa imagem de fundo no nosso jogo, vamos ao método
protected override void LoadContent() que como vimos em nosso primeiro tutorial, é um método que é chamado quando o jogo inicia e ele carrega todas as imagens que precisamos durante o jogo. Logo abaixo de
spriteBatch = new SpriteBatch(GraphicsDevice); vamos carregar nossa imagem de fundo na nossa variável
backgroundTexture. Para isso vamos usar o método
Load<>() da classe
Content Manager.
Ainda no método protected override void LoadContent(), abaixo da atribuição que acabamos de fazer para carregar nossa imagem de fundo, vamos instanciar nosso viewportRect atribuindo a ele as nossas medidas da tela começando em (0, 0) e termonando em (width, height) da Viewport.
Agora que a carregamos, desenharemos a nossa imagem de fundo na tela. Para isso usaremos a classe SpriteBatch spriteBatch; e nosso Rectangle viewportRect; que acabamos de inicializar. Vamos então ao método protected override void Draw(GameTime gameTime). Como vimos no nosso primeiro tutorial o método Draw() é o responsável por redesenhar a tela a cada quadro. É nele que a tela é limpa e que desenhamos cada objeto que desejamos que apareça no nosso jogo. Abaixo do graphics.GraphicsDevice.Clear(Color.CornflowerBlue); vamos acrescentar o bloco que nos permite desenhar na tela.Iniciamos com o método Begin() do spriteBatch, desenhamos com o método Draw() do spriteBatch e ao terminarmos finalizamos com o método End() do spriteBatch. No método Begin() podemos passar como parametro o SpriteBlendMode.AlphaBlend que nos permite desenhar imagens com transparencia. No método Draw() iremos passar como parametros nossa textura, um retangulo que especifica onde a sprite será desenhada, e uma cor que por default estamos usando o branco. O método End() não recebe parametros.
Se não tivermos esquecido de nada, podemos rodar nossa aplicação sem erros e conseguiremos ver a janela do nosso jogo já com a nossa imagem de fundo no lugar.
ResumoNesta primeira parte do nosso tutorial de como criar um jogo 2D com o XNA Game Studio revimos como criar um novo projeto e como adicionar imagens ao nosso projeto. Vimos como carregar e desenhar na tela uma imagem de fundo no nosso jogo.Na segunda parte do nosso tutorial de como criar um jogo 2D com o XNA Game Studio veremos como criar uma nova classe para representar os outros objetos do nosso jogo. Com essa classe iremos carregar o canhão do navio no nosso projeto. Iremos também desenha-lo na tela e faze-lo girar com os comandos do teclado ou de um controle do xbox360.