Gestão de telas e ambientes em jogos 2D

Prof. André Campos06/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 A A A A A A BB C C C C C C D

A

B

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

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

Tile inicial Tile final

Coordenada X do jogador no mundo

Coordenada da telado tile inicial

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– X leste– Y sudoeste

• Fácil de implementar• Facilita ordem de desenho dos tiles

0 1 2 30

12

34

Staggered Map

• Sistemas de coordenadas– X leste– Y zig-zag

• Mais complexo• Aproveita melhor o espaço retangular

do mapeamento do cenário

0 1 2 3

01

23

4

Diamond Map

• Sistema de coordenadas– X sudeste– Y sudoeste

• Fácil de implementar

xy 01

23

4

01

23

4

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