Aprimorando o conhecimento: Jogos em Tiles

Desde os primórdios dos jogos eletrônicos uma das técnicas mais utilizadas para desenvolvimento de jogos é a técnica de tiles (telhas, azulejos).

Nesta postagem vou explicar de forma básica e resumida como deve ser desenvolvido um sistema de tiles para seu jogo.

Está técnica é muito utilizada devido a diversas facilidades que ela pode proporcionar, tais como:

• Posicionamento de elementos;
• Criação de mapas;
• Implementação de texturas;
• Interação com elementos;
• Detecção de colisões;

Algumas imagens de jogos tile-based:

Basicamente essa técnica consiste na implementação de uma matriz (uma array multidimensional) de números inteiros, essa matriz chamamos de tilemap.

Segue um exemplo:

var mapa : int[4,3]; // Esta matriz possui 2 dimensões com largura de 4 tiles e altura de 3 tiles

Geralmente os valores que irão preencher esta matriz são 'lidos' de um arquivo de texto com a seguinte estrutura:

4
3
0, 0, 0, 0
0, 0, 0, 0
0, 0, 0, 0

A primeira linha contém a quantidade de tiles que formam a largura, a segunda a altura e da terceira para baixo o tilemap em si.

Após ler o arquivo, esses dados são armazenados na matriz através de laços de repetição (loops), mas antes esses laços devem inicialmente separar os valores retirando quebras de linha, espaços e virgulas, depois converter o texto para números inteiros e agora sim armazenar na array do tilemap.

Quando você tiver a array com o tilemap preenchida, outros laços que devem ler essa matriz também devem ser criados, esses serão os responsáveis por criar o mapa de tiles.

A ideia aqui é que cada número contido nessa matriz represente um tipo de terreno, objeto ou elemento.

Por exemplo:

4
3
0, 1, 0, 0
0, 0, 1, 0
0, 0, 0, 0

0 = Grama
1 = Areia

É como se a nossa matriz representasse este cenário:

Geralmente para as texturas dos tiles são utilizadas imagens chamadas tile sets:

Essa imagem contém diversos 'pedacinhos' de outras imagens que juntas formam um objeto maior.

Os laços de repetição que irão ler o array de tile maps devem interpretar o número, buscar o pedacinho da imagem correspondente no tile set, 'recortar' esse pedacinho e então desenhá-lo na tela.

Para o posicionamento é importante que você defina um tamanho fixo e quadrado para seus tiles (10x10, 32x32, 100x100), além disso defina uma variável responsável pela distancia de desenho entre os tiles, dessa forma você não deve ter problemas com alinhamento ou sobreposição.

Para colisão geralmente é desenvolvido um sistema de camadas, cada camada é basicamente uma array multidimensional com um tile map que indica, por exemplo, os tiles que não devem ser ultrapassados pelo jogador.

Essas camadas poderiam ser (além de colisão) de diversas outras coisas como: background, foreground, moedas, itens, efeitos, interface e inimigos.

A única mudança importante seria a ordem de desenho, por exemplo:

background >> tilemap principal do cenário >> interface

Nesta ordem o background seria desenhado primeiro, seguido pelo tilemap principal do cenário e por último a interface (Lembra daquele ditado que is últimos serão os primeiros? Ele se aplica aqui!).

Bom, essa foi uma explicação bem simples de como funciona essa técnica de tiles para jogos, espero que vocês tenham gostado, essa explicação será bem útil no futuro onde pretendo ensinar como fazer um jogo tile based na Unity.

Comentem em caso de dúvidas!