14

私はキャンバス ベースのゲーム エンジンを作成していますが、俯瞰視点を実現する方法について誰かが良い情報を持っているかどうか疑問に思っています。私が探しているのは、従来の鳥瞰図と古い SNES モード 7 ビューの中間のどこかです。わずかな角度で 3D の錯覚を与えます。

遠近法の歪みに対処するための最良の方法は何かを理解しようとしています。私は回転を行っていないので、3D マトリックスの処理は行き過ぎてしまいますが、マップ レイヤーを一貫した角度で​​レンダリングできるようにする必要があり、角度を調整できると便利です。深度ワープにも対処する必要があります。基本的に、ピクセルの一番下の行は 1:1 ピクセルの幅と高さである必要があり、その場合、行ごとに、たとえば 5% 小さくなります。私が望むのは、大きなキャンバスをテクスチャとして提供し、0 から 90 までのカメラ角度を提供できるようにすることです。ここで、0 は完全に水平で、90 は鳥瞰図です。

関連するチュートリアルやサンプル コードはありますか? 私はオンラインで少し検索しましたが、私が見つけたものはすべて、この特定のアプリケーションでの使用に適していないか、過度に複雑で、あらゆる種類のクレイジーな 3D のゆがみや回転を行っているようです. 私が望むのは、通常のタイル張りのグリッドを少し後ろに傾けることだけです。回転やそのような複雑なものはありません。

これが私が欲しいものの例です。 これが例です。http://img801.imageshack.us/img801/2176/perspectivesample.jpg

一番下のピクセル行は 1:1 のピクセル比で、それより上の各行は水平方向と垂直方向に徐々に短くなります。上部中央領域のソース テクスチャは通常、下部中央領域の高さの約半分ですが、遠近感に合わせて縦横に縮小されています。

私が考えている最善の方法は、現在のビューポートの状態を平面の鳥瞰図で別のキャンバスにレンダリングし、上部と側面に約 50% の余分なスペースを確保し、そこから上向きの三角形の領域をスライスして、それを実際に見えるキャンバス。

唯一の問題は、角度などの計算に関しては数学が苦手なことです。

4

2 に答える 2

7

私があなたを正しく理解しているなら、あなたは単純な空中ブランコの変形が欲しいだけです。もしそうなら、多分これまたはこのリンクはあなたを助けるでしょう。中央に配置されていない画像の場合は、追加の菱形の変形になります。これは、私が知る限り、キャンバスで簡単に実行できます。

于 2010-10-08T14:19:41.600 に答える
4

あなたが話していることは、任意の 3D API で簡単に実行できることです。ただし、2D キャンバスに固執することにしたので、2D の世界ですべてを行う必要があります。つまり、長方形、回転、スケーリング、傾斜などを操作する必要があります。他の回答で述べたように、アフィン変換としても知られています。

やりたいことは可能ですが、2D を使いたいので、2D 関数の観点から考える必要があります。

  1. 初期イメージを生成します。
  2. 元の画像の下部からキャンバスの下部にスライスを追加します。画像の中心が現在のキャンバスの中心と一致するように、わずかに左に配置します。
  3. 画像全体のスケールをわずかに大きくします
  4. 画像の上部に到達するまで繰り返します。

擬似コードは次のようになります...

imgA = document.getElementById('source');

// grab image slices from bottom to top of image
for (var ix=height-slice_height;ix>=0;ix-=slice_height)
{

    // move a section of the source image to the target canvas
    ctx.drawImage(imgA, 0,ix,width,slice_height, 
         0-half_slice_width_increase,width,slice_height);
    // stretch the whole canvas
    ctx.scale(scale_ratio, 1);
}

これには多くの微調整が必​​要ですが、それが一般的な解決策です。

  • scale_ratioは少し大きい数値になりますが、1 に非常に近くなります。
  • ctxは標準のキャンバス 2D コンテキストです
  • half_slice_width_increaseは、倍率で拡大縮小したときにキャンバスが拡大する量の 1/2 です。これにより、スケーリングされた画像が中央に保持されます。

正しく表示するには、アイコン オーバーレイを追加する前に、まず背景タイルを変換する必要があります。

于 2010-10-04T20:57:57.317 に答える