3

私は等尺性環境をすべて Javascript と HTML5 (2D Canvas) で作成しましたが、これはほとんど問題なく動作します。私が直面している問題は、異なる高さのタイルを持ち、タイル上のオブジェクトのインデックスをソートすることです (この場合、2 つのタイル間を横に移動しながら)。

たとえば、オブジェクトがあるタイルの高さが -1 であるため、1 つのオブジェクトが前のタイルの後ろにある場合があります。私が思いついた解決策は、タイルを描画した直後に、タイルの各オブジェクトを 0,0 から始めて、そこから各行と列を描画することでした。

これは、2 つのタイル間でオブジェクトを移行する必要があるまではうまく機能します。この時点で、オブジェクトは中間タイルを使用する必要があります (これは下の画像で実装されているものです)、またはオブジェクトの後にタイルが描画されるため、タイルがオブジェクトに重なってしまいます。中間のタイルを使用すると、キューブが 1,3 のタイルからはるかに高い z-index を使用するため、同じ「行」のフェンス オブジェクトが描画されるという問題も発生します (これは画像 1 でわずかに確認できます)。

http://i.stack.imgur.com/PQJ0H.png

http://i.stack.imgur.com/DupM7.png

等尺性環境を描画するための試行錯誤された方法は、タイル用に 1 つのレイヤーとオブジェクト用に 1 つのレイヤーを持つだけで、オブジェクトがタイルの背後にあることは決してないと思いますが、これは私が固執したくない制限です。

だから私の質問は、環境全体を上から下に（または可能であれば他の方法で）描画するときに、各タイルとそのオブジェクトを順番に描画するときに、オブジェクトの描画を延期したり、配列を作成したりする賢い方法はありますか正しい順序で描画されるオブジェクトの数? 他の誰かが同様の問題に遭遇し、他の誰かがこれに対する解決策を見つけましたか?

すべての助けに感謝します。

私のタイリングコードの例:

// each column
for(y=0; y<totalColumns; y++){
    // each row
    for(x=0; x<totalRows; x++){
        tile = tiles[y][x];
        // draw tile
        drawTile(tile);
        objects = objects[y][x];
        // draw objects for that tile
        drawObjects(objects);
    }
}

編集：

私が考えた 1 つの解決策 (質問を自分自身に読み返した後) は、すべてのタイルをループし、タイルの高さの配列を取得し、それを並べ替えてから、従来の描画を行うことです。そのようです：

var layers = [];

for(var y=0; y<cols; y++){
    for(var x=0; x<rows; x++){
        tile = tiles[y][x];
        if(!layers.indexOf(tile.height)) layers.push(tile.height);
    }
}

// sort layers
layers.sort(/*function here to sort layers*/);

for(l=0; l<layers.length; l++){
    // draw tiles for this layer

    // draw objects for this layer

}

他の解決策はありますか？

4

1 に答える 1