10
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": ["images/tiles.png"],
    "frames": {
        "height": 48,
        "width": 48,
        "regX": 0,
        "regY": 0
    }
});

/*data = [
    [1,5,5,2],
    [8,0,0,6],
    [8,0,9,6],
    [4,7,7,3]
];*/

data = [
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 1, 1, 1, 1, 1, 0],
    [0, 1, 0, 1, 1, 1, 1, 0],
    [0, 1, 1, 1, 1, 0, 1, 0],
    [0, 1, 1, 1, 1, 1, 1, 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 < 2; i++) {
    for (j = 0; j < 2; j++) {
        tileClone = bmp.clone();
        tileClone.gotoAndStop(data[i][j]);
        tileClone.x  = (j-i);
        tileClone.y = (i+j); 
        tileClone.regX=65; 
        tileClone.regY = 32.5;
        board.addChild(tileClone);
    }
}
alert("sadas");  
stage.update();
};

conseguem identificar? não é desenhado nada na web

4
  • 1
    Poderia explicar melhor o que você precisa e o que está acontecendo? Está retornando algum erro? Dê uma lida na Central de Ajuda para entender como perguntar. Commented 1/05/2014 às 20:35
  • Abra o console do seu browser e veja se está dando algum erro.
    – bfavaretto
    Commented 1/05/2014 às 21:38
  • 1
    Sua posição em regX é maior que seu tile, por isso não aparece nada.
    – bfavaretto
    Commented 1/05/2014 às 22:14
  • @bfavaretto Está correto! Agora funcionou, valeu!!
    – Lucas Mota
    Commented 2/05/2014 às 14:01

1 Resposta 1

20
+50

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):

Mapa Grass and Water

O código anterior simplesmente posiciona os tijolos no plano cartesiano, e por isso o resultado não vai ser isométrico:

inserir a descrição da imagem aqui

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!)

inserir a descrição da imagem aqui

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. :)

inserir a descrição da imagem aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .