Microsoft XNA

Autor
Luciano Lima (lima@lucianolima.com.br): é Microsoft Certified Professional C#, trabalhou em várias
empresas dentre elas estão CEF (Caixa Econômica Federal) e FGV (Fundação Getúlio Vargas), na área de
Desenvolvimento de sistema. Atualmente presta serviços de consultoria em Desenvolvimento e Integração de
Sistemas para empresas no Brasil e Estado Unidos utilizando a plataforma .Net. Tem como hobby o
desenvolvimento de games utilizando XNA e C#.

Gravata
XNA é o novo Framework desenvolvido pela Microsoft para a criação de jogos para
Windows e Xbox 360.
Introdução
Olá a todos, hoje vamos dar inicio a uma série de artigos sobre o novo framework para desenvolvimento de
jogos criado pela Microsoft, o Microsoft XNA Framework.

Pois bem, muitos devem estar se perguntando o que vem a ser esse tal de XNA, vamos tentar esclarecer ao
máximo essa questão.

Microsoft XNA é o novo framework desenvolvido pela Microsoft para auxiliar os desenvolvedores no
processo de criação de jogos tanto para Windows quanto Xbox 360. A Microsoft manteve em segredo esse
framework até meados de 2004, quando ele foi anunciado oficialmente na Games Developers Confere. A
primeira versão lançada foi o XNA 1.0 e se deu por volta de novembro de 2006, era um framework novo, pouco
conhecido mas que já ajudava bastante o programador a criar seus jogos para Windows sem se aprofundar
demais no DirectX. Com o passar do tempo a Microsoft fez modificações consideráveis no XNA Framework
principalmente no que diz respeito a conexões em rede que antes na versão 1.0 não existia. Atualmente foi
lançada a versão 2.0 que, inclusive, será a versão que iremos trabalhar em nossos artigos.

O XNA possui uma rica API para criação de jogos 3D assim como jogos 2D, além de permitir a manipulação
de som e entrada de dados como teclado, mouse e joystick (XBox 360).

O Microsoft XNA Framework incorpora as funcionalidade do DirectX, sendo assim os desenvolvedores não
precisarão se “preocupar” tanto em utilizar funções diretas e dll’s do DirectX para manipulação de Texturas,
acesso a certas funcionalidades como reconhecer qual tecla foi pressionada dente outras. Mas ai vem a pergunta
básica!! Então o DirectX irá sumir? A resposta é NÃO. O que ocorre na verdade é que o DirectX foi incorporado
pelo XNA, ou seja, os recursos disponíveis no DirectX agora estão presentes no XNA Framework mas de uma
maneira mais fácil e rápida de serem utilizados. Como exemplo disso, temos a manipulação de texturas, o que
antes devíamos programar altos códigos, agora passa a ser apenas uma linha de código utilizada para que
possamos carregar uma imagem sem nos preocuparmos em saber qual a extensão ou como iremos tratar o
arquivo.

O Microsoft XNA Framework, nos permite desenvolver jogos para Windows e para Xbox 360 com uma
agilidade que antes era quase impossível, além da total compatibilidade entre ambos, pois compartilham do
mesmo Framework de desenvolvimento.

Todas as ferramentas para trabalhar com desenvolvimento para PC são distribuídas gratuitamente pela
Microsoft, basta apenas realizar o download e instalá-la em sua maquina.

Já o desenvolvimento para Xbox é necessário uma assinatura (licença) junto ao XNA Creators Club no valor
de U$99,00 anual ou U$49,00 por 04 (quatro) meses.

Em resumo, podemos definir o XNA como sendo uma iniciativa da Microsoft para facilitar ao máximo o
desenvolvimento de jogos, onde ela leva ao desenvolvedor entusiasta e até mesmo a outros tipos de
desenvolvedores como os profissionais, a praticidade na criação de seus jogos.

Agora que sabemos um pouco sobre o XNA, vamos dar uma olhada em suas camadas antes de iniciarmos
o processo de instalação.
 Figura 1 – Camadas do XNA Framework:

Como podem ver na figura 1, temos as seguintes camadas:

Plataforma (Direct3D, XACT, XInput e XContent) – é a base do XNA, API´s de baixo nível;

Framework (núcleo) (Graphics, Áudio, Input, Math e Storage) – é o núcleo do framework e provê
funcionalidades que vem da base como gráficos, entrada de dados, funções matemáticas e armazenamento;

Framework (extensão) – é a camada que faz com que o XNA se torne uma ferramenta prática para o
desenvolvimento de games e aplicações utilizando DirectX, nela temos o Modelo de Aplicação, que é
responsável pelo trabalho maçante, como criação e gerenciamento de janelas, game looping e funções do
DirectX. E temos também o Content Pipeline que é o responsável por processar os dados do jogo como
Texturas, carregamento de objetos (modelos 3D), som e entrada de dados.

Jogos:

- Starter Kits: são kits iniciais que foram desenvolvidos para auxiliar os desenvolvedores a entender a
tecnologia do XNA;
- Código: não é nativo, você os desenvolve;
- Conteúdo: formado pelas comunidades, fóruns e todos aqueles que contribuem para o melhoramento
do Framework;
- Componente: são códigos criados por terceiros, mas que podem ser incluídos nos jogos até mesmo
para minimizar o processo de codificação. Exemplos disso são códigos para trabalhar com câmera,
elementos gráficos e muitos outros.

Requisitos

O que é preciso para eu poder começar a desenvolver meus jogos?

 Bem, antes de qualquer coisa, seu computador deverá possuir alguns requisitos básicos, pois sem eles não
iremos conseguir desenvolver nossos jogos.

Para desenvolvermos na plataforma Windows serão necessários os seguintes requisitos:

• Windows XP SP2 ou Windows Vista;

• Visual C# 2005 Express Edition (com SP1 – Service Pack 1)
• Runtime do DirectX
• Placa de vídeo compatível com Direct3D 9.0 e Shader Model 2.0
• Runtime do XNA e do DirectX

No caso do Xbox será necessário:

• Um HD.

Os softwares e utilitários poderão ser baixados nos endereços como segue abaixo:

• Microsoft Visual C# 2005 Express Edition - IDE de programação para o C#.

http://msdn.microsoft.com/vstudio/express/downloads/

• Visual C# 2005 com Service Pack

http://download.microsoft.com/download/7/7/3/7737290f-98e8-45bf-
9075-85cc6ae34bf1/VS80sp1-KB926749-X86-INTL.exe

• XNA Game Studio - Framework de programação gráfica.

http://msdn2.microsoft.com/en-us/xna/aa937795.aspx

Instalação

Não Iremos detalhar a instalação dos softwares por ser algum muito simples. O único requisito é que você
instale os softwares como mostrado na seqüência abaixo:

1. Instale o Visual C# Express;

2. Abra o Visual C# Express e crie um projeto windows form, rode o programa, isso é para garantirmos que
o Visual C# foi instalado com sucesso e está rodando perfeitamente;
3. Instale agora o Service Pack 1 do Visual C# Express;
4. Por último, instale o XNA Game Studio Express.

Feito isso estamos prontos para começarmos nosso desenvolvimento. Vamos lá?
 Criando o primeiro projeto

Agora que já temos tudo instalado e funcionando vamos criar nosso primeiro projeto, para isso vamos abrir
o Visual C# Express e selecionar na lista Project Type: Visual C# -> XNA Game Studio 2.0, e como Template
vamos selecionar Windows Game (2.0). Dê o nome ao projeto de “PrimeiroProjetoXNA”, selecione um diretório
onde queira salvar seus projetos e clique Ok, conforme a figura 2.

Figura 2 – Criação do Projeto

 Feito isso, o Visual C# irá gerar um projeto Windows Game onde teremos uma série de arquivos que iremos
utilizar para criarmos nossos jogos.

Para ver a lista de arquivos criados, passe o mouse sobre o “Solution Explorer” ele irá mostrar uma lista
como na figura 3.

Figura 3 – Solution Explorer

Na figura 3 temos uma lista de arquivos, vamos ver um por um e para que server cada um deles.

Content: pasta onde serão colocados todos os arquivos do jogo assim como imagens, texturas, sons e
modelos 3D;
Game.ico: ícone que ira aparecer no seu executável depois de compilado o jogo;
Game.cs: este é o arquivo principal, ele é responsável por inicializar os objetos, carregas as imagens e
sons, desenhar e atualizar os quadros do jogo;
Program.cs: responsável por efetuar a chamada ao método principal da class Game1.cs .

Agora, volte ao editor, sua class Game1.cs já estará aberta e é nela que iremos começar nossa codificação.

A class Game1 contém 6 metodos que são:

public Game1() – método padrão, responsável por carregar as variáveis graphics e

a pasta Content;

protected override void Initialize() – este método é responsável por inicializar

o objetos que não serão utilizados pela engine gráfica. Um exemplo disso seria o
carregamento de um XML contendo toda a configuração do jogo ou um profile do
jogador;
 protected override void LoadContent() – esse método é responsável por carregar
todos os objetos gráficos do jogo, assim como Texturas, Modelos 3D e Sons;

protected override void UnloadContent() – este método é responsável por

descarregar os objetos não utilizados, porém não é muito utilizado já que o sistema
faz a liberação dos objetos automaticamente;

protected override void Update( GameTime gameTime ) – esse metodo é responsável

por gerar as atualizações do jogo, ele fica em constante repetição com isso é
possível chamar métodos para verificar teclas precionadas, colisão de objetos e
personagens dentre outros;

protected override void Draw( GameTime gameTime ) – método responsável por

“desenhar” tudo no jogo. Este método é bem parecido com o Update, porém sua
responsabilidade é apenas desenhar.

Agora que você já conhece as funcionalidades da class Game1, clique no icone ou precione F5, o
Visual C# irá compilar nosso projeto, mesmo não que nos não tenhamos digitado código algum ele irá gerar uma
tela conforme a figura 4.

Figura 4 – Tela do projeto

 Vamos agora fazer algumas modificações em nosso projeto.

Primeiro, vamos modificar o tamanho da tela, o texto do form e a cor de fundo da janela, para isto basta
digitar o código como na listagem 1 dentro do método Initialize.

Listagem 1 – Código para modificar a janela principal

protected override void Initialize()

{
// TODO: Add your initialization logic here

//Altera o tamanho da janela para 640x480

graphics.PreferredBackBufferWidth = 640;
graphics.PreferredBackBufferHeight = 480;

//não deixa que a tela fique no modo Fullscreen

graphics.IsFullScreen = false;

//Altera o título da janela

Window.Title = "Janela modificada";

//Aplica as alterações
graphics.ApplyChanges();

base.Initialize();
}

Para mudarmos a cor de fundo da tela devemos mudar a cor dentro do método Draw, para isso faça a
modificação conforme listagem 2.

Listagem 2 – Alterando a cor de fundo

graphics.GraphicsDevice.Clear( Color.CornflowerBlue );

Para

graphics.GraphicsDevice.Clear( Color.Black );

Feito isso, compile novamente o projeto, a tela apresentada deverá ficar como a figura 6.
 Figura 6 – Nova Janela do projeto

Agora que já sabemos modificar a janela (nossa Luciano, não diga!!) vamos tornar este artigo mais
interessante (não se preocupem, não vou fazê-los escrever “hello word” !!!..rsrs).

Primeiro vamos arrumar uma imagem de uma bola, mas dê preferência para uma imagem que tenha um
fundo transparente, assim teremos um efeito melhor. Caso não consigam, no final do artigo irei colocar o link
para download de todo o projeto.

Bola no formato PNG com fundo transparente

Agora que já temos uma bola, vá ao Solution Explorer e clique com o botão direto em “Content”, selecione
Add -> Existing Item, e procure a imagem da bola, depois clique em Ok. Como disse anteriormente, é no folder
Content que adicionamos nossos modelos, texturas, sons dentre outros objetos que serão utilizados no jogo.
 Figura 7– Adicionando uma imagem ao projeto

Feito isso, vamos voltar a nossa classe Game1. Volte para o inicio da classe e adicione o seguinte código:
Texture2D imgBola; ele deverá ficar como na listagem 3.

Listagem 3 – Declarando um Texture2D

public class Game1 : Microsoft.Xna.Framework.Game

{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;

Texture2D imgBola;

Agora vamos carregar nossa imagem, vá para o método LoadContent() e digite o código como na listagem
4.

Listagem 4 – Inicializando o objeto Bola

protected override void LoadContent()

{
// Create a new SpriteBatch, which can be used to draw textures.
spriteBatch = new SpriteBatch( GraphicsDevice );

imgBola = Content.Load<Texture2D>( "bola" );

// TODO: use this.Content to load your game content here
}

Com isso inicializamos nosso objeto bola do tipo Texture2D, esta é uma das melhorias feitas em relação ao
DirectX e ao Managed DirectX, onde digitamos apenas uma linha de código e não um monte de código extra só
para carregá-la.

Bem, já temos a imagem falta apenas desenhá-la na tela, para isso usaremos o método Draw() da classe Game1
conforme listagem 5.

Listagem 5 – Desenhando a bola na tela

protected override void Draw( GameTime gameTime )

{
graphics.GraphicsDevice.Clear( Color.Black );

// TODO: Add your drawing code here

spriteBatch.Begin( SpriteBlendMode.AlphaBlend );
spriteBatch.Draw( imgBola, new Vector2( 20, 20 ), Color.White );
spriteBatch.End();

base.Draw( gameTime );
}

Como havia dito, o método Draw() é o responsável por realizar todos os desenhos na tela, para isso utilizamos
uma instancia do SpriteBach.

Primeiro inicializamos o SpriteBach com o método Begin(), nele informamos os parâmetro

SpriteBlendMode.AlphaBlend este parâmetro diz ao método que desenhe a imagem com o fundo
transparente, isso faz com que a imagem seja desenhada com um fundo transparente e não com um retângulo
em volta dela. O SpriteBlendMode possui mais outras duas enumerações que são:

SpriteBlendMode.Additive – habilita a adição da mistura;

SpriteBlendMode.None – não faz mistura alguma.

Para desenharmos nossa bola devemos chamar o método draw() do objeto spriteBatch logo após o método
Begin() e informar ao método draw() três parâmetros que são: A texture2D a ser desenhada, um Vector2 com
sua posição X e Y, e a cor alpha. Feito isso devemos chamar o método End() do spriteBatch.

Vector2 é uma classe que foi desenvolvida para trabalhar com posicionamento assim como Vector3 e Vector4.
Quando informamos (20,20) ao vetor e incluímos ele no método Draw, estamos dizendo ao método para desenha
nossa imagem na posição 20 pixels no eixo X e 20 pixels no eixo Y que são coordenadas cartesias (Luciano, mas
que bicho é esse? Bem, vamos explicar um pouco sobre geometria num próximo artigo).

Agora, compile seu programa, você verá uma imagem como a figura 7.

Figura 8 – Imagem da bola desenhada na tela

Como podem ver, foi muito simples criarmos um objeto Texture2D, instanciá-lo e desenharmos a imagem na tela.
Não gastamos mais que 5 linhas de código, isso porque o XNA Framework foi preparado para facilitar a vida do
desenvolvedor mas sem perder a performance. Do mesmo jeito que desenhamos nossa bola na tela, poderíamos
ter feito isso com qualquer outra imagem bastando apenas criar uma textura para cada uma delas e depois
desenhá-la na tela.

Ok Luciano desenhamos uma bola, mas é agora? Bem, agora vamos fazer essa bola se mover sem sair dos
limites da tela.

Vá para o início da classe e adicione as seguintes variáveis:

Listagem 6– Adicionando novas variáveis

Vector2 posicaoBola;
Vector2 velocidade;
Observem que utilizamos novamente a classe Vector, tanto para posição quanto para velocidade. Mas porque
para velocidade? Bem, isso porque a bola deverá se mover tanto no eixo X quanto no eixo Y, nesse caso, iremos
informar uma velocidade constante que será de 3 pixels por segundo em ambos os eixos.

Faça a inicialização das variáveis no método LoadContent() conforme listagem 7

Listagem 7– Inicializando as variáveis

//Esta será a posição inicial da bola

//X = 0 e Y = 0 ou seja, topo lado superioresquerdo
posicaoBola = new Vector2( 0, 0 );

//Esta será a velocidade da bola na tela

//3 pixels tanto no eixo X como no eixo Y
velocidade = new Vector2( 3, 3 );

Reparem agora que iremos mudar a forma de posicionar nossa imagem. Na chamada que fizemos ao método
Draw() nós fixamos a posição da bola em 20 pixels nos eixos X e Y, porém, quem irá ser responsável pelas
novas posições da bola será nossa variável “posicaoBola”. Isso porque queremos que ela se movimente pela
tela. Mais a frente iremos criar um outro método responsável por incrementar nossa variável posicaoBola.

Agora, apenas mude a chamada ao método Draw() da classe Game1 conforme listagem 8.

Listagem 8– Desenhando a bola

De
spriteBatch.Draw( imgBola, new Vector2( 20, 20 ), Color.White );

Para
spriteBatch.Draw( imgBola, posicaoBola, Color.White );

Conforme sua posição for mudada no metodo moveBola, ela será passada para o metodo Draw que irá desenha a bola
novamente dando assim um efeito de movimento.

Para que a bola consiga se mover pela tela vamos criar um método chamado moveBola(), ele será responsável
por mover e verificar se a bola não está fora dos limites da tela.

Após o método Draw() da classe Game1, vamos criar nosso método moveBola(). Toda a explicação está dentro
do método. Digite o código conforme a listagem 9

Listagem 9– Movendo a bola pela tela

/// <summary>
/// Move a bola na tela
/// </summary>
private void moveBola()
{
//Aqui definimos a Largura e a Altura maxima da tela
int maxLarguraTela = Window.ClientBounds.Width;
int maxAlturaTela = Window.ClientBounds.Height;

//Aqui definimos a Altura e a LArgura mínima da tela.

//Note que não informamos 0 para elas porque se fizermos
//isso a bola irá passar alguns pixels além das bordas
int minLaguraTela = imgBola.Width;
int minAlturaTela = imgBola.Height;
 //Nessa parte incrementamos a posição a cada atualização
//da tela, pois iremos colocar esse método dentro do método
//Update da classe Game1
posicaoBola.X += velocidade.X;
posicaoBola.Y += velocidade.Y;

//Nessa aprte testamos o tamanho da imagem mais sua posição

//na tela para vermos se ela encontra-se fora dos limites
//superior, inferior, lateral esquerdo e lateral direito
//caso isso ocorra, multiplicamos sua posição atual por
//-1 (menos um) isso faz com que a bola mude de direção
if ( maxLarguraTela <= ( imgBola.Width + posicaoBola.X ) )
{
velocidade.X *= -1;
}
if ( maxAlturaTela >= ( imgBola.Height + posicaoBola.Y ) )
{
velocidade.Y *= -1;
}

if ( minLaguraTela >= ( imgBola.Width + posicaoBola.X ) )

{
velocidade.X *= -1;
}
if ( minAlturaTela <= ( imgBola.Height + posicaoBola.Y ) )
{
velocidade.Y *= -1;
}
}

Agora basta incluir uma chamada do método moveBola() dentro do método Update. Seu método update deverá
ficar como na listagem 10.

Listagem 9– Chamda ao método moveBole

protected override void Update( GameTime gameTime )

{
// Allows the game to exit
if ( GamePad.GetState( PlayerIndex.One ).Buttons.Back == ButtonState.Pressed )
this.Exit();

// TODO: Add your update logic here

//Chamada ao método moveBola()

moveBola();

base.Update( gameTime );
}

Compile o projeto novamente e você verá uma bola de futebol se movendo pela tela, cada vez que ela tocar em
um dos cantos sua posição é alterada.
 Finalizando

Para que vocês possam saber mais sobre XNA, vou colocar aqui alguns links interessantes, bem como
alguns fóruns.

Site oficial: http://msdn2.microsoft.com/en-us/xna/aa937795.aspx

XNA Creators Clube: http://creators.xna.com/Education/GettingStarted.aspx

Sharpgames: www.sharpgames.net

Unidev: www.unidev.com.br

Comunidade no Orkut: http://www.orkut.com/Community.aspx?cmm=40473542

Conclusão

Como puderam ver o XNA Framework foi criado especialmente para facilitar a vida dos programadores de
jogos, pois tanto o profissional quanto o entusiasta podem usufruir de uma ferramenta muito poderosa, e por
encapsular funções do DirectX ele nos dá mobilidade para pensarmos mais no jogo do que na forma de
codificarmos, sem contar que podemos muito bem ver nossas criações serem rodadas em um console como é o
caso do XBox 360 (quem nunca teve vontade de ver seu jogo rodando em um console de vídeo game?).

Veremos no próximo artigo como montar o famoso jogo “Pong” discutido em detalhes e iremos ver também:
matemática, física e alguns conceitos de geometria.

Espero que tenham gostado e que continuem acompanhando nossos artigos aqui na revista mundo .net.

Emails podem ser enviados para: lima@lucianolima.com.br

Até a próxima

Luciano Lima

Referências:
XNA Game Studio Express
Sharpgames
XNA Creators Clube