Gestão de telas e ambientes em jogos 2D

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

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

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

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

5. 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 BB C C C C C C D

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

7. Scrollers • Cenário maior que a tela • Jogador no centro da 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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