O Mundo dos Jogos 2D
Tiles, Tilesets e Tilemaps
Leandro Tonietto
[email protected]
http://professor.unisinos.br/ltonietto/jed/pgr/tilemap.pdf
20-Abr-2012
Apresentação original feita pelo Prof. MSc. João Ricardo Bittencourt
([email protected]), em 23 Mar. 2007
Processamento Gráfico
Desenvolvimento de Jogos Digitais
UNISINOS
Sumário
1.
2.
3.
4.
Tiles
Tilesets
Tilemaps
Sprites
Revisão Paleta de Cores
n
Dimensão: 240x360
n
86400 pixels
n
Usa uma paleta com 256
cores
Tiles
n
Uma pequena porção de imagem
n
Metáfora: Azulejo, tijolo ou um carimbo
n
A cena é formada por uma coleção de tiles
n
Cada pixel do tile utiliza um índice da paleta
Tile
01123000112
00111000000
00111000011
33121111111
00311111100
n
Cada número é um indice da paleta!
Tileset
n
Coleção de tiles
n
Em geral organizados
em uma matriz ou
um vetor
n
Cada tile em um
tileset possui um
identificador (ID)
n Um código
numérico
Tileset
Tilemap
n
Uma imagem criada através da composição de
diversos tiles de um tileset.
n
Objetivo: economizar memória!
Tilemap
023400000
000000110
000000110
000001110
n
Cada número é um indice do tile no
tileset
Tilemap
023400000
000000110
000000110
000001110
1
1 (RGB)
2
2 (RGB)
3
3 (RGB)
4
Tileset
4 (RGB)
...
Tilemap
n
Cada número no tilemap é um indice do
tile no tileset
n
Cada pixel do tile no tileset é um índice
da paleta
Tilemap - Resolvido / cenário
0
1
2
3
Paleta com
4 cores
Tile
Tilemap
(cenário)
Tilemap - desenho sem otimização
///// Método para desenhar o tilemap
desenhaMapa(){
int px, py=0;
for (int y=0; y<map.rows; y++){
px=0;
for (int x=0; x<map.cols; x++){
desenhaTile(map.getTile(x,y), px, py);
px += tileWidth;
}
py += tileHeight;
}
glFlush();
}
Otimização:
Ao invés de fazer várias
chamadas glRasterPos e
glDrawPixels, podemos
otimizar o processo de
desenho criando uma
imagem que
representará o tilemap e
desenhar dentro dela os
tiles. Depois desenhamos
a imagem dentro do
método desenhaMapa()
///// Método para desenhar um tile por vez
desenhaTile(BYTE id, int px, int py){
Tile tile = tileSet.getTile(id);
int *pixels = new int[tileWidth*tileHeight];
for (int y=0; y<tileHeight; y++){
for (int x=0; x<tileWidth; x++){
pixels[x + y * tileWidth] = paleta[tile.getPixel(x,y)];
}
}
glRasterPosi(px, py);
glDrawPixels(..., pixels);
}
Tilemap
n
Cenário 1: Sem tilemap
n Imagem com 2000x1000
n Sistema de cor RGB (cada pixel com 24 bits)
n Imagem com 5,72 Mb
n
Cenário 2: Com tilemap, tileset e tiles
n Imagem com 2000x1000
n Uma paleta com 256 cores (0,75 Kb)
n Cada tile com as dimensões de 20x20 pixels
• Matriz 100x50 de bytes (ID do tile) (4,88Kb)
n Tileset com 50 tiles (19,53Kb - 20x20x50)
n Total: 25,16Kb (menor ~233 vezes)
Estratégias de Visão
n
Representação e Lógica
n A parte de estrutura de dados é feita com
classes para Tilemap, Tileset e Tile
n Porém, conforme o tipo de visão que
implementamos, algumas partes da
representação devem ser tratadas de
modo diferente:
• desenho da tilemap
• captura e tratamento de clique do
mouse
• movimentação do personagem na tela
Estratégias de Visão
n
Tipos de visualização e tratamento de input
n Regular:
• Tiles retangulares
• Normalmente, vista superior
• Fácil para desenhar e tratar input
n Isométrico:
• Tiles isométricos
• Vista isométrica, “de canto”, 2,5D
• Algoritmo mais complexo para captura
de mouse e movimentação do
personagem
Estratégias de Visão
n
Estrutura para representação
Sprite
n
“Fantasma”, espectro, ...
n
Animação clássica –
seqüencia de quadros que
serão exibidos conforme a
ação do jogador ou mudança
de estado de algum objeto
n
Cada vez que atualiza a tela
pinta um novo frame.
n
Usado para:
n Personagem principal,
inimigos, itens e artefatos
no cenário
TileStudio
n
Ferramenta livre e gratuita usada para editar
tiles, tilesets, tilemaps e sprites.
n http://tilestudio.sourceforge.net
n
Site com mais detalhes sobre tilemaps regulares
e isométricos:
n http://www.tonypa.pri.ee/tbw/tut02.html