Tiles é uma representação gráfica de algo na tela, é um conjunto de tiles( pedaços de imagens ) que formará uma imagem maior.

Com tiles podemos fazer um cenário, o que geralmente representará uma redução de uso de memória e armazenamento em disco do que utilizar um único bitmap para a tela inteira.

Geralmente, o correto é trabalhar com tiles para as partes fixas do cenário ou com pouca mobilidade, por exemplo:
paredes e chão de um cenário, objetos como baús, e outras coisas que não se "mexem" muito e inclusive a água, havendo então uma troca seqüencial das tiles que fazem parte da água de forma a dar a impressão de movimentação desta.

Nesse artigo iremos mostrar como montar um cenário usando apenas tiles estáticos, ou seja, sem movimentação.

Com base na ilustração acima devemos esclarecer os seguintes itens:

• O tamanho do cenário é 640x480. Totalizando 307.200 pixels.
  
• Todas as imagens foram salvas com 24bits de profundidade de cores. No entanto configuramos o compilador para enxergar até 32bits.
  
• O tamanho de cada Tile é 32x32 pixels.

Com base nas informações acima você deve entender que a largura da tela é de 640 pixels e a largura do nosso tile é 32 pixels. Logo, já que nosso tile tem 32 pixels de largura podemos colocar apenas 20 tiles na horizontal. Já na altura, como nós temos 480 pixels podemos colocar apenas 15 tiles.

O tamanho dos tiles você define conforme a necessidade do se projeto. A idéia do artigo é dar uma visão geral de como montar um cenário simples e estático através de tiles.

Para facilitar o aprendizado você poderá baixar os tiles utilizados no exemplo acima.

#include <allegro.h>

int main()
{
   allegro_init();
   install_keyboard();
   set_color_depth(32);
   set_gfx_mode(GFX_AUTODETECT_WINDOWED, 640, 480, 0, 0);

   // COMENTADO NO FINAL - 1
   int i=0;
   int x=0;
   int y=0;

   const int xTile = 32; // Largura do Tile
   const int yTile = 32; // Altura do Tile

     // COMENTADO NO FINAL - 2

   // Posições dos tiles no mapa bidimencional.
   int Mapa[15][20] = {
   3,3,3,3,4,5,5,5,5,6,2,2,1,10,10,8,9,9,9,9,
   3,3,3,3,4,5,5,5,5,6,2,2,1,7,7,7,9,9,9,9,
   3,3,3,3,4,5,5,5,5,6,2,2,1,7,7,7,9,9,9,9,
   3,3,3,3,4,5,5,5,5,6,2,2,1,7,7,8,9,9,9,9,
   3,3,3,3,4,5,5,5,5,6,2,2,1,7,7,8,8,8,8,8,
   3,3,3,3,4,5,5,5,5,6,2,2,1,7,7,7,7,7,7,7,
   3,3,3,3,4,5,5,5,5,6,2,2,1,7,7,7,7,7,7,7,
   3,3,3,3,4,5,5,5,5,6,2,2,1,7,0,10,7,7,10,0,
   3,3,3,3,4,5,5,5,5,6,2,2,1,7,10,0,7,7,10,0,
   3,3,3,3,3,4,5,5,5,6,2,2,1,7,0,10,7,7,10,0,
   3,3,3,3,3,3,4,5,5,6,2,2,1,7,10,0,7,7,10,0,
   3,3,3,3,3,3,4,5,5,6,2,2,1,7,0,10,7,7,10,0,
   3,3,3,3,3,3,4,5,5,6,2,2,1,7,10,0,7,7,10,0,
   3,3,3,3,3,3,4,5,5,6,2,2,1,7,0,10,7,7,10,0,
   3,3,3,3,3,3,4,5,5,6,2,2,1,7,10,0,7,7,10,0};

     // COMENTADO NO FINAL - 3
   
   // Carregando o ponteiro com a imagem que possui todos os tiles
   BITMAP *bmpTiles = NULL;
   bmpTiles = create_bitmap(224,64);
   bmpTiles = load_bitmap("tiles.bmp",NULL);
   
   // Array que guarda as texturas separadas
   BITMAP *bmpTexturas[11];
   
   // Definindo o tamanho 32x32 para cada tile
   for (i=0;i<11;i++)
   {
      bmpTexturas[i] = create_bitmap(xTile,yTile);
   }

   // A rotina abaixo separa cada tile e armazena no array.
   blit(bmpTiles, bmpTexturas[0],  64, 0, 0, 0, xTile, yTile );   // Grama normal
   blit(bmpTiles, bmpTexturas[1],  32, 0, 0, 0, xTile, yTile );   // Grama com areia
   blit(bmpTiles, bmpTexturas[2],  0, 0, 0, 0, xTile, yTile );     // Areia
   blit(bmpTiles, bmpTexturas[3],  96, 0, 0, 0, xTile, yTile );   // Agua funda   
   blit(bmpTiles, bmpTexturas[4],  128, 0, 0, 0, xTile, yTile ); // Agua funda com agua clara
   blit(bmpTiles, bmpTexturas[5],  160, 0, 0, 0, xTile, yTile ); // Agua clara
   blit(bmpTiles, bmpTexturas[6],  192, 0, 0, 0, xTile, yTile ); // Agua clara com areia
   blit(bmpTiles, bmpTexturas[7],  0, 32, 0, 0, xTile, yTile );  // Pedras
   blit(bmpTiles, bmpTexturas[8],  32, 32, 0, 0, xTile, yTile ); // Parede
   blit(bmpTiles, bmpTexturas[9],  64, 32, 0, 0, xTile, yTile ); // Piso
   blit(bmpTiles, bmpTexturas[10], 96, 32, 0, 0, xTile, yTile );  // Flores

     // COMENTADO NO FINAL - 4

   //Monta o Cenário
   for (x=0;x<15;x++)
   {
      for (y=0;y<20;y++)
      {
         draw_sprite(screen,bmpTexturas[ Mapa[x][y] ], y*32, x*32 );
      }
   }

     // COMENTADO NO FINAL - 5

   //Escreve mercado na parede.
   textout_ex(screen, font, "MERCADO", 540, 135, makecol(255,255,0), -1);

   readkey();

   //Desaloca as Texturas
   for (i=0;i<11;i++)
   {
      destroy_bitmap(bmpTexturas[i]);
   }

   destroy_bitmap(bmpTiles);
   
   allegro_exit();

   return 0;
}

END_OF_MAIN();

• Definição do tamanho da tela de 640x480 pixels.
• Profundidade de cores de 32 bits.
• Criação dos tiles no tamanho de 32x32 pixels – 24bits. Dessa forma temos espaço para 20 tiles na horizontal e 15 tiles na vertical.
• Organizar todos os tiles em apenas um arquivo de imagem com fundo lilás conforme ilustrado acima. Dessa forma podemos extrair todas as texturas através da função blit.

Após a preparação do tiles é necessário organizar o código de maneira que fique clara a montagem do cenário usando os tiles criados.

// COMENTADO NO FINAL - 1

Bom, vamos pular as configurações da tela e ver as 3 variáveis criadas.

A variávei “i” é apenas um contador auxiliar.

A variável ‘x” e “y” vão ser utilizadas para percorrer o array bidimensional do mapa.

Logo abaixo das variáveis temos mais duas variáveis constantes que armazenam a largura e a altura do tile.
Nesse exemplo possuímos tiles de 32x32 pixels. Declarando o tamanho como sendo global, posteriormente podemos efetuar mudanças sem ter que percorrer o código atrás de referência ao tamanho do tile.

// COMENTADO NO FINAL - 2

A matriz que representará o layout do mapa deve ser bidimensional e deve ter como tamanho a quantidade de tiles que podemos colocar na tela, nesse caso [15]x[20].

Você vai notar que ao informar o tamanho do mapa eu inverti o x pelo y.

Dessa forma, fica fácil de visualizar o layout do cenário através dos números. Normalmente o código de montagem do cenário monta o cenário da esquerda para direita e de cima para baixo. Se você fizer da mesma forma que eu fiz o cenário será montado de cima para baixo e da esquerda para a direita.

Você terá que iniciar cada posição do mapa com o número do tile que queremos colocar naquela posição. Para isso você já deve ter em mente a organização dos tiles e a numeração que vai identificar cada uma na posição do mapa.

// COMENTADO NO FINAL - 3

Ao invés de carregarmos cada textura do mapa separadamente vamos carregar uma imagem organizada e contendo todas as texturas.

Logo abaixo teremos um array de imagens que vai conter cada textura separada. Como cada textura tem tamanho 32x32 fizemos uma rotina genérica para definir o tamanho de todos seqüencialmente. Em seguida carregamos cada posição do array de texturas com cada imagem correspondente. Para esse efeito usamos a função blit.

// COMENTADO NO FINAL - 4

Até agora temos o mapa com cada posição iniciada com um número. Esse número é correspondente ao array de texturas. Por exemplo, na posição Mapa[0][0] temos o número 3. Se você pegar a textura[3] você verá a imagem de água escura conforme nossa organização, e assim sucessivamente com as outras posições.

A rotina para montar o cenário é simples. Devemos percorrer todas as posições do array bidimensional “Mapa” identificando o número e representando através de uma textura na tela.

Como nosso tile tem 32 pixels então cada vez que você desenhar uma imagem você deve pular 32 pixels para poder desenhar a próxima (x*xTile, y*yTile).

Caso contrário uma imagem ficará em cima da outra. Imagine a posição x=0 e y=0. Se desenharmos um tile nessa posição o tile vai ocupar 32 pixels na largura e 32 pixels na altura, portanto o próximo tile deve ser desenhado a partir da posição x=32 e y=32. Por esse motivo a rotina de montagem do mapa está multiplicando a posição x,y pelo tamanho de cada tile.

// COMENTADO NO FINAL - 5

Para finalizar, escrevemos na tela o texto “MERCADO” para caracterizar o local no canto superior direito da tela.
Em seguida é fizemos a destruição das imagens e a finalização da biblioteca Allegro.


Caro leitor, chegamos ao fim do entendimento da montagem de tiles. Espero que o exemplo acima tanha ajudado.
Qualquer dúvida entre em contato com o pessoal da BDJogos através do fórum.

Abraço
BDJogos

Download do exemplo 1 - Clique Aqui