Ponto V!

Gráficos 2D - Colocando sua primeira imagem na tela usando XNA Escrito por Kleber Andrade

Olá caros leitores, neste tutorial vocês aprenderam alguns conceitos básicos sobre o mundo bidimensional utilizado nos jogos. Também será explicado de maneira rápida alguns termos como sprites e tiles. Logo na sequência iremos configurar uma janela de m projeto em XNA e depois iremos adicionar e desenhar uma imagem na tela. O código deste tutorial foi criado e testado no XNA 4.0, ou seja, qualquer mudança de versão pode acarretar ou não em reajustes no código.

O mundo bidimensional

Lembra-se daquelas aulas que você enforcava de geometria plana da escola ou até mesmo da faculdade? Quem nunca quis esganar o professor por causa daqueles inúmeros planos cartesianos desenhados no caderno para calcular a distância entre dois pontos, área do triângulo, e tudo o mais a partir das coordenadas cartesianas, que atire o primeiro esquadro. Pois bem, saiba que aquilo tudo não foi em vão – nós precisaremos daquele conceito aqui. Vamos apenas recapitular como funcionam as coordenadas 2D para que possamos compreender a maneira correta de posicionar os nossos objetos dentro do jogo.

Lá nas aulas de geometria nós utilizávamos o plano cartesiano comum para definirmos as figuras geométricas. Veja a Figura 1.

Figura 1 - Plano cartesiano

Perceba que nesse plano a origem dos pontos se dá no canto inferior esquerdo e o valor de Y é crescente quando o seu eixo sobe, e decrescente quando desce. Quando estamos trabalhando com computadores, no entanto, também estamos trabalhando com o sistema de coordenadas de tela, que é semelhante ao cartesiano (Figura 2).

Figura 2 - Plano cartesiano 2D nos jogos

Analisando a figura, podemos perceber as três diferenças existentes entre esses dois sistemas. Primeiro, a origem dos eixos se dá na parte superior esquerda do plano. Segundo, o valor de Y é crescente quando seu eixo cresce para baixo e, por último, os valores de Y e X terão um valor máximo que não deverá ser extrapolado conforme a resolução da tela.

Sprites

Antes que alguém pense em uma piadinha, sprite não é a marca de refrigerante e sim um elemento básico visual dos jogos bidimensionais que pode ser representado por um conjunto de imagens estáticas. Uma animação de um jogo em duas dimensões, por exemplo, é representada por uma seqüência de sprites sendo exibidos em sucessão. Sua principal função atualmente é economizar recursos ao tornar desnecessária a representação de objetos utilizando objetos complexos em três dimensões. Um exemplo de sprite para animação do personagem Mario, pode ser visto na Figura 3.

Figura 3 - Sprites do Mario

As imagens 1 a 3 definem o movimento de caminhada do Mario, enquanto a imagem 4 a 5 o de pulo. Perceba que ao trocar a imagem você pode posicionar o objeto em outra posição dando realmente a impressão que ele esta caminhando. Um detalhe importante é que só existe imagens para um lado, pois para ele andar para o outro lado você deve simplesmente fazer um giro horizontal na imagem.

Tiles

Tiles são pequenos pedaços de imagens que servem para criar uma nova imagem composta conhecida como layer, utilizadas para criar o cenário de um jogo. Essa técnica é chamada de TileMaps, no qual, através de uma imagem contendo diversos pedacinhos de imagens (tiles), se pode criar um cenário para um jogo. Exemplos clássicos do uso de TileMaps, são em jogos de RPG (Role Playing Game). Os jogos de RPG geralmente possuem cenários extensos o qual se fosse feito com uma única imagem ocuparia muito espaço de memória e alguns anos atrás em que surgiram, as memórias eram bem limitadas. Então a técnica de dividir o cenário em tiles e recriá-lo em tempo de processamento fez essa técnica ser muito utilizada até hoje em dia. Um exemplo pode ser visto na Fig. 4.0

Figura 4 - Exemplo: a imagem da esquerda contém os tiles para desenhar um cenário, enquando a imagem da direita é o cenário ou seja o layer construído utilizando os tiles

Preprando a janela de um Jogo

Com um projeto de jogo aberto, ao invés de usarmos a configuração padrão definida pelo XNA, vamos manualmente configurar algumas características da janela, alterando o título e o seu tamanho. Para tal, precisamos de um “device” que nos comunique com o vídeo. O próprio XNA já declara este device, como pode ser observado no inicio da classe Game1 (Para abrir a classe Game1.cs de um duplo-clique na Game1.cs que se encontra no Solution Explorer de seu projeto).

GraphicsDeviceManager graphics;

Vamos então determinar um tamanho para a janela, adicionar um título e desabilitar o modo “Tela cheia” e o mouse. Para isso utilizaremos o device de vídeo cujo nome é graphics. Queremos que isso seja realizado logo no inicio do jogo, então os comandos devem ficar dentro do método “Initialize()”

protected override void Initialize()
{
    // Altera o vídeo para 800 pixels de largura
    graphics.PreferredBackBufferWidth = 800;
    // Altera o vídeo para 600 pixels de altura
    graphics.PreferredBackBufferHeight = 600;
    // Desabilita o modo tela cheia
    graphics.IsFullScreen = false;
    // Desabilita a visibilidade do mouse dento do jogo
    IsMouseVisible = false;
    // Aplica as mudanças
    graphics.ApplyChanges();
    // Define o título da janela
    Window.Title = "Meu primeiro jogo";
    base.Initialize();
}

Salve e rode seu projeto (F5). Agora a janela criada possui uma dimensão 800x600 pixels, como na maioria dos jogos. Você pode explorar os outros comandos do device caso queira se aprofundar mais.

Adicionando imagens (Texture2D) ao projeto

Todos os conteúdos externos ao projeto devem ser adicionados a pasta Content. Para adicionar uma imagem clique na pasta Content com o botão direito do mouse e selecione “Add à Existent Item”. Então procure a imagem deseja e a selecione (o Visual C# irá fazer uma cópia desta imagem para dentro do seu projeto). Veja a Figura. 5. Caso queira usar a imagem do nosso fantasma, faça o download clicando aqui.

Figura 5 - Adicionando imagens a pasta de conteúdo do jogo

Carregando a Imagem (Texture2D)

Como estamos estudando duas dimensões (2D), precisamos criar um objeto chamado “imagem” do tipo Texture2D. Não irei entraremos em detalhe, mas é preciso declarar esse objeto e como a imagem é um recurso gráfico, então devemos carregar a imagem no método? Isso mesmo, LoadContent.

Para carregar uma imagem no objeto, é preciso utilizar o método Load(AssetName) do conteúdo do “Game” onde seria o tipo de textura que iremos carregar. No nosso caso seria Content.Load e (AssetName) o nome do arquivo carregado, no meu caso “fantasma”. Veja um exemplo de código.

// Declara um objeto do tipo Texture2D
Texture2D fantasma;

protected override void LoadContent()
{
    // Objeto de desenho (como se fosse um pincel)
    spriteBatch = new SpriteBatch(GraphicsDevice);
    // Carrega a imagem do fantasma
    fantasma = Content.Load<Texture2D>(@"fantasma");
}

Desenhando com SpriteBatch

Agora sim, vamos usar o XNA para desenhar um sprite na tela do nosso jogo. Para desenhar qualquer coisa na tela do jogo precisamos de um objeto do tipo SpriteBatch que seria como um picel para nós. Com esse objeto podemos dizer onde e como pintar nossa imagem na tela. Mas tudo que vai ser desenhado na tela gráfica deve ser passado numa única instrução e para isso devemos então inicializar e fechar um bloco contendo tudo o que deve ser desenhado na tela. Para iniciar um bloco usamos o método Begin e para fechar o método End do SpriteBatch. Só lembrando também que tudo o que for desenhar deve ser escrito no método Draw. Veja um exemplo abaixo no qual desenhamos uma imagem na posição 100,100 da tela com um filtro de cor branca no qual todas as cores são exibidas conforme a image.

protected override void Draw(GameTime gameTime)
{
    // Apaga a tela, pintando com a cor CornflowerBlue
    GraphicsDevice.Clear(Color.CornflowerBlue);
    // Inicializa o bloco de desenho do objeto do tipo SpriteBatch
    spriteBatch.Begin();
    // Desenha o fantasma na posição 100, 100 aplicando um filtro onde todas as cores passam
    spriteBatch.Draw(fantasma, new Vector2(100.0f, 100.0f), Color.White);
    // Finaliza o bloco de desenho do objeto do tipo SpriteBatch    
    spriteBatch.End();
    base.Draw(gameTime);
}

Agora é só executar o programa e ver um resultado como este abaixo. O resultado é exibido na Figura 6.

Figura 5 – Resultado após a compilação do código

Nota

O método de desenho do objeto SpriteBatch usado, possui 7 sobrecargas, mas usamos somente uma delas.

• spriteBatch.Draw(Texture2D , Vector2 , Color );

Em futuros tutoriais veremos como utilizar as outras sobrecargas e também alguns efeitos ao desenhar algumas imagens.

Download

Para fazer download do exemplo criado neste tutorial clique no ícone de download abaixo.

Conclusões

Espero que este tutorial seja de uso para todos, como foi visto é muito simples alterar informações da janela, e até mesmo adicionar e desenhar imagens na tela. Agora que você já sabe como colocar uma imagem na tela, faça alguns testes modificando o valor de Vector2 e da Color para ver os resultados. Ou até mesmo colocando outras imagens. Abraços e até a próxima pessoal.