Loodo

Famosa na indústria de jogos, a perspectiva isométrica tem vários fãs entre os gamers - especialmente entre aqueles amantes de RPGs táticos - mas entre os desenvolvedores ela não é tanto assim uma queridinha. Pelo menos não para aqueles que ainda estão começando, sendo o principal motivo as diferenças ou, porque não, a complexidade desta técnica se comparada aos jogos em perspectiva 2D “chapada”.

Na coluna de hoje nós pretendemos desmistificar este pensamento e tentar mostrar, através de uma técnica simples, que não tem nenhum bicho de sete cabeças. Nos acompanhem abaixo!

Uma das primeiras técnicas que os desenvolvedores iniciantes aprendem é a de mapa de tiles: uma estrutura de imagens retangulares, posicionadas lado a lado de maneira que se encaixem e montem um cenário. A coisa funciona bem com desenhos 2D, mas ao colocarmos nos tiles desnehos com uma perspectiva que não seja ortogonal às arestas do retângulo nós vamos ter problemas nesse encaixe. E este é exatamente o caso da perspectiva isométrica. Se você colocá-los lado a lado vai ter um resultado estranho.

Para as informações abaixo nós usamos como referência o tutorial “Isometric Game - Part 1” do Lingo Workshop, inclusive as imagens são de lá.

Nós podemos montar o nosso cenário usando a mesma estrutura de dados utilizada na perspectiva 2D, você pode usar o que preferir. Pode ser um Array com tamanho Largura * Altura, desde que guardemos esta largura para usar nas nossas iterações, ou um simples Map, onde cada elemento representaria uma linha do nosso mapa, com as suas respectivas colunas.

Dito isto, agora temos que esclarecer outra característica dos mapas isométricos, a profundidade. Como bem sabemos toda a idéia por trás da projeção isométrica é dar volume aos objetos simulando profundidade, e com isso além deste volume nós temos que nos preocupar com a ordem em que montamos o nosso mapa, afim de que os tiles se sobreponham, nos dando justamente essa sensação de profunidade. Para isso nós temos que desenhar o mapa seguindo a seguinte ordem abaixo (apontada pela seta verde):

Como dá para perceber na imagem acima, a primeira imagem que precisa ser desenhada se encontra no meio do retângulo, um local bem diferente do bom e velho canto superior esquerdo. O cálculo para descobrir esta posição precisa das dimensões do retângulo inteiro, e estas podem ser obtidas de maneiras diferentes, dependendo da proporção do mapa. No caso de um mapa quadrado (número de colunas = número de linhas) as fórmulas são, Largura = NumColunas * LarguraDoTile e Altura = NumLinhas * AlturaDoTile. Já se o número de colunas for diferente do número de linhas a fórumla da largura muda para: Largura = (NumLinhas * MetadeLarguraDoTile) + (NumColunas * MetadeLarguraDoTile).

Devemos lembrar que pode haver tiles mais altos e se desenharmos o limite superior do mapa colado no primeiro tile provavelmente vamos ter algum tipo de clipping, para que isso não ocorra é bom definirmos um offset vertical. Antes de começarmos a montar o nosso mapa precisamos ajustar mais um detalhe, o ponto-âncora de cada tile. Ao invés de usar o padrão top-left ou até mesmo um no centro, nós vamos deslocá-lo para bottom-center, deste modo nós poderemos fazer os cálculos de maneira um pouco mais simples (pelo menos para nós entendermos).

Agora vamos começar, calculamos o deslocamento horizontal inicial (metade do retângulo do mapa), juntamente com o offset vertical definido acima e posicionamos o nosso primeiro tile. O segundo será deslocado meia largura - do tile - à direita e meia altura - do tile - abaixo, e assim por diante, até acabar esta linha. Para a próxima linha os offsets verticais e horizontais iniciais deverão ser reduzidos na mesma medida de deslocamento (H = LargT/2 e V = AltT/2) e o algoritmo continuaria da mesma maneira para as linhas posteriores.

Pode parece meio complicado de início, mas se você parar um pouco para pensar e, principalmente, botar a mão na massa, vai ver que não tem nenhum mistério.

Como um cenário vazio não tem muita graça, é natural que nós queiramos colocar personagens e objetos por lá, mas como fazer para que eles obedeçam a ordem de sobreposição? Calma, é mais fácil do que parece, primeiro você precisará de um método que identifique em qual tile um certo pixel se encontra - e vice-versa - desta forma você poderá determinar a posição, no mapa, de um determinado sprite. De posse desta informação você pode optar por desenhar este último logo após desenhar o tile em que ele se encontra, assim se houver um objeto maior no próximo tile, ele será desenhado por cima do sprite, de modo que ele estará, assim, escondido.

Ainda existem outras técnicas, como a que desenha todos o mapa, depois o personagem, e depois redesenha os tiles que deveriam cobrí-lo. E outra técnica, na verdade um complemento, é dividir cada tile em quadrantes, e determinar a posição do personagem de acordo com estas áreas, assim você não terá personagens com pés cortados e coisas do tipo.