Técnicas de Jogos 1 – Tile Based Rendering

Sempre que puder, vou tentar postar algum material que produzi sobre algumas técnicas utilizadas em jogos.

Tile Based Rendering (em jogos 2D)

Essa técnica consiste em representar toda a cena e seus objetos através de blocos de pixels (comumente  8×8 pixels, que doravante será usado como tamanho referencia para os exemplos que seguem) chamados de tiles. Esses blocos são armazenados na memória de vídeo e o framebuffer é composto por uma matriz (de tamanho W/8 e H/8 sendo W a largura da tela em pixel e H a altura da tela em pixel) que indexará o conjunto de tiles.

A técnica é usada principalmente com o intuito de economia de memória, pois o framebuffer terá tamanho Tx * Ty (Tx sendo tamanho no eixo X do bloco tile e Ty sendo o tamanho no eixo Y)  menor, sem contar a profundidade do pixel, que a utilização convencional (que é W*H*D bytes, com D sendo a profundidade em bytes de cada pixel). Além disso, os tiles podem ser reusados, o que aumenta a economia do memória.

Seu funcionamento é semelhante ao visto em sala de aula na técnica de palheta de cores, ou seja, define-se uma palheta, no caso de tiles, e usam-se códigos menores para indexar os índices dessa palheta. Não obstante, pode-se combinar as duas técnicas e obter assim um ganho ainda maior de memória, já que é possível indexar alem do tile as palhetas de cores, e armazenar os tiles codificado com os índices das palhetas de cores. (veja o exemplo)

Essa técnica foi e ainda é muito utilizada em jogos 2D  (como Mario, Sonic, etc) e muitos hardwares são otimizados ou só trabalham dessa forma (NES, SNES, Gameboys, Nintendo DS).

Exemplo

Imagine o cenário abaixo, típico de um jogo de Mario, em uma resolução de 320 por 240 pixels e com 3 bytes de profundidade de pixel (1 byte para cada canal de cor).

Cenario feito usando Tiles. O exemplo a seguir é baseada nesse cenário.

Caso seja utilizada a abordagem típica, seria gasto 320x240x3 bytes para representar toda a cena, ou seja, 225Kbytes.

Porém, é possível representar a cena com 2 tiles e algumas palhetas de cores. Considere tiles de 8×8 pixels e palheta de cores de até 16 cores. Para esse exemplo, é preciso definir 4 palhetas de cores e,  como a profundidade do pixel são 3 bytes, o tamanho de cada palheta será de (16*3 bytes = 54 bytes). Abaixo, segue as palhetas utilizadas:

Palheta utilizada para o exemplo

Serão usados 2 tiles, codificados para utilizar as cores presentes nessas duas palhetas. Considerando as palhetas com 16 cores, será preciso de 4 bits por pixel para indexar a palheta, o que resulta no tamanho total do tile como 8*8*4/8  = 32bytes (Tx*Ty*4bit/8bits) São eles (no lado esquerdo, os tiles necessários e do lado direito os tiles codificados):

Tiles que serão usados para compor o cenario do exemplo. São 4 tipos de tiles diagonais, mas eles são resolvidos com um bit de flip vertical e horizontal, por isso só é necessario esses 2 tiles da imagem.

Para formar a cena, ou seja, o framebuffer, será utilizado um índice de 2 bytes, que conterá com as informações do índice do tile, com o indice da palheta, e com a orientação vertical e horizontal do tile, como pode ser visto abaixo:

Informação de 2 bytes que forma o framebuffer e informa as configurações dos Tiles

Note que com 4 bits separados para indexar palhetas de cores, é possível ter 16 palhetas e, como cada palheta tem 16 cores, podemos indexar 16×16= 256 cores simultaneamente em uma mesma cena. Com 10 bits para indexar tiles,  uma cena pode ter até 1024 tiles diferentes. Utilizando esse tipo de índice, o framebuffer terá W/8*H/8*2

bytes, o que resultará no caso em 40*30*2  = 2,34 K Bytes

Considerando a cena do exemplo, serão utilizados 2,6Kbytes (2680 bytes) contra 255Kbytes da abordagem alternativa (veja contagem abaixo), uma economia de cerca de 99%. No pior caso, utilizando todos os tiles e palhetas disponíveis, uma cena utilizaria  cerca de 35Kbytes, com uma economia de cerca 86%.

Contagem de Bytes da cena de exemplo:

Abordagem Típica

Abordagem com Tile

Framebuffer= 320*240*3 = 255 KbytesTotal = 255 Kbytes Framebuffer= 40*30*2  = 2400 bytesMapa de Tile= 2* (32 bytes) = 56 bytesPalhetas de Cores = 4* (54 bytes) = 216 bytesTotal = 2,6 Kbytes

Contagem de Bytes da cena de pior caso (uso de todos os tiles e todas as palhetas de cores)

Abordagem Típica

Abordagem com Tile

Framebuffer= 320*240*3 = 255 KbytesTotal = 255 Kbytes Framebuffer= 40*30*2  = 2400 bytesMapa de Tile = 1024* (32 bytes) = 32 KbytesPalhetas de Cores = 16 * (54 bytes) = 864 bytesTotal = 35,1 Kbytes
Anúncios

Deixe um comentário

Arquivado em 2D, Computação Gráfica, Desenvolvimento, Desenvolvimento de Jogos, Geek, Jogos

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

w

Conectando a %s