js(canvas)でゲームエンジンを書こうとしています。ここまでは順調ですね。しかし、私の世界はひし形で、タイルを上から下にレンダリングするという問題が 1 つあります。
問題は、1 タイルより大きいタイルがある場合 (例として 2x2)、次のようになります。

家はタイル (2,1) で定義されます。左の岩は (1,0) に置かれます
タイル (1,0) が最初にレンダリングされ、次のタイルは (2,1) になります。これは、同じ行の右側にあるためです。
どうすればこれを解決できますか?
js(canvas)でゲームエンジンを書こうとしています。ここまでは順調ですね。しかし、私の世界はひし形で、タイルを上から下にレンダリングするという問題が 1 つあります。
問題は、1 タイルより大きいタイルがある場合 (例として 2x2)、次のようになります。

家はタイル (2,1) で定義されます。左の岩は (1,0) に置かれます
タイル (1,0) が最初にレンダリングされ、次のタイルは (2,1) になります。これは、同じ行の右側にあるためです。
どうすればこれを解決できますか?
グラフィックスを小さなピース (グリッド上のタイルごとに 1 つのピース) に分割することで、この問題を回避できるはずです。これを考える良い方法は次のとおりです。グリッドを真上から見ることができれば、各スプライトは、割り当てられているセルの端からはみ出してはいけません。
たとえば、以下のセルには、小さな立方体で示されている家の正面部分のみが含まれているはずです。

ある時点で、同じセル内の複数のスプライトも細かく管理する必要があるかもしれませんが、それは小さなスペースでは同じ概念です。
ここでの最善の解決策は、事前に定義されたメトリック (たとえば、タイルの幅) を使用してグラフィックを分割することです。タイルベースのシステムは、アイソメトリック ゲームを含む 2D ゲームに広く使用されています。
例: http://www.spriters-resource.com/pc_computer/fallouttactics/
私の解決策 (Marty Wallace にも感謝します!)
下の画像に示すように、スプライトを3つにカットできます
最初の部分は座標 (2, 0) に描画されます
2 番目の部分は座標 (2, 1) に描画されます
3 番目の部分は座標 (3, 1) に描画されます
したがって、下のタイルで垂直にスライスします (描画されたタイルは V 字型のようなものです)。これは、4x4 のようなすべてのタイル サイズで機能するはずです。
タイル (3, 0) を忘れることができます
青: 実際の png 赤: カットライン
セリフは少しずれていますが、それはアイデアについてですそして、私は少し眠る必要があります(最後の2つはもちろん3です)

これにより、簡単な計算も得られます。
sizeX - 1 = The number of sides on the right of the middle section (the big one)
sizeY - 1 = The number of sides on the left side of the middle section
また、すべてのスライスはタイル幅の半分で、中央のスライスはタイル幅全体です。右側のスライスにはタイルの最も右側の部分のみが含まれ、左側には最も左側の部分が含まれます。
3x1や1x4などのタイルを簡単に使用できます