Desenhando um mapa isom�trico em HTML

Veja neste artigo como desenhar um mapa isom�trico utilizando a nova tag

Apesar de utilizarmos uma das grandes novidades do HTML, o objetivo aqui n�o � enfatizar o canvas, mas sim explicar como posicionar cada parte do mapa de forma a se obter a configuraç�o desejada no final. Bem, vamos ao que interessa.

Antes de partirmos para o c�digo que realmente desenha o mapa, vamos definir nosso html, o qual ter� uma estrutura bastante simples.

Listagem 1: estrutura do arquivo HTML.

Reparem que nosso c�digo efetivo ficar� entre as tags do html acima.

Ao final deste artigo, nosso mapa dever� estar semelhante a este:

Figura 1: Esquema do mapa

Notem que cada tile (parte que comp�e o mapa) est� numerado com coordenadas X e Y. Utilizaremos essas coordenadas em nossos loops para posicionar cada tile.

Se traçarmos linhas verticais e horizontais passando pelo centro dos tiles, encontraremos relaç�es entre as coordenadas daqueles cujo centro est� sobre a mesma reta, por exemplo: os tiles (0,0) e (1,1) est�o sobre a mesma reta vertical (mesmo Left ou coordenada X), enquanto os tiles (0,1) e (1,0) est�o sobre a mesma reta horizontal (mesmo Top ou coordenada Y). Perceber esse que parece ser apenas um pequeno detalhe � fundamental para a compreens�o do c�lculo que faremos para posicionar cada tile vertical e horizontalmente.

Com base nisso, posicionaremos os tiles com base no seu centro e n�o pela sua lateral esquerda como � costume. Assim, perceberemos mais uma relaç�o interessante: nos tiles que est�o sobre a mesma reta vertical, a relaç�o Y-X � constante (no exemplo, 0-0=0 e 1-1=1) e para os tiles cujo centro est� sobre a mesma reta horizontal, a relaç�o constante � X+Y (no exemplo, 0+1=1 e 1+0=1). Assim, para cada tile de �ndices I e J (X e Y), a posiç�o � dada por:

VERTICAL = (I-J)*ALTURA/2;
HORIZONTAL = (I+J)*LARGURA/2;

Dividimos por 2, pois como j� foi dito, a posiç�o � dada pelo centro.

Passemos ent�o para o script:

Listagem 2: script para desenhar o mapa


window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");				
var tile1 = new Image();
tile1.onload = function(){
var i, j;						
for(i=3; i>= 0; i--){
for(j = 0; j =< 3; j++){		
context.drawImage(tile1, (i+j)*tile1.width/2, (j-i)*tile1.height/2);
}
			}					
};
		tile1.src = "tile001.png";
};

Entendendo o c�digo:

Nas tr�s primeiras linhas o que fazemos � criar o canvas, um contexto 2d (parte do canvas onde ser� feito o desenho) e uma imagem que ser� usada para desenhar os tiles, respectivamente.

Definimos, ent�o, o evento onload da imagem, para que quando ela for carregada, possamos executar nosso c�digo.

O primeiro passo, dentro do onload � declarar as vari�veis de loop i e j. Feito isso, fazemos o primeiro loop com i decrescendo de 3 at� zero e um loop interno com j variando de 0 a 3. Mas por que i decresce? Se us�ssemos tiles com altura diferente (mais altos), e us�ssemos i variando de forma crescente, observar�amos que os tiles de cima iriam se sobrepor aos de baixo, literalmente bagunçando nosso mapa. No caso, usamos apenas um tile, mas j� evitaremos esse problema.

Dentro do segundo loop est� a linha mais importante do nosso c�digo, nela usamos o m�todo DrawImage do objeto Context. Esse m�todo recebe como par�metros a imagem que ser� desenhada, a posiç�o horizontal e a vertical, nessa ordem. A imagem que passamos como par�metro � o tile1 e a posiç�o horizontal e vertical s�o, respectivamente, (i+j)*tile1.width/2 e (j-i)*tile1.height/2), como j� vimos anteriormente.

Por fim, ap�s o evento onload, carregamos a imagem (do arquivo tile001.png no mesmo diret�rio que o .html).

Salvando nosso arquivo e abrindo em um browser com suporte a html5, por�m, veremos que o mapa n�o est� bem localizado na tela, isso ocorre por que em alguns dos c�lculos das posiç�es, obtemos valores negativos, assim, parte do mapa fica com uma posiç�o vertical negativa, aparecendo acima do limite superior do browser. Para resolver essa quest�o, precisamos somar um valor ao terceiro par�metro do m�todo DrawImage. Esse valor pode ser fixo, 300 ou 500, por exemplo, mas eu optarei por utilizar a express�o (5*tile1.height/2) para que esse fator esteja sempre adequado � altura da imagem que utilizarmos.

Atualizando o browser onde abrimos nosso .html, veremos o novo resultado.

Voc� pode baixar a imagem no link "c�digo-fonte" que fica no topo de p�gina.

Bem, isso � tudo por enquanto.

Um abraço a todos e at� o pr�ximo artigo.

Desenhando um mapa isom�trico em HTML

Veja neste artigo como desenhar um mapa isométrico utilizando a nova tag &ltcanvas&gt do HTML 5 e Javascript.

Artigos relacionados