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.