Tutorial de XNA - Parte I

Aproveitando a folga depois das provas e do SEC onde ministrei um Mini-Curso de C#, eu resolvi brincar um pouco com o XNA e aproveitei para escrever um pequeno texto, a cada parte do meus estudos eu vou publicar aqui um "mini artigo", espero que vocês gostem :-)

--------------------------------------

Tutorial de XNA – Parte I
Para o melhor entendimento deste material é necessário que o leitor tenha conhecimentos prévios de C# e de orientação a objetos.

Como bom “RPGista” que sou, sempre gostei de jogos e ainda tenho a vontade de criar os meus, para tanto já tinha até iniciado meus estudos em Allegro[1] , o que não foi assim tão amigável. Eu não tive tempo de concluir o meu primeiro experimento em allegro por causa da semana de provas na universidade, sem falar do retorno do grupo de estudos de .NET e do trabalho, resolvi então retomar o estudo dos jogos unindo o útil ao agradável, o grupo de .NET e o Framework para desenvolvimento de jogos da Microsoft, o XNA.

Comecei então a pesquisar a respeito, primeiro as definições formais, as novidades, porque usar e por fim, a parte mais prazerosa que é montar um jogo de exemplo. Então, sem mais delongas, vamos a introdução ao XNA, espero que este texto seja útil para outras pessoas.

O que é XNA?

Bom, como todo framework, o XNA é uma plataforma para desenvolvimento que visa facilitar em algum nível o desenvolvimento de aplicações, no caso os jogos. Por exemplo, ao desenvolver jogos, o programador precisa criar, dentre outras coisas, um loop principal, onde ficam as etapas básicas que todo jogo deve ter, como carregamento de recursos, atualização dos dados do “mundo” do jogo, desenho das cenas com as modificações e descarga de recursos, isso o XNA já traz para você. Sem falar que dependendo dos recursos usados o mesmo jogo produzido para PC pode rodar em outras plataformas (como o XBOX). Resumindo, como muitas iniciativas da Microsoft o XNA visa facilitar em muita coisa o desenvolvimento de jogos.

Mas, deixemos de “bla-bla-bla” e vamos à prática. Você pode encontrar maiores informações no endereço: http://msdn2.microsoft.com/en-us/xna/default.aspx

O software necessário para reproduzir este tutorial:
- Visual C# Express
- Visual Game Studio 1.0

Você pode baixar ambos do site da Microsoft.

Começando o projeto.

Para iniciar o estudo, vamos criar um projeto do tipo “Windows Game”, quando aparecer o código do “template” nós vamos apagar e recomeçar o nosso código, assim vamos entender melhor o que cada parte do código faz.

Para tanto vá até “File -> New Project” e depois escolha “Windows Game”.

No “Solution Explorer” (onde aparecem os componentes do projeto) vão aparecer dois arquivos “Program.cs” e “Game1.cs”, apague os dois, eles contem código pronto para uma estrutura básica do jogo, nós vamos criar o nosso código.

Agora adicione um arquivo em branco onde nós vamos começar a criar o nosso projeto, para tanto, clique com o botão direito dentro do “Solution Explorer” no nome do projeto e vá até a opção “Add” e depois “New Item” e selecione “Class”, dê um nome ao arquivo e pronto.

A estrutura do jogo.

Como eu já havia citado antes, a maioria dos jogos possui alguns elementos comuns em suas estruturas de controle, como um loop “geral”, um local para carregamento de recursos, um para atualização do “mundo”, um para descarga e outro para desenho. No XNA a classe “Game” fornece essa estrutura.

Vamos ao código:

Primeiro vamos adicionar os namespaces necessários para a estrutura do jogo, no caso para poder usar a classe Game do XNA.

using System;
using Microsoft.Xna.Framework;

Agora vamos herdar da classe Game uma nova classe que vai conter a estrutura do nosso jogo:

//o código da classe jogo, herdado da classe pai "Game"

class jogo : Game
{
//construtor da classe
public jogo()
{

}
}

Repare que eu apenas criei a classe, herdando os membros da classe Game e depois criei um construtor que ainda está vazio. Agora, o código da rotina principal da aplicação:

class novo_jogo
{
static public void Main() //método principal da aplicação
{
jogo teste = new jogo();
teste.Run();
}

}

Com esse código já será criada uma janela para a nossa aplicação, mas, nada foi feito ainda. Vale ressaltar que agora usaremos a estrutura herdada da classe game na nossa aplicação, ela nos fornece um loop principal para o jogo, cuida da inicialização dos dispositivos e provê alguns métodos que nós iremos sobrescrever para criar a lógica do nosso jogo.

Agora vamos aos métodos da classe game que serão utilizados na nossa estrutura:

Draw -> Chamado quando o jogo determina seu tempo específico de renderização. Iremos sobrescrever esse método para criar nossas rotinas de desenho das imagens.

Initialize -> Chamado depois que “Game” e GraphicsDevice são criados, mas, antes de LoadGraphicsContent.

LoadGraphicsContent -> Chamado quando os recursos gráficos precisam ser carregados, iremos sobrescrever esse método para carregar nossas imagens.

UnloadGraphicsContent -> Chamado quando os recursos gráficos precisam ser descarregados.

Update -> Chamado quando a lógica do jogo precisa ser atualizada, aqui criaremos as rotinas que manterão nosso “mundo” atualizado.

Eu fiz uma tradução rasteira da documentação do XNA no Msdn, portanto perdoem os erros de tradução. Logicamente, fiz uma “reescrita” no texto explicativo para adapta-lo as necessidades deste documento.

Configurando o ambiente.

Agora precisamos configurar o nosso jogo de acordo com o ambiente onde ele está rodando, coisas como resolução, cores, etc. Para fazer isso, vamos modificar o código da nossa classe jogo, deixando-o da seguinte forma:

class jogo : Game
{
//permite a configuração do ambiente
GraphicsDeviceManager config_am;

//construtor da classe
public jogo()
{
GraphicsDeviceManager config_am = new GraphicsDeviceManager(this);
}
}

Repare que depois disso até a cor de fundo da nossa aplicação já recebe um valor “default”. :-D

Agora adicione os seguintes namespaces:

using System;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.Graphics;

E finalmente podemos cuidar do código para carregar e exibir a imagem.

Primeiro, vamos adicionar um ContentManager que é usado para gerenciar nossos recursos (os arquivos de texturas, por exemplo) e depois vamos instancia-lo no nosso construtor.

class jogo : Game
{
//permite a configuração do ambiente
GraphicsDeviceManager config_am;
//gerenciador dos recursos
ContentManager recursos;

//construtor da classe
public jogo()
{
GraphicsDeviceManager config_am = new GraphicsDeviceManager(this);
recursos = new ContentManager(Services);
}
}

Agora, antes de carregar propriamente os recursos, vamos adicionar a imagem da textura ao nosso projeto, para tanto, criamos uma pasta no Solution Explorer com o nome “imagens” e depois adicionamos o arquivo contendo a textura aqui chamado de “bola.jpg”

Agora clique com o botão direito na imagem e depois em “Properties” e procure pela propriedade “Asset Name”, ela será usada para referenciar a imagem dentro do projeto.

No caso desse documento, o Asset Name usado é “bola”.

A Classe “Game” do XNA chama automaticamente o método “LoadGraphicsContent” para carregar os recursos, como estamos herdando dessa classe, vamos aproveitar esse método para carregar as nossas texturas, para fazer isso, vamos sobrescreve-lo.

//método para carregar a textura.
protected override void LoadGraphicsContent(bool loadAllContent)
{
if (loadAllContent)
{
textura = recursos.Load(@"imagens\bola");

}
}

Nele testamos se os recursos já foram carregados através do parâmetro “LoadAllContent” e depois carregamos o que for necessário. Repare que usamos o objeto “recursos” que é o nosso gerenciador de recursos e que foi instanciado no construtor da classe, nele chamamos o método Load que informando o tipo de objeto que vamos carregar (no caso uma textura 2D) e por final passamos uma string com o asset name da imagem, como criamos uma pasta para a imagem, devemos preceder o nome com a pasta, o arroba é usado para passar a string do “jeito que está” desprezando os caracteres especiais.

Pronto, agora passaremos a imagem para um sprite e depois mostraremos ela na tela.

A Classe Game do XNA também possui um método DRAW que é chamado automaticamente e que serve para incluir o código onde os objetos são desenhados, iremos sobrescrever esse método na nossa classe, para desenhar a nossa imagem. Mas, antes vamos adicionar um objeto “SpriteBatch” a nossa classe que vai servir para desenhar de fato a imagem e depois vamos instancia-lo, também vamos adicionar um objeto vector2 que chamaremos de “posicao” e que será a posição do desenho na tela. O código da nossa classe ficará assim:


//o código da classe jogo, herdado da classe pai "Game"

class jogo : Game
{
//permite a configuração do ambiente
GraphicsDeviceManager config_am;
ContentManager recursos;

//texturas
Texture2D textura;

//sprite
SpriteBatch sprite;

//struct para posição, inicializado no zero (x = 0 e y = 0)
Vector2 posicao = Vector2.Zero;

//construtor da classe
public jogo()
{
config_am = new GraphicsDeviceManager(this);
recursos = new ContentManager(Services);

}

//método para carregar a textura.
protected override void LoadGraphicsContent(bool loadAllContent)
{
if (loadAllContent)
{
textura = recursos.Load(@"imagens\bola");
sprite = new SpriteBatch(config_am.GraphicsDevice);

}
}

//método para desenhar na tela
protected override void Draw(GameTime gameTime)
{
sprite.Begin();
sprite.Draw(textura, posicao, Color.White);
sprite.End();

}
}

Repare nas linhas em que instanciamos o objeto “sprite” e depois no método Draw onde desenhamos efetivamente o sprite na tela.

Pronto, por agora já é o bastante, na próxima etapa do tutorial eu mostrarei como movimentar os objetos.


[1] Biblioteca gráfica multiplataforma que pode ser usada para desenvolver jogos em C ou C++.