jquery - キャンバス深度オブジェクトの描画

Question

さまざまな深さのオブジェクトの配列を持ち、キャンバス/jqueryを使用してiso投影で描画するにはどうすればよいですか?

Answer 1

HTML5 キャンバスは z バッファリングをサポートしていないため、ビューアーから最も離れたオブジェクトから始まり、ビューアーに最も近いオブジェクトで終わるように、正しい順序でオブジェクトを描画する必要があります。

これを行うには、2 つのオブジェクトのどちらが「より深い」かを示すコンパレータ関数を使用して配列を並べ替えるだけです。これは、単純にフィールドを比較してオブジェクトをソートする例zです。正確なユースケースによっては、どちらが別のものよりも深いかを判断するのが簡単ではない場合があります。

function object_compare(obj1, obj2) {
     if (obj1.z == obj2.z) return 0;
     if (obj1.z > obj2.z) {
         return 1;
     } else {
         return -1;
     }
}
array.sort(compare_function);

gamedev.stackexchange.com に関するいくつかの質問は、あなたにとっても興味深いものです。

• https://gamedev.stackexchange.com/questions/48710/is-it-good-to-sort-objects-list-before-every-rendering
• https://gamedev.stackexchange.com/questions/47388/best-technique-for-drawing-isometric-tiles
• https://gamedev.stackexchange.com/questions/48423/basic-isometric-projection-in-javascript