Tutorial - Nossa Primeira Aplicação - Parte 2/3

Esta segunda parte do nosso tutorial visa explicar um pouquinho sobre o código que já vem implementado ao criarmos um projeto no XNA Game Studio, adicionar uma imagem ao projeto e exibi-la na tela.

Na parte um do nosso tutorial criamos com sucesso nosso primeiro projeto e percebemos que ao rodar o nosso projeto sem fazer nenhuma alteração no código temos um "jogo" que é apenas uma tela azul e nada ocorre. Na verdade temos algumas coisas acontecendo por trás daquela tela azul que iremos analisar dentro do código que já nos é gerado pelo XNA Game Studio

Abriremos novamente o Visual C# 2005 Express Edition e o nosso projeto ou pela Start Page em Recent Projects ou por File->Open Project... se sabemos sua localização.

Voltamos a ter nosso Game1.cs aberto, caso o Game1.cs não esteja aberto no seu projeto é só dar um duplo clique em Game1.cs no Solution Explorer, vamos analisar o codigo implementado nesse arquivo.

Analisando o Código

Ao rolarmos o codigo e lermos um pouco ele vemos muitas coisas. Logo no início do arquivo temos vários using, temos o namespace do projeto e a classe Game1(public class Game1) que é a classe em que iremos nos focar pois é onde quase tudo acontece. Podemos perceber que a classe Game1 é uma classe derivada da classe Microsoft.Xna.Framework.Game (public class Game1 : Microsoft.Xna.Framework.Game) e esta é uma classe base do XNA framework que tem encapsulada criação de janelas, gráficos, audio entre outros.

Vamos nos focar nos métodos da classe Game1. Ao programarmos um jogo qualquer temos que inicializar tudo que iremos usar no nosso jogo e implementar o game loop que irá desenhar na tela, atualizar e interagir com a nossa lógica. O XNA Game Studio já nos fornece métodos de inicialização, de carregamento de conteúdo, de atualização e de desenho (protected override void Initialize(), protected override void LoadContent(), protected override void Update(GameTime gameTime), protected override void Draw(GameTime gameTime)).

Initialize()

É o método onde faremos todas as nossas inicializações não gráficas. Ele é chamado uma vez quando rodamos o nosso jogo. Não inicializamos as partes gráficas nele pois é comum um jogo ter que recarregar as partes gráficas por exemplo quando mudamos sua resolução.

LoadContent()

É o método onde carregaremos todos os gráficos do nosso jogo. Ele é chamado toda vez que o jogo tiver que carregar ou recarregar os gráficos como por exemplo o caso de mudança de resolução dado acima.

Update()

É o método onde adicionamos todos os cálculos do nosso jogo como leitura e processamento de entradas do usuário, movimentos , colisões, inteligência artificial entre outros. Ele é chamado diversas vezes durante um jogo pois faz parte do loop em que o jogo fica até seu fim.

Draw()

É o método onde inserimos todo o código responsável pela renderização dos objetos do nosso jogo, ou seja, é ele que desenha tudo na nossa tela.



obs: temos também o método UnloadContent() que não estou comentando pois geralmente não inserimos nenhum código extra nele pois ele tem a função de liberar recursos do nosso jogo mas isso já é feito automáticamente quando aquele recurso deixa de ser necessário.

Agora que já entendemos um pouco das partes em que nossa classe Game1 é dividida podemos começar uma parte mais divertida. Iremos adicionar a nossa imagem ao projeto e iremos exibi-la na tela.

Adicionando Nossa Imagem

Antes de iniciarmos irei disponibilizar uma imagem de um aviãozinho que desenhei especialmente para ilustrar este tutorial.

Cliquem na imagem acima e quando ela abrir na janela do seu browser salve ela com o nome "plane.png" em algum lugar do seu computador que você se lembre de onde ela estará.

Agora que já temos nossa imagem, iremos no Solution Explorer que fica do lado direito da janela do Visual C#, caso não esteja aparecendo clique no menu View->Solution Explorer.

Clicaremos com o botão direito em Content depois clicaremos em Add->Existing Item..., vamos até onde salvamos a imagem do nosso aviãozinho, caso esteja no lugar onde salvou o arquivo mas não esteja conseguindo ver o arquivo mude o Files of Type para Texture Files, clique no arquivo do nosso avião e clique Add.

Ao adicionarmos um arquivo gráfico ele é automáticamente adicionado ao Content Pipeline do XNA Framework o que permite um carregamento rápido e fácil do gráfico em nosso jogo. Agora devemos conseguir visualizar o arquivo adicionado também no Solution Explorer.

Exibindo a Imagem na Tela

Para exibirmos nossa imagem na tela ao rodarmos o nosso "jogo" devemos fazer algumas adições ao código.

A primeira delas é declarar, na classe Game1, abaixo das declarações de graphics e spriteBatch, uma variável que chamaremos de "myPlane" do tipo Texture2D. Essa variável irá armazenar a informação sobre a nossa imagem. Logo abaixo da declaração que acabamos de fazer, iremos declarar outra variável que chamaremos de "planePosition" do tipo Vector2. Essa outra variável armazenará a posição de nosso aviãozinho e iremos inicializá-la como um vetor zero como podemos ver abaixo.

Agora vamos ao método LoadContent() onde iremos inicializar a nossa variável "myPlane" com a imagem do nosso aviãozinho. Abaixo da atribuição feita a spriteBatch iremos chamar o método Content.Load passando o nome do nosso arquivo com a imagem que iremos exibir, no caso o "plane". Este código irá carregar e preparar o nosso gráfico para ser desenhado, além de recarregar nosso gráfico caso haja necessidade. Acompanhe melhor abaixo.

Agora vamos ao método Draw(). Nele iniciaremos o spriteBatch e através dele desenharemos nosso aviãozinho na posição zero da tela. Depois disso temos que terminar o spriteBatch. Esse código desenha nossa imagem a cada quadro.

Agora, se não tivermos feito nada de errado nem esquecido de implementar nenhuma etapa, ao rodarmos nosso programa, tanto na setinha verde de Start Debugging, ou com o F5 ou no menu Debug->Start Debugging aparecerá uma tela como a mostrada abaixo.

Pronto!

Resumo

Nesta parte do nosso tutorial conseguimos desenhar nossa primeira imagem na tela usando o XNA Game Studio! Nosso proximo passo será dar alguma movimentação a essa imagem e faze-la colidir com os limites da nossa tela.

Salve seu projeto e aguarde a ultima parte do nosso tutorial.