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.
