Introdução

É muito comum a situação em que as imagens do nosso jogo não estão espalhadas em vários arquivos, cada um com uma imagem, e sim em apenas um único arquivo, que exibe todas as imagens lado a lado na forma de um grid, como mostra a figura abaixo.

Solução

O XNA suporta facilmente a utilização de tais bancos ou grids de imagens, talvez mais fácil do que você imagina. O método Draw, da classe SpriteBatch, possui uma versão (overload) que permite escolher qual o retângulo da imagem de origem que será desenhado na tela.

Vejamos isso na prática. Supondo que você possui a imagem acima, vamos desenhar o monstro vermelho que aparece na primeira linha do grid, assim como o monstro verde logo abaixo dele. Os passos são:

1. Crie um novo Windows Game no XNA Game Studio Express. Chamei-o de “BancoImagens”.
2. Adicione ao seu projeto (Windows Game) o arquivo de imagem (no meu caso ele se chama imagens.bmp).
3. Adicione como atributo do seu jogo um objeto Texture2D, para carregar a imagem, e um objeto SpriteBatch, para desenhar a imagem, como mostra o código abaixo.

public class Game1 : Microsoft.Xna.Framework.Game {

GraphicsDeviceManager graphics;

ContentManager content;

Texture2D txBancoImagens;

SpriteBatch sBatch;
...

}

4. No método Initialize, inicialize os objetos Texture2D e o SpriteBatch.

protected override void Initialize() {

    �base.Initialize();

txBancoImagens = content.Load<Texture2D>("imagens");

sBatch = new SpriteBatch(graphics.GraphicsDevice);

}

5. Agora é chegado o ponto-chave do código. Entre chamadas dos métodos Begin e End do objeto SpriteBatch, invoque chamadas ao método Draw desse mesmo objeto. Porém, use uma versão dele que recebe o retângulo de origem como parâmetro. Irei utilizar uma versão que recebe, na seguinte ordem: a textura, a posição final do desenho na janela do jogo, o retângulo de origem e a “cor de tingimento” do desenho (no caso, nenhuma em especial, ou seja, branca).

protected override void Draw(GameTime gameTime) {

graphics.GraphicsDevice.Clear(Color.CornflowerBlue);

sBatch.Begin();

sBatch.Draw(txBancoImagens, Vector2.Zero, new Rectangle(275, 0, 140, 90), Color.White);

sBatch.Draw(txBancoImagens, new Vector2(200, 200), new Rectangle(275, 90, 140, 75), Color.White);

sBatch.End();

base.Draw(gameTime);

}

O monstro vermelho está situado, na imagem original, em uma área retangular que começa no ponto (0,275) e possui como dimensões (largura,altura) 140 pixels por 90 pixels. Estou desenhando esse monstro vermelho começando da origem da janela, ou seja, ponto (0,0).

Já o monstro verde está situado em uma área retangular que começa no ponto (275,90) e possui como dimensões 140 pixels por 75 pixels. Esse segundo mostro é desenhando em um ponto mais para o meio da janela do jogo (200,200).

A figura abaixo exibe o resultado:

Conclusão

Esse simples artigo mostrou como desenhar várias imagens no seu jogo a partir de um único arquivo, que na verdade contém um banco (ou grid) de imagens. Coloquei explicitamente cada ponto e dimensão das áreas retangulares de origem das figuras. Entretanto, uma lógica mais inteligente e menos trabalhosa pode ser utilizada, como laços for aninhados que têm seus índices (os famosos i e j) incrementados de acordo com as dimensões e posições das imagens dentro do grid.

Agora é com você: experimente carregar outras regiões do grid de imagens para, por exemplo, animar os monstros desenhados.

Jogar bem!

[]s
-- AFurtado

  bancoimagens.zip 90076 bytes
Código-fonte do projeto utilizado para exemplificar esse artigo