Técnicas Gráficas para Jogos

1. Técnicas Gráficas para Jogos Eduardo Sampaio Rocha Pedro Henrique Macedo Börje Karlsson Geber Ramalho Vicente Vieira Filho

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 BBP 1 bit – 2 cores 8 bits – 256 cores (paleta) 16 bits – 65536 cores 24 bits – 16.7 milhões de cores

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

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

6. 24/32 bpp • 8.8.8 • Alpha (8).8.8.8 • X(8).8.8.8

7. Conceitos Básicos Sprite Tile e tilemap Operações (blitting, flipping, clipping, blending, scrolling,...)

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

9. Sprites - Animação

10. Sprites & Background Sprites

11. Sprites - Evolução • Anos 80 ... • Anos 90 ... • Últimos 4 anos ...

12. Background - Textura

13. Background - Tiles Podem ser animados

14. 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];

15. Tilemap • Pode conter mais informação do que o tipo de tile • custo de atravessar, ... 1 = pedra 2 = água 3 = pista

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

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

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

20. Transparência F•AND•M XOR SPRITE FUNDO AND MÁSCARA MÁSCARA

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

26. Âncora • Também usada para colocar um Sprite em um tile

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

28. Scrolling - Tiles • Geralmente baseado na entrada do usuário. • Deslocamento do view space em relação ao world space

29. Scrolling - Textura • Fundo repetidamente desenhado. • janela com velocidade fixa • ou baseado na entrada do usuário

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

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

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

35. Template para Tilesets Informações Parâmetros

36. Informações Transparência e Quina Moldura Âncora Tamanho da Figura Âncora Interna

37. Parâmetros Âncora Largura (Verde) Altura (Verde)

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

42. Transição de Tiles - Solução 2 • Dividir 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 • Zoo tycoon sem blending

45. Tiles: blending de terreno • Zoo tycoon com blending

46. 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/

47. Jogos Isométricos

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

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