2

JavaScript と HTML5 Canvas で Isometric Tile Map を試しています。タイル マップ データを JavaScript 2D 配列に格納しています。

// 0 - Grass
// 1 - Dirt
// ...
var mapData = [
    [0, 0, 0, 0, 0],
    [0, 0, 1, 0, 0,
    ...
]

そして描く

for(var i = 0; i < mapData.length; i++) {
    for(var j = 0; j < mapData[i].length; j++) {
        var p = iso2screen(i, j, 0); // X, Y, Z
        context.drawImage(tileArray[mapData[i][j]], p.x, p.y);
    }
}

ただし、この関数は、すべてのタイルの Z 軸がゼロに等しいことを意味します。

var p = iso2screen(i, j, 0);

mapData[0][0]おそらく、 Z 軸が 3 に等しいなどのアイデアと方法を知っている人がいるかもしれません。mapData[5][5]Z 軸は 5 に等しい。?

私には考えがあります:Grass、Dirtの関数を書き、この関数を2D Arrayに保存して、後で描画しmapData[0][0].setZ(3);ます。しかし、タイルごとに関数を書くのは良い考えですか?

4

1 に答える 1

1

Z がタイルの位置にどのように影響するかを知らずに答えるのは難しいです。Z が単に描画順序を意味する場合 (そして HTML5 Canvas は Z インデックスをサポートしていないため)、タイル データを並べ替えられた配列に格納して、単一のタイルを描画しながら反復できるようにする必要があります。

アイソメ タイルの場合、一番上のタイル ( に配置され(0,0)ている) の Z オーダーは であり、 に配置されている(- mapWidth - mapHeight)タイルはです。(x,y)( (-mapWidth + x) + (-mapHeight + y))

また、アイソメ タイル マップのもう 1 つの概念はレイヤーです。レイヤーには、別のレイヤーの上に移動する高さプロパティを割り当てることができます。

于 2012-09-24T07:36:08.083 に答える