O principal problema do seu código é que os seus laços (comandos for
) não estão processando todos os itens do mapa, uma vez que você os limitou em 2
. Além disso, o posicionamento em x
e y
não leva em consideração as dimensões de cada tijolo (tile).
Esses problemas corrigidos ficariam assim (note que eu removi a alteração do ponto de registro - propriedades regX
e regY
- pois elas também afetam esse posicionamento, como lhe foi informado em um comentário):
for (i = 0; i < data.length; i++) {
for (j = 0; j < data[i].length; j++) {
tileClone = bmp.clone();
tileClone.gotoAndStop(data[i][j]);
tileClone.x = j * tileClone.getBounds().width;
tileClone.y = i * tileClone.getBounds().height;
board.addChild(tileClone);
}
}
Você não forneceu a imagem com o seu mapa de tijolos (tilesheet), mas no título da sua pergunta você menciona que trata-se de um mapa em projeção isométrica, de forma que o seu mapa deve ser algo desse tipo (Grass and Water, de Clint Bellanger):
O código anterior simplesmente posiciona os tijolos no plano cartesiano, e por isso o resultado não vai ser isométrico:
Obs.: esse resultado é produzido com os dados a seguir (só pra ficar mais legal), criados com auxílio da ferramenta Tiled Map Editor.
data = [
[0, 0, 0, 0, 0, 0, 0, 0],
[0, 4, 12, 12, 5, 0, 0, 0],
[0, 15, 22, 22, 9, 0, 0, 0],
[0, 7, 11, 22, 22, 12, 5, 0],
[0, 0, 19, 14, 14, 14, 6, 0],
[0, 0, 0, 0, 0, 0, 0, 0]
];
Pra realmente posicionar os tijolos de modo a aproveitar o mapa isométrico, você precisa fazer uma conversão de coordenadas cartesianas para coordenadas isométricas. O princípio da simulação de isometria em um tijolo "normal" consiste basicamente em rotacioná-lo 45 graus e então achatá-lo na vertical de forma a diminuir pela metade a sua altura. A imagem a seguir, reproduzida desse ótimo tutorial sobre o assunto, ilustra como isso funciona (de fato, tendo as imagens dos tijolos bidimensionais normais é bastante fácil construir mapas isométricos no Photoshop ou no Gimp; aqui tem um tutorial fenomenal sobre como criar arte isométrica!)
Tendo o seu objeto tileClone
já devidamente posicionado nas coordenadas cartesianas, a conversão para coordenadas isométricas pode ser realizada por meio de uma função como a seguir (vide o tutorial que eu citei acima para detalhes):
function placeIsoTile(tileClone) {
var isoX = tileClone.x - tileClone.y;
var isoY = (tileClone.x + tileClone.y) / 2;
tileClone.x = isoX;
tileClone.y = isoY;
}
No caso do mapa que eu utilizei como exemplo, faz-se necessário também considerar os tijolos como tendo metade do tamanho original para eliminar os espaços entre eles. Por isso, o laço lá de cima foi alterado. O código final (também disponível no JSFiddle) fica assim (o tamanho dos tijolos foi alterado para 64 devido ao mapa que eu usei de exemplo):
window.onload = function() {
var stage = new createjs.Stage("canvas");
var bmp;
var board;
var img;
var data;
var tileClone;
var x,y;
var mapWidth;
var mapHeight;
img = new createjs.SpriteSheet({
"images": ["https://i.sstatic.net/ZlsL6.png"],
"frames": {
"height": 64,
"width": 64,
"regX": 0,
"regY": 0
}
});
data = [
[0, 0, 0, 0, 0, 0, 0, 0],
[0, 4, 12, 12, 5, 0, 0, 0],
[0, 15, 22, 22, 9, 0, 0, 0],
[0, 7, 11, 22, 22, 12, 5, 0],
[0, 0, 19, 14, 14, 14, 6, 0],
[0, 0, 0, 0, 0, 0, 0, 0]
];
board = new createjs.Container();
board.x = 0;
board.y = 0;
stage.addChild(board);
bmp = new createjs.Sprite(img);
for (i = 0; i < data.length; i++) {
for (j = 0; j < data[i].length; j++) {
tileClone = bmp.clone();
tileClone.gotoAndStop(data[i][j]);
// Abaixo, em x, note a adição da margem de 350 pixels à esquerda
// Note também o posicionamento cartesiano considerando a metade das
// dimensões originais dos tijolos
tileClone.x = 350 + j * tileClone.getBounds().width / 2;
tileClone.y = i * tileClone.getBounds().height / 2;
board.addChild(tileClone);
// Essa é a função que reposiciona o tijolo considerando a projeção isométrica
placeIsoTile(tileClone);
}
}
stage.update();
};
function placeIsoTile(tileClone) {
var isoX = tileClone.x - tileClone.y;
var isoY = (tileClone.x + tileClone.y) / 2;
tileClone.x = isoX;
tileClone.y = isoY;
}
Como na projeção isométrica o eixo X é desenhado da posição inicial em diagonal para a a esquerda de quem vê, eu inclui uma margem de 350 pixels no código só pra facilitar a visualização. Você vai ter que prever algo do tipo no seu código (isto é, garantir que o primeiro tijolo da última linha esteja visível na esquerda do canvas).
No tutorial que eu referenciei acima há outras dicas importantes, especialmente sobre ordem de desenho e movimentação de objetos nessa projeção.
Eis o resultado final abaixo. :)
regX
é maior que seu tile, por isso não aparece nada.