Post on 17-Apr-2015
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