1 / 96

Técnicas Gráficas para Jogos

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

marcy
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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

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

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

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

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

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

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

  8. Sprites - Animação

  9. Sprites & Background Sprites

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

  11. Background - Textura

  12. Background - Tiles Podem ser animados

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

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

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

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

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

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

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

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

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

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

  23. Game Spaces (cont.)

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

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

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

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

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

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

  30. Tilesets

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

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

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

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

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

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

  37. Mais Tilesets

  38. Gerenciando a Transição de Tiles • Como tornar a transição entre os tiles mais suave?

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

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

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

  42. Transição de Tiles - Solução 2 • No total seriam 32 * (8-1) = 224 tiles

  43. Tiles: blending de terreno • Zoo tycoon sem blending

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

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

  46. Jogos Isométricos

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

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

  49. Construindo os Tiles

More Related