3

私たちは、2Dボード座標に基づいて開発および定義されたJavascriptゲームに取り組んでいます。

現在使用しているX、Y座標（つまり、0,0）を、crafty.jsで使用するための対応するISO座標に変換しようとしています。

これを行う理由は、サーバーが従来の15x15グリッドのスペースであるゲームボードをランダムに生成し、それをアイソメトリック3Dでレンダリングしたいのですが、巧妙なJSは、左上から始まる奇妙な座標系を使用しているためです。スクリーン。

左上のボードスペースを（0,6）またはいずれかにマッピングして、2Dグリッドを次の画像にどのようにマッピングしますか？注釈？

ここに画像の説明を入力してください

4

4 に答える 4

1

私も狡猾に取り組んでいて、17x17 のボードを作ろうとしています。現在、マップを使用して、すべての場所を対応する Crafty の場所に変換しています。信じられないほどハックで、おそらく遅いことはわかっていますが、正直なところ時間がありません。

上の画像では数字が少しずれていることに気付きました。この状況で Crafty がどのように機能するかを少しわかりやすく視覚化したものを次に示します。白い数字はサーバーから取得した生データで、黒い数字は Crafty がこのボードをレンダリングするために必要なものです。 狡猾なレイアウト

私は基本的にそれをやや有用な方程式にまとめました（ただし、マップを作成する場合にのみ役立ちます）：

Even rows (starting at 0)
- y (row) = starting at row number (base 0) then increment by 1 for each x (column)
- x (col) = previous odds's first x, then follow pattern: +0, +0, +1, +1, +2, +2...
Odd rows (starting at 0)
- y (row) = starting at row number (base 0) then increment by 1 for each x (column)
- x (col) = +1 to previous even's first x, then follow pattern: +0, +1, +1, +2, +2, +3...

だから私はうまくいくように見える以下のマップを持っています（これは rawToCrafty マップです）：

//Row 0
"00.00": { "y": 0, "x": 8 }
"01.00": { "y": 1, "x": 8 }
"02.00": { "y": 2, "x": 9 }
"03.00": { "y": 3, "x": 9 }
"04.00": { "y": 4, "x": 10 }
"05.00": { "y": 5, "x": 10 }
"06.00": { "y": 6, "x": 11 }
"07.00": { "y": 7, "x": 11 }
"08.00": { "y": 8, "x": 12 }
...

はい、もっと良い方法がありますが、これは力ずくの方法です。幸運を！

于 2012-11-03T01:59:36.927 に答える
0

この一般的な概念の名前はProjectionです。

ゲーム ボードを画面に描画するには、ゲーム ボード座標からスクリーン座標に投影します。

マウス クリックの位置を取得し、クリックされたボード上の位置を特定するには、画面座標からゲーム ボード座標に投影します。

これらの 2 つの射影は互いに逆です。

ゲーム プログラミングでこれらの射影を実行する一般的な方法は、行列を使用することです。

于 2012-10-26T18:38:43.707 に答える
0

//直交座標から等角座標へ:

isoX = カートX - カートY

isoY = (カートX + カートY) / 2

//デカルトに等角:

カート X = (2 * isoY + isoX) / 2

カート Y = (2 * isoY - isoX) / 2

于 2014-07-02T18:55:16.313 に答える
0

私が正しく理解していれば、次の入力を次の出力にマップする必要があります。

入力：

0,0   0,1   0,2   0,3   0,4   0,5
1,0   1,1   1,2   1,3   1,4   1,5
2,0   2,1   2,2   2,3   2,4   2,5
3,0   3,1   3,2   3,3   3,4   3,5
4,0   4,1   4,2   4,3   4,4   4,5
5,0   5,1   5,2   5,3   5,4   5,5

出力：

0,6   0,5   1,4   1,3   2,2   2,1
0,7   1,6   1,5   2,4   2,3   3,2
1,8   1,7   2,6   2,5   3,4   3,3
1,9   2,8   2,7   3,6   3,5   4,4
2,10  2,9   3,8   3,7   4,6   4,5
2,10  3,10  3,9   4,8   4,7   5,6

私のマトリックスはかなりさびています。それらを使用してこれを行うためのきちんとした方法があると確信していますが、ハッキーな答えを提供します。

これがより一般的な問題のインスタンスではないと仮定すると、次のようなことができます。

function mapCoords(xIn,yIn){
    return {
        x:Math.floor((xIn+yIn)/2),
        y:6+xIn-yIn
    }
}

作成する一般化と、よりエレガントな方法がありますが、私の理解では、これであなたの例は解決します。

于 2012-11-02T15:44:54.263 に答える