Gestão de telas e ambientes em jogos 2D Prof. André Campos 06/05/2004

Gestão de telas 2D Aula passada: Animação baseada em Sprites Onde está o cenário? Cenário  Gestão de telas Tiles Jogos baseados em passagem de telas Scrollers (2 e 4-direções) Tiles multi-camadas Parallax Scroller Projeção isométricas Page-Swap Scrollers

Tiles Jogos 2D  baseado em “Tiles” Técnica originária de jogos em máquinas antigas Compressão de cenários Ideal para memória limitada Exemplo: primeiras versões de Legend of Zelda 1 nível = (5x5) x telas de 256x200 pixels, 1 pixel = 1 byte (pallete) Ou seja, 1.25 Mb de espaço para definir o cenário Muito mais que mesmo consoles de jogos como Nitendo eram capazes de suportar Bastante utilizada atualmente em celulares e computadores de mão Utilizada mesmo jogos mais complexos, envolvendo 3D

Idéia de Tiles Geração de cenário baseado em repetição de elementos Vantagens Compressão do cenário Desvantagem Cenário composto por um número finito de elementos (padrões) repetidos

Funcionamento de tiles Uso de 2 estruturas Matriz de mapeamento Tabela de tiles Tamanha dos tiles Potência de 2 (blitting) Tamanhos diferentes A B C D A A A A A A A B B C C C C C C D

Jogos baseados em passagem de telas Cada tela é um representada por uma matriz de mapeamento, ou Uma imagem de fundo Design: Diagrama de transição de estados Em dispositivos com memória limitada as telas podem ser carregadas dinamicamente

Scrollers Cenário maior que a tela Jogador no centro da tela Tela Não é o avatar do usuário que se move na tela. É a parte visível do cenário se move. 2 direções Horizontal / Vertical 4 direções Tela Tela

Desenho dos tiles Nem sempre a posição inicial da tela corresponde ao início de uma célula da matriz Loop para desenho Coordenada da tela do tile inicial Tile inicial Tile final Coordenada X do jogador no mundo

Tiles multi-camadas Técnica para aumentar a diversidade dos cenários produzidos pelos tiles Combinação de várias matrizes de mapeamento Background Elementos do cenário Elementos do jogo Matriz de mapeamento c/ células vazias

Parallax Ilusão de profundidade - Horizonte Elementos mais distantes se movimentam lentamente Variação de tiles em multi-camadas Cada camada possui uma velocidade de deslocamento diferente Definição da posição do jogador para cada camada Antes do desenho da tela  atualização da posição

Projeção isométrica Ilusão de profundidade – perspectiva Projeção utilizada em desenho industrial Não há ponto de fuga perspectiva paralela Objetos próximos e distantes têm mesmo tamanho

Tiles em projeção isométrica Cada tile é um losângulo As áreas de desenho se sobrepõem Imagens com transparência

Tipos de mapas isométricos Como associar os tiles na matriz de mapeamento? Como mapear a navegação no cenário? Quando o usuário sobe, ele vai para qual tile? Vários tipos de mapeamento Slide Map Staggered Map Diamond Map ...

Slide Map Sistema de coordenadas Fácil de implementar X  leste Y  sudoeste Fácil de implementar Facilita ordem de desenho dos tiles 1 2 3 1 2 3 4

Staggered Map Sistemas de coordenadas Mais complexo X  leste Y  zig-zag Mais complexo Aproveita melhor o espaço retangular do mapeamento do cenário 1 2 3 1 2 3 4

Diamond Map Sistema de coordenadas Fácil de implementar X  sudeste Y  sudoeste Fácil de implementar 1 2 3 4 1 2 3 4 y x

Particularidades do desenho de tiles isométricos Objetos sobre tiles isométricos podem ultrapassar os limites do tile Desenho sempre de “trás p/ frente” dependendo do mapeamento utilizado não significa x ou y menor Quando um objeto é desenhado sobre um tile, é necessário atualizar os tiles modificados e seus vizinhos Um objeto pode englobar várias células da matriz de mapeamento Ex.: um edifício

Variações Adicionando mais 3D Rotação do cenário Zoom Sprite dos objetos em diferentes ângulos e tamanho

Page-swap Scroller Variante dos scrollers Em geral, cenários não baseados em tiles Cenário = imagem única Imagem dividida em setores (malha) Dependendo da posição do usuário, define-se quais setores serão carregados na memória (do HD), e quais serão liberados.

Page-swap scroller Dependendo da máquina do usuário, o carregamento é percebido Dividir em setores memores Camada-dupla Região em memória Setores limites Cenário completo Setores em memória Usuário

Exercício Definir um cenário baseado em uma matriz de mapeamento e uma tabela de tiles Reutilizar o exercício anterior para desenhar o avatar do usuário sobre o cenário Implementar um scroller 2-direções sobre o cenário