6

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

問題は、1 タイルより大きいタイルがある場合 (例として 2x2)、次のようになります。

レンダリング例

家はタイル (2,1) で定義されます。左の岩は (1,0) に置かれます

タイル (1,0) が最初にレンダリングされ、次のタイルは (2,1) になります。これは、同じ行の右側にあるためです。

どうすればこれを解決できますか?

4

4 に答える 4

4

グラフィックスを小さなピース (グリッド上のタイルごとに 1 つのピース) に分割することで、この問題を回避できるはずです。これを考える良い方法は次のとおりです。グリッドを真上から見ることができれば、各スプライトは、割り当てられているセルの端からはみ出してはいけません。

たとえば、以下のセルには、小さな立方体で示されている家の正面部分のみが含まれているはずです。

ここに画像の説明を入力

ある時点で、同じセル内の複数のスプライトも細かく管理する必要があるかもしれませんが、それは小さなスペースでは同じ概念です。

于 2013-10-09T23:25:40.230 に答える
0

ここでの最善の解決策は、事前に定義されたメトリック (たとえば、タイルの幅) を使用してグラフィックを分割することです。タイルベースのシステムは、アイソメトリック ゲームを含む 2D ゲームに広く使用されています。

例: http://www.spriters-resource.com/pc_computer/fallouttactics/

于 2013-10-09T22:59:49.630 に答える
0

私の解決策 (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などのタイルを簡単に使用できます

于 2013-10-10T00:10:11.443 に答える