técnicas gráficas para jogos
DESCRIPTION
Técnicas Gráficas para Jogos. Eduardo Sampaio Rocha Pedro Henrique Macedo Börje Karlsson Geber Ramalho Vicente Vieira Filho. Representação da Cor nos Computadores. Para cada pixel, um conjunto de bits é usado para representar a cor. Geralmente o sistema usado é o RGB. Pixel. BBP - PowerPoint PPT PresentationTRANSCRIPT
1
Técnicas Gráficas para Jogos
• Eduardo Sampaio Rocha• Pedro Henrique Macedo• Börje Karlsson• Geber Ramalho• Vicente Vieira Filho
2
3
Representação da Cor nos Computadores Para cada pixel, um conjunto de bits é usado
para representar a cor. Geralmente o sistema usado é o RGB.
Pixel
BBP1 bit – 2 cores8 bits – 256 cores (paleta)16 bits – 65536 cores24 bits – 16.7 milhões de cores
4
Paleta (8 bpp) Rápido Fácil de mudar as cores de toda a tela
Pixel values(0-255)
12 5 29
6250
Índice Verme. Verde Azul0 100 5 361 52 36 1612 29 200 161
.
.
.
6 0 255 100...
255 100 100 1008 bits 8 bits 8 bits
24 bits
8 bits
5
16 bpp – High ColorAlpha(transparência).5.5.5
X(don’t care).5.5.5
5.6.5
A R4 R3 R2 R1 R0 G4 G3 G2 G1 G0 B4 B3 B2 B1 B0
X R4 R3 R2 R1 R0 G4 G3 G2 G1 G0 B4 B3 B2 B1 B0
R4 R3 R2 R1 R0 G5 G4 G3 G2 G1 G0 B4 B3 B2 B1 B0
6
24/32 bpp8.8.8
Alpha (8).8.8.8
X(8).8.8.8
Alpha Vermelho Verde AzulA7-A0 R7-R0 G7-G0 B7-B0
Don’t care Vermelho Verde Azul
xxxxxxxx R7-R0 G7-G0 B7-B0
Vermelho Verde Azul
R7-R0 G7-G0 B7-B0
7
Conceitos Básicos
• Sprite• Tile e tilemap• Operações (blitting, flipping, clipping,
blending, scrolling,...)
8
Imagem – Sprites & BackgroundSprite – imagem de tamanho arbitrário que
é usado por agentes (se move na tela) ou por objetos fixos.
Background – “Pano de Fundo”• Baseado em Cores• Baseado em textura• Tiles
9
Sprites - Animação
10
Sprites & Background
Sprites
11
Sprites - EvoluçãoAnos 80 ...
Anos 90 ...
Últimos 4 anos ...
12
Background - Textura
13
Background - Tiles
Podem ser animados
14
TileMapsUma estrutura contendo informações sobre
como o mundo se parece, e sobre os objetos e agentes imersos no mundo.
Ex:struct TILEMAPSQUARE {
char BasicTerrain; //0=ocean;1=plains;2=forest; // 3=hills;4=mountains;uchar RoadFlags; //0=north;1=northeast; etc.uchar RiverFlags; //0=north;1=northeast; etc.UINT* Unit;
}int iTileMap[WIDTH][HEIGHT];
15
Tilemap
Pode conter mais informação do que o tipo de tile• custo de atravessar, ...
1 1 1 1 1 1 13 3 3 3 3 3 13 3 3 2 2 3 11 1 3 2 2 3 11 1 3 3 3 3 11 1 1 1 1 1 1
1 = pedra2 = água3 = pista
16
Localização/movimentação de SpritesSprites = objetos
• coordenadas independentes do background• detecção de colisão entre objetos• problema: pode custar caro...
Sprites amarrados ao mapa de tiles• movimentação• colisão testada no tilemap• problema: atualizar tilemap
Híbrido: sprites = objetos e mundo = mapa de tiles• Mais usado• detecção de colisão entre objetos
17
Exibição via blittingTransferência de mapa de bits (blitting):
operação de cópia (central!!)Da RAM (lenta e abundante) para VRAM
(rápida e escassa) ou da VRAM para a própria VRAM
18
Page Flipping e double buffering Como é uma operação “cara” quando feita por software,
utiliza-se page flipping Para evitar flickering, usa-se mais de um buffer
(backbuffer ou double bufrer)
19
Raster OperationsAo transferir um bloco de bits, nós podemos :
• Simplesmente jogar o bit de origem no destino• Compor o bit de origem com o já existente no
destino usando as operações de AND, OR e XOR.
20
Transparência
MÁSCARAFUNDOAND
MÁSCARA
F•AND•MXORSPRITE
21
Transparência – Source Color Keying A idéia é usar uma cor que não é usada na figura e
utilizá-la como “cor transparente”.
if ( src != colorkey ) dst = src;else dst = background;
22
Blending
alpha = sprite.alpha / MAX_ALPHA;beta = 1.0 - alpha;
dst.red = (src.red * alpha) +(background.red * beta);
dst.green = (src.green * alpha) +(background.green * beta);
dst.blue = (src.blue * alpha) +(background.blue * beta);
23
Game Spaces Space
• Um espaço bidimensional de tamanho e forma arbitrárias World Space (mundo)
• Espaço composto de todos os objetos/sprites. View Space (janela visível)
• Espaço geralmente do mesmo tamanho do screen space, mas com coordenada do ponto esquerdo superior igual a (0,0)
Screen Space• Espaço na tela usado para renderizar a área do jogo (não
inclui bordas, status panels, barra de menu, etc.)• coordenadas em relação à tela (haverá ajustes!)
24
Game Spaces (cont.)
25
ÂncoraUma correlação entre um ponto de um
espaço (geralmente (0,0)) e um outro espaço.
ScreenSpace View
Space
Âncora (16,15)
26
ÂncoraTambém usada para colocar um Sprite em
um tile
27
ClippingO que cai fora da janela visível é cortado
28
Scrolling - TilesGeralmente baseado na
entrada do usuário.Deslocamento do view
space em relação ao world space
29
Scrolling - TexturaFundo repetidamente
desenhado.• janela com velocidade fixa• ou baseado na entrada do
usuário
30
ScrollingA partir de quando fazer o scroll?
• Centrado na “unidade” que está sendo controlada no momento -> região central
• Janela visívelDe quanto faz o scroll?
• O suficiente para recolocar “unidade”em área visível (ou região central)
• Tela visivel inteira
31
Tilesets
32
Tilesets Um conjunto de tiles. Como é ineficiente colocar um
tile em cada arquivo, nós simplesmente agrupamos um conjunto lógico de tiles e colocamos no mesmo arquivo gráfico.
33
Trabalhando com TilesetsPara trabalharmos com tilesets, nós
precisamos disponibilizar mais algumas informações além da gráfica contida no arquivo. Por exemplo, o tamanho de cada tile.
Estas informações podem ser obtidas:• Colocando-as junto com o código (hardcoded)• Disponibilizando um arquivo texto para cada
tileset.• Colocando-as dentro do arquivo gráfico
34
Criando um Template para os TilesetsPara colocar informações no arquivo gráfico,
vamos criar um padrão.A idéia é utilizar um frame para cada tile, e
neste frame colocar as informações necessárias embutidas em cada pixel
Algumas informações:• Comprimento e largura• Quina de cada tile cor de transparência• Âncora de cada tile
35
Template para TilesetsInformações Parâmetros
Transparência e Quina
Moldura
Âncora
Tamanho da Figura
Âncora Interna
Informações
Altu
ra (V
erde
)
Largura (Verde)Âncora
Parâmetros
38
Mais Tilesets
39
Gerenciando a Transição de Tiles
Como tornar a transição entre os tiles mais suave?
40
Transição de Tiles – Solução 1
Criar tiles de transição entre os vários tipos.
Criando 8 pontos de transição entre 2 tipos diferentes (ex. agua e terra), seriam necessários 28=256 tiles.
Tendo 8 tipos de tiles, seriam 7x8x256 = 14336 tiles. Impossível !!!!!!!!
41
Transição de Tiles – Solução 2Criar uma precedência, ou seja, quando dois
tipos se encontram, o que tiver maior precedência, sobrepõe o outro.• Exemplo: selva, floresta, montanha, morro, mangue,
deserto, campo e água
Isto garante que podemos fazer um template para cada tipo e depois podemos compor usando a transparência do bitblt.
42
Transição de Tiles - Solução 2Dividir os pontos de transição em 2 grupos:
aresta e quina. Isto leva a 32 tiles:
43
Transição de Tiles - Solução 2
No total seriam 32 * (8-1) = 224 tiles
44
Tiles: blending de terreno Z
oo ty
coon
sem
ble
ndin
g
45
Tiles: blending de terreno Z
oo ty
coon
com
ble
ndin
g
46
Motores 2D - Java J2DA!
http://j2da.sourceforge.net/index.phpGOLDEN T GAME ENGINE
http://www.goldenstudios.or.id/products/GTGE/index.php
Planetationhttp://www.scottshaver2000.com/template/template.php?page=planetation_main
GAGE - Genuine Advantage Gaming Enginehttp://java.dnsalias.com/
47
Jogos Isométricos
48
Projeções AxonométricasNão possuem “ponto de fuga”Linhas que são paralelas no espaço 3D
continuam paralelas na figura 2DObjetos distantes tem o mesmo tamanho
que objetos próximos
49
Projeções Isométricas e Jogos São projeções axonométricas onde os eixos x,y e z
possuem a mesma métrica• se projetarmos um cubo, todas as arestas terão o
mesmo tamanho. Os jogos isométricos geralmente são baseados em
tiles para poder compô-los formando mapas• projeção isométrica 1:2 (razão altura:comprimento).
50
Construindo os Tiles
51
Construindo os Tiles (cont.)
52
Construtindo um Mapa de Tiles (cont.)
53
Construindo um mapa de TilesNecessidade de transparência
54
Tiles Isométricos – Blitting Order
1. Tiles “da frente” devem ser plotados depois2. Se uma pequena porção da tela tiver que
ser atualizada, nós devemos plotar os tiles que mudaram e todos os respectivos vizinhos - obedecendo a regra 1.
55
Desenhando um Sprite em um Tile Isométrico
O Sprite pode ser desenhado na região em vermelho
56
Tilemaps Isométricos X Retangulares Mapas retangulares e isométricos geralmente
possuem uma estrutura bidimensional associada que guarda informações de cada tile – Tilemap.
Nos mapas retangulares, incrementar x no tilemap significa se mover para o leste na tela, e aumentar y significa se mover para o sul
E nos mapas isométricos ????
57
Problemas dos Mapas IsométricosTile Plotting
• Dado uma posição no Tilemap [x][y], como encontrar a coordenada no mundo (em que ponto da tela fica) ?
Mouse mapping• Dado um ponto na tela (ou no mundo), qual a
posição no Tilemap?Tile Walking
• Como mover um objeto de um ponto do mundo para o outro?
58
Tipos de Mapas Isométricos
Slide Staggered
Diamond
59
Slide MapsFácil de
• Plotar• Navegar• Interagir
Ocupa muito espaço em telaUsado em scrolled action games
• Zaxxon (1982)
60
Slide Maps – Sistema de Coordenadas
X
0 1 2 3
Y
01234
X
Y
(0,0) (1,0) (2,0) (3,0)(0,1) (1,1) (2,1)
(0,2)(3,1)
(1,2) (2,2) (3,2)(0,3) (1,3) (2,3) (3,3)
(0,4) (1,4) (2,4) (3,4)
61
Slide Maps - Tile PlottingDada uma posição no tilemap, qual o pixel
equivalente?
Valor do Pixel Aumento de 1 em MapX
Aumento de 1 em MapY
Equação
PixelX +TileWidth +Tilewidth/2 MapX*TileWidth+ MapY*TileWidth/2
PixelY 0 +TileHeight/2 MapY*TileHeight/2
(0,0)
(0,1)
(1,0)
(1,1)
62
Slide Maps - Tile PlottingPOINT SlideMap_TilePlotter(
POINT ptMap, int iTileWidth, int iTileHeight) {POINT ptReturn;ptReturn.x = ptMap.x*iTileWidth +
ptMap.y*iTileWidth/2;ptReturn.y = ptMap.y+iTileHeight/2;return (ptReturn);
}
63
Slide Maps – Tile WalkingComo mover de um objeto de um ponto do
mundo para o outro?
Direções Possíveis:N
NE
L
SE
S
SO
O
NO
64
Slide Maps – Tile Walking
Direção Variação no X (Tilemap)
Variação no y (Tilemap)
Leste +1 0
Sudeste 0 +1
Oeste -1 0
Noroeste 0 -1
X
Y
(0,0) (1,0) (2,0) (3,0)(0,1) (1,1) (2,1)
(0,2)(3,1)
(1,2) (2,2) (3,2)(0,3) (1,3) (2,3) (3,3)
(0,4) (1,4) (2,4) (3,4)
65
Slide Maps – Tile WalkingNorte e Sul
X = 1(leste) + 0(noroeste) + 0(noroeste)
y = 0(leste) - 1(noroeste) - 1(noroeste)
X = -1(oeste) + 0(sudeste) + 0(sudeste)
y = 0(oeste) - 1(sudeste) - 1(sudeste)
66
Slide Maps – Tile WalkingNordeste/Sudoeste
X = 1(leste) + 0(noroeste)
y = 0(leste) - 1(noroeste)
X = -1(oeste) + 0(sudeste)
y = 0(oeste) - 1(sudeste)
67
Slide Maps – Tile Walking
Direção Variação no X (Tilemap)
Variação no y (Tilemap)
Leste +1 0Sudeste 0 +1Oeste -1 0
Noroeste 0 -1Norte +1 -2Sul -1 +2
Nordeste +1 -1Sudoeste -1 +1
68
Slide Maps – CódigoPOINT SlideMap_Tilewalker(POINT ptStart,
IsoDirection dir) {switch (dir){
case ISO_NORTH:ptStart.x++; ptStart.y-=2;
case ISO_NORTHEAST:ptStart.x++; ptStart.y--;
case ISO_EAST:ptStart.x++;
case ISO_SOUTHEAST:ptStart.y++;
case ISO_SOUTH:ptStart.x--; ptStart.y+=2;
case ISO_SOUTHWEST:ptStart.x--; ptStart.y++;
case ISO_WEST:ptStart.x--;
case ISO_NORTWEST:ptStart.y--;
} return(ptStart);}
69
Slide Maps – Mouse mapping
Dado um ponto na tela (ou no mundo), qual a posição no Tilemap?
Como fazer esta conversão de forma rápida e eficiente ??
Subdividindo o mundo em Retângulos !
70
Slide Maps – Mousemapping
Sabendo em que ponto do retângulo o mouse foi clicado, basta obter a cor do pixel do ponto equivalente no template acima para obter o tile.
71
Slide Maps – Mousemapping
Ou fazendo uma lookup table:0000002222111111000022222222111100222222222222002222222222222222332222222222224433332222222244443333332222444444
72
Staggered MapsMuito usado em jogos de estratégia
• Civilization II e III• Alpha Centauri• Pharao
73
Staggered Maps – Sistema de Coordenadas
(0,0)(0,1)
(0,2)(0,3)
(1,0)
(1,2)(1,1)
(1,3)
(2,0)
(2,2)
(2,1)
(2,3)(3,2)
(3,3)
(3,0)(3,1)
0123
Y
0 1 2 3
X
X
Y
74
Staggered Maps – Tileplotting
(0,0)(0,1)
(0,2)(0,3)
(1,0)
(1,2)(1,1)
(1,3)
(2,0)
(2,2)
(2,1)
(2,3)(3,2)
(3,3)
(3,0)(3,1)
Valor do Pixel Aumento de 1 em MapX
Aumento de 1 em MapY Equação
PixelX +TileWidth Se MapY é par, TileWidth/2
Se ímpar, - TileWidth/2
MapX*TileWidth+
(MapY&1)*TileWidth/2
PixelY 0 +TileHeight/2 MapY*TileHeight/2
75
Staggered Maps – TileplottingPOINT StaggedMap_TilePlotter(
POINT ptMap, int iTileWidth, int iTileHeight) {POINT ptReturn;ptReturn.x = ptMap.x*iTileWidth +
(ptMap.y&1)*iTileWidth/2;ptReturn.y = ptMap.y+iTileHeight/2;return (ptReturn);
}
76
Staggered Maps – Tilewalking
Direção Y Par/Ímpar Mudança em X
Mudança em Y
Leste - 1 0
Oeste - -1 0
Sudeste Par 0 1
Sudoeste Ímpar 0 1
(0,0)(0,1)
(0,2)(0,3)
(1,0)
(1,2)(1,1)
(1,3)
(2,0)
(2,2)
(2,1)
(2,3)(3,2)
(3,3)
(3,0)(3,1)X
Y
77
Staggered Maps – TilewalkingY ímpar - Noroeste
Se de um Y par para irmos para sudeste basta incrementar x de 0 e y de 1 (o que nos deixa em Y ímpar), então de Y ímpar para irmos para noroeste basta mover x de 0 y de -1
(1,1)(1,2)
(0,3) (1,3)(2,2)
(2,3)
(1,4) (2,4)(1,5)
Y par - Sudeste
Y ímpar - Noroeste
78
Staggered Maps – TilewalkingY par - Nordeste
Se de um Y ímpar para irmos para sudoeste basta incrementar x de 0 e y de 1 (o que nos deixa em Y par), então de Y par para irmos para nordeste basta mover x de 0 y de -1
(1,1)(1,2)
(0,3) (1,3)(2,2)
(2,3)
(1,4) (2,4)(1,5)
Y ímpar - Sudoeste
Y par - Nodeste
79
Staggered Maps – Tilewalking
Direção +/-x (y par) +/-y (y par)
+/-x (y ímpar)
+/-y (y ímpar)
Norte ??? ??? ??? ???Nordeste 0 -1 ??? ???
Leste 1 0 1 0Sudeste 0 1 ??? ???
Sul ??? ??? ??? ???Sudoeste ??? ??? 0 1
Oeste -1 0 -1 0Noroeste ??? ??? 0 -1
80
Staggered Maps – TilewalkingY Par – Noroeste/Sudoeste
(1,1)
(1,2)
(0,3) (1,3)
(2,2)
(2,3)
(1,4) (2,4)
(1,5)
(1,1)
(1,2)
(0,3) (1,3)
(2,2)
(2,3)
(1,4) (2,4)
(1,5)
X = 0(nordeste) –1(oeste)
Y = -1(nordeste) +0(oeste)
X = 0(sudeste) –1(oeste)
Y = +1(sudeste) +0(oeste)
81
Staggered Maps – TilewalkingY Par – Norte/Sul
(1,1)
(1,2)
(0,3) (1,3)
(2,2)
(2,3)
(1,4) (2,4)
(1,5)
(1,1)
(1,2)
(0,3) (1,3)
(2,2)
(2,3)
(1,4) (2,4)
(1,5)
X = 0(nordeste) –0(noroeste-ímpar)
Y = -1(nordeste) -1(noroeste-ímpar)
X = 0(sudeste) –1(sudoeste-ímpar)
Y = +1(sudeste) +1(sudoeste-ímpar)
82
Staggered Maps – TilewalkingY Ímpar – Nordeste/Sudeste
(1,1)
(1,2)
(0,3) (1,3)
(2,2)
(2,3)
(1,4) (2,4)
(1,5)
(1,1)
(1,2)
(0,3) (1,3)
(2,2)
(2,3)
(1,4) (2,4)
(1,5)
X = 0(noroeste) +1(leste)
Y = -1(noroeste) +0(leste)
X = 0(sudoeste) +1(leste)
Y = +1(sudoeste) +0(leste)
83
Staggered Maps – TilewalkingY Ímpar – Norte/Sul
(1,1)
(1,2)
(0,3) (1,3)
(2,2)
(2,3)
(1,4) (2,4)
(1,5)
(1,1)
(1,2)
(0,3) (1,3)
(2,2)
(2,3)
(1,4) (2,4)
(1,5)
X = +1(nordeste) –1(noroeste-par)
Y = -1(nordeste) -1(noroeste-par)
X = +1(sudeste) –1(sudoeste-par)
Y = +1(sudeste) +1(sudoeste-par)
84
Staggered Maps – Tilewalking
Direção +/-x (y par) +/-y (y par)
+/-x (y ímpar)
+/-y (y ímpar)
Norte 0 -2 0 -2Nordeste 0 -1 1 -1
Leste 1 0 1 0Sudeste 0 1 1 1
Sul 0 2 0 2Sudoeste -1 1 0 1
Oeste -1 0 -1 0Noroeste -1 -1 0 -1
85
Staggered Maps – Tilewalking CódigoPOINT StaggeredMap_Tilewalker(POINT ptStart,
IsoDirection dir) {switch (dir){
case ISO_NORTH:ptStart.y-=2;
case ISO_NORTHEAST:ptStart.y--; ptStart.x +=(ptStart.y&1);
case ISO_EAST:ptStart.x++;
case ISO_SOUTHEAST:ptStart.y++; ptStart.x +=(ptStart.y&1);
case ISO_SOUTH: ptStart.y+=2;case ISO_SOUTHWEST:
ptStart.y++; ptStart.x+=(ptStart.y&1-1);case ISO_WEST:
ptStart.x--;case ISO_NORTWEST:
ptStart.y--; ptStart.x+=(ptStart.y&1-1);} return(ptStart);
}
86
Staggered MapsMapa sem “Dentes”/ Mapas Cilíndricos
87
Diamond MapsMuito usado em jogos de estratégia em
tempo real:• Age of Empire• Sim City 2000/3000• Roller Coaster Tycoon
88
Diamond Maps – Sistema de Coordenadas
xy
012
345
67
01
23
45
67
Y X
89
Diamond Maps - Tileplotting
(0,0)(0,1)
(0,2) (1,1)(1,0)
(2,0)
(1,2) (2,1)(2,2)
Valor do Pixel Aumento de 1 em MapX
Aumento de 1 em MapY
Equação
PixelX TileWidth/2 -TileWidth/2 (MapX-MapY)*TileWidth/2
PixelY TileHeight/2 +TileHeight/2 (MapX+MapY)*TileHeight/2
90
Diamond Maps - Tileplotting
POINT DiamondMap_TilePlotter(POINT ptMap, int iTileWidth, int iTileHeight) {
POINT ptReturn;ptReturn.x=(ptMapX+ptMapY)*iTileWidth/2ptReturn.y =(ptMapX+ptMapY)* iTileHeight/2;return (ptReturn);
}
91
Diamond Maps - Tilewalking
xy
(0,0)(0,1)
(0,2) (1,1)(1,0)
(2,0)
(1,2) (2,1)(2,2)
Direção +/- X +- YSudeste 1 0Sudoeste 0 1Noroeste -1 0Nordeste 0 -1
92
Diamond Maps – TilewalkingNorte/Sul
(0,0)(0,1)
(0,2) (1,1)(1,0)
(2,0)
(1,2) (2,1)(2,2)
(0,0)(0,1)
(0,2) (1,1)(1,0)
(2,0)
(1,2) (2,1)(2,2)
X = 0(nordeste) –1(noroeste)
Y = -1(nordeste) +0(noroeste)
X = 1(sudeste) +0 (sudoeste)
Y = 0(sudeste) +1(sudoeste)
93
Diamond Maps-TilewalkingLeste/Oeste
(0,0)(0,1)
(0,2) (1,1)(1,0)
(2,0)
(1,2) (2,1)(2,2)
(0,0)(0,1)
(0,2) (1,1)(1,0)
(2,0)
(1,2) (2,1)(2,2)
X = 1(sudeste) +0(nordeste)
Y = 0(sudeste) -1(nordeste)
X = 0(sudoeste) +1 (noroeste)
Y = -1(sudoeste) +0(noroeste)
94
Diamond Maps – Tilewalking
Direção +/- X +- YNorte -1 -1
Nordeste 0 -1Leste 1 -1
Sudeste 1 0Sul 1 1
Sudoeste 0 1Oeste -1 1
Noroeste -1 0
95
Diamond Maps – TilewalkingPOINT StaggeredMap_Tilewalker(POINT ptStart,
IsoDirection dir) {switch (dir){
case ISO_NORTH:ptStart.x--;ptStart.y--;
case ISO_NORTHEAST:ptStart.y--;
case ISO_EAST:ptStart.x++; ptStart.y--;
case ISO_SOUTHEAST:ptStart.x++;
case ISO_SOUTH: ptStart.x++;ptStart.y++case ISO_SOUTHWEST:
ptStart.y++; case ISO_WEST:
ptStart.x--; ptStart.y++;case ISO_NORTWEST:
ptStart.x--; } return(ptStart);
}
96
Referências http://www.gamedev.net/reference/list.asp?categoryid=44
• Introduction To Isometric Engines;Smooth Scrolling a Tile Map; andScreen to Map Coordinates by Adams, J.
• Axonometric Projections - A Technical Overviewby Riemersma, T.
• Isometric 'n' Hexagonal Maps Part I and Part IIby Tanstaafl
• Map file formatby Gambone, D.
• Tile Graphics Techniques 1.0by McIntosh, J
• Tile Based Games FAQby Palmer, C. and Taylor, G.
• Tile/Map-Based Game Techniques: Base Data Structures; and Tile/Map-Based Game Techniques: Handling Terrain Transitions Michael, D.
• Tiling in DirectX: Part 1 and Part 2Estevão, D.