T cnicas gr ficas para jogos
Sponsored Links
This presentation is the property of its rightful owner.
1 / 96

Técnicas Gráficas para Jogos PowerPoint PPT Presentation


  • 117 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

Técnicas Gráficas para Jogos

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


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

1 bit – 2 cores

8 bits – 256 cores (paleta)

16 bits – 65536 cores

24 bits – 16.7 milhões de cores


Pixel values

(0-255)

12

5

29

250

6

Paleta (8 bpp)

  • Rápido

  • Fácil de mudar as cores de toda a tela

8 bits

24 bits


X

A

R4

R4

R3

R4

R3

R3

R2

R2

R2

R1

R1

R0

R1

R0

R0

G5

G4

G4

G4

G3

G3

G3

G2

G2

G2

G1

G1

G1

G0

G0

G0

B4

B4

B4

B3

B3

B3

B2

B2

B2

B1

B1

B1

B0

B0

B0

16 bpp – High Color

  • Alpha(transparência).5.5.5

  • X(don’t care).5.5.5

  • 5.6.5


24/32 bpp

  • 8.8.8

  • Alpha (8).8.8.8

  • X(8).8.8.8


Conceitos Básicos

Sprite

Tile e tilemap

Operações (blitting, flipping, clipping, blending, scrolling,...)


Imagem – Sprites & Background

  • Sprite – 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


Sprites - Animação


Sprites & Background

Sprites


Sprites - Evolução

  • Anos 80 ...

  • Anos 90 ...

  • Últimos 4 anos ...


Background - Textura


Background - Tiles

Podem ser animados


TileMaps

  • Uma estruturacontendo 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];


Tilemap

  • Pode conter mais informação do que o tipo de tile

    • custo de atravessar, ...

1 = pedra

2 = água

3 = pista


Localização/movimentação de Sprites

  • Sprites = 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


Exibição via blitting

  • Transferê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


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)


Raster Operations

  • Ao 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.


Transparência

F•AND•M

XOR

SPRITE

FUNDO

AND

MÁSCARA

MÁSCARA


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;


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);


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!)


Game Spaces (cont.)


Screen

Space

Âncora

  • Uma correlação entre um ponto de um espaço (geralmente (0,0)) e um outro espaço.

Âncora

(16,15)

View

Space


Âncora

  • Também usada para colocar um Sprite em um tile


Clipping

  • O que cai fora da janela visível é cortado


Scrolling - Tiles

  • Geralmente baseado na entrada do usuário.

  • Deslocamento do view space em relação ao world space


Scrolling - Textura

  • Fundo repetidamente desenhado.

    • janela com velocidade fixa

    • ou baseado na entrada do usuário


Scrolling

  • A partir de quando fazer o scroll?

    • Centrado na “unidade” que está sendo controlada no momento -> região central

    • Janela visível

  • De quanto faz o scroll?

    • O suficiente para recolocar “unidade”em área visível (ou região central)

    • Tela visivel inteira


Tilesets


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.


Trabalhando com Tilesets

  • Para 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


Criando um Template para os Tilesets

  • Para 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


Template para Tilesets

Informações

Parâmetros


Informações

Transparência e Quina

Moldura

Âncora

Tamanho da Figura

Âncora Interna


Parâmetros

Âncora

Largura (Verde)

Altura (Verde)


Mais Tilesets


Gerenciando a Transição de Tiles

  • Como tornar a transição entre os tiles mais suave?


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 !!!!!!!!


Transição de Tiles – Solução 2

  • Criar 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.


Transição de Tiles - Solução 2

  • Dividir os pontos de transição em 2 grupos: aresta e quina. Isto leva a 32 tiles:


Transição de Tiles - Solução 2

  • No total seriam 32 * (8-1) = 224 tiles


Tiles: blending de terreno

  • Zoo tycoon sem blending


Tiles: blending de terreno

  • Zoo tycoon com blending


Motores 2D - Java

  • J2DA!http://j2da.sourceforge.net/index.php

  • GOLDEN T GAME ENGINEhttp://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/


Jogos Isométricos


Projeções Axonométricas

  • Não possuem “ponto de fuga”

  • Linhas que são paralelas no espaço 3D continuam paralelas na figura 2D

  • Objetos distantes tem o mesmo tamanho que objetos próximos


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).


Construindo os Tiles


Construindo os Tiles (cont.)


Construtindo um Mapa de Tiles (cont.)


Construindo um mapa de Tiles

  • Necessidade de transparência


Tiles Isométricos – Blitting Order

  • Tiles “da frente” devem ser plotados depois

  • 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.


Desenhando um Sprite em um Tile Isométrico

  • O Sprite pode ser desenhado na região em vermelho


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 ????


Problemas dos Mapas Isométricos

  • Tile 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?


Tipos de Mapas Isométricos

Slide

Staggered

Diamond


Slide Maps

  • Fácil de

    • Plotar

    • Navegar

    • Interagir

  • Ocupa muito espaço em tela

  • Usado em scrolled action games

    • Zaxxon (1982)


Slide Maps – Sistema de Coordenadas

X

1

2

0

3

0

(0,0)

(1,0)

(2,0)

(3,0)

1

(0,1)

(1,1)

(2,1)

(3,1)

Y

2

(0,2)

(1,2)

(2,2)

(3,2)

3

(0,3)

(1,3)

(2,3)

(3,3)

4

(0,4)

(1,4)

(2,4)

(3,4)

X

Y


Slide Maps - Tile Plotting

  • Dada uma posição no tilemap, qual o pixel equivalente?

(0,0)

(1,0)

(0,1)

(1,1)


Slide Maps - Tile Plotting

POINT 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);

}


Slide Maps – Tile Walking

  • Como mover de um objeto de um ponto do mundo para o outro?

    Direções Possíveis:

N

NO

NE

O

L

SE

SO

S


(0,0)

(1,0)

(2,0)

(3,0)

(0,1)

(1,1)

(2,1)

(3,1)

(0,2)

(1,2)

(2,2)

(3,2)

(0,3)

(1,3)

(2,3)

(3,3)

(0,4)

(1,4)

(2,4)

(3,4)

Slide Maps – Tile Walking

X

Y


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)

Slide Maps – Tile WalkingNorte e Sul


X = 1(leste) + 0(noroeste)

y = 0(leste) - 1(noroeste)

X = -1(oeste) + 0(sudeste)

y = 0(oeste) - 1(sudeste)

Slide Maps – Tile WalkingNordeste/Sudoeste


Slide Maps – Tile Walking


Slide Maps – Código

POINT 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);

}


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 !


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.


Slide Maps – Mousemapping

  • Ou fazendo uma lookup table:

    0000002222111111

    0000222222221111

    0022222222222200

    2222222222222222

    3322222222222244

    3333222222224444

    3333332222444444


Staggered Maps

  • Muito usado em jogos de estratégia

    • Civilization II e III

    • Alpha Centauri

    • Pharao


Staggered Maps – Sistema de Coordenadas

X

0

1

2

3

0

(0,0)

(1,0)

(2,0)

(3,0)

1

(0,1)

(1,1)

(2,1)

(3,1)

Y

2

(1,2)

(0,2)

(2,2)

(3,2)

3

(0,3)

(1,3)

(2,3)

(3,3)

X

Y


(0,0)

(1,0)

(2,0)

(3,0)

(0,1)

(1,1)

(2,1)

(3,1)

(1,2)

(0,2)

(2,2)

(3,2)

(0,3)

(1,3)

(2,3)

(3,3)

Staggered Maps – Tileplotting


Staggered Maps – Tileplotting

POINT 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);

}


(0,0)

(1,0)

(2,0)

(3,0)

(0,1)

(1,1)

(2,1)

(3,1)

(1,2)

(0,2)

(2,2)

(3,2)

(0,3)

(1,3)

(2,3)

(3,3)

Staggered Maps – Tilewalking

X

Y


Y par - Sudeste

(1,1)

(1,2)

(2,2)

(0,3)

(1,3)

(2,3)

(1,4)

(2,4)

Y ímpar - Noroeste

(1,5)

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


Y ímpar - Sudoeste

(1,1)

(1,2)

(2,2)

(0,3)

(1,3)

(2,3)

(1,4)

(2,4)

Y par - Nodeste

(1,5)

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


Staggered Maps – Tilewalking


(1,1)

(1,2)

(2,2)

(0,3)

(1,3)

(2,3)

(1,4)

(2,4)

(1,5)

(1,1)

(1,2)

(2,2)

(0,3)

(1,3)

(2,3)

(1,4)

(2,4)

(1,5)

Staggered Maps – TilewalkingY Par – Noroeste/Sudoeste

X = 0(nordeste) –1(oeste)

Y = -1(nordeste) +0(oeste)

X = 0(sudeste) –1(oeste)

Y = +1(sudeste) +0(oeste)


(1,1)

(1,2)

(2,2)

(0,3)

(1,3)

(2,3)

(1,4)

(2,4)

(1,5)

(1,1)

(1,2)

(2,2)

(0,3)

(1,3)

(2,3)

(1,4)

(2,4)

(1,5)

Staggered Maps – TilewalkingY Par – Norte/Sul

X = 0(nordeste) –0(noroeste-ímpar)

Y = -1(nordeste) -1(noroeste-ímpar)

X = 0(sudeste) –1(sudoeste-ímpar)

Y = +1(sudeste) +1(sudoeste-ímpar)


(1,1)

(1,2)

(2,2)

(0,3)

(1,3)

(2,3)

(1,4)

(2,4)

(1,5)

(1,1)

(1,2)

(2,2)

(0,3)

(1,3)

(2,3)

(1,4)

(2,4)

(1,5)

Staggered Maps – TilewalkingY Ímpar – Nordeste/Sudeste

X = 0(noroeste) +1(leste)

Y = -1(noroeste) +0(leste)

X = 0(sudoeste) +1(leste)

Y = +1(sudoeste) +0(leste)


(1,1)

(1,2)

(2,2)

(0,3)

(1,3)

(2,3)

(1,4)

(2,4)

(1,5)

(1,1)

(1,2)

(2,2)

(0,3)

(1,3)

(2,3)

(1,4)

(2,4)

(1,5)

Staggered Maps – TilewalkingY Ímpar – Norte/Sul

X = +1(nordeste) –1(noroeste-par)

Y = -1(nordeste) -1(noroeste-par)

X = +1(sudeste) –1(sudoeste-par)

Y = +1(sudeste) +1(sudoeste-par)


Staggered Maps – Tilewalking


Staggered Maps – Tilewalking Código

POINT 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);

}


Staggered MapsMapa sem “Dentes”/ Mapas Cilíndricos


Diamond Maps

  • Muito usado em jogos de estratégia em tempo real:

    • Age of Empire

    • Sim City 2000/3000

    • Roller Coaster Tycoon


Diamond Maps – Sistema de Coordenadas

Y

X

0

0

1

1

2

2

3

3

4

4

5

5

6

6

7

7

x

y


(0,0)

(0,1)

(1,0)

(0,2)

(1,1)

(2,0)

(1,2)

(2,1)

(2,2)

Diamond Maps - Tileplotting


Diamond Maps - Tileplotting

POINT DiamondMap_TilePlotter(

POINT ptMap, int iTileWidth, int iTileHeight) {

POINT ptReturn;

ptReturn.x=(ptMapX+ptMapY)*iTileWidth/2

ptReturn.y =(ptMapX+ptMapY)* iTileHeight/2;

return (ptReturn);

}


(0,0)

(0,1)

(1,0)

(0,2)

(1,1)

(2,0)

(1,2)

(2,1)

(2,2)

Diamond Maps - Tilewalking

x

y


(0,0)

(0,0)

(0,1)

(0,1)

(1,0)

(1,0)

(0,2)

(0,2)

(1,1)

(1,1)

(2,0)

(2,0)

(1,2)

(1,2)

(2,1)

(2,1)

(2,2)

(2,2)

Diamond Maps – TilewalkingNorte/Sul

X = 0(nordeste) –1(noroeste)

Y = -1(nordeste) +0(noroeste)

X = 1(sudeste) +0 (sudoeste)

Y = 0(sudeste) +1(sudoeste)


(0,0)

(0,0)

(0,1)

(0,1)

(1,0)

(1,0)

(0,2)

(0,2)

(1,1)

(1,1)

(2,0)

(2,0)

(1,2)

(1,2)

(2,1)

(2,1)

(2,2)

(2,2)

Diamond Maps-TilewalkingLeste/Oeste

X = 1(sudeste) +0(nordeste)

Y = 0(sudeste) -1(nordeste)

X = 0(sudoeste) +1 (noroeste)

Y = -1(sudoeste) +0(noroeste)


Diamond Maps – Tilewalking


Diamond Maps – Tilewalking

POINT 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);

}


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.


  • Login