2.5d視差効果を作成するにはどうすればよいですか?


8

私は3Dグラフィックスとプログラミングにある程度のバックグラウンドがありますが、ゲーム開発は初めてです。現在、さまざまな可能性を模索しており、RPGゲームを作りたいと思っています。私は古典的な2Dアイソメビューについて考えていましたが、Diablo 2の外観と遊び方が本当に好きです。

私の質問は、-Diablo 2の視差効果をどのようにして実現できるのですか?すべてがベイクされたライトとシャドウで手描きされたように見え、見栄えも素晴らしく見えますが、移動すると遠近感に気づきます

たとえば、Photoshopで正射投影法(古典的なピクセルアートスタイル、平行線のみ)で列を含む大きなホールを描いたとします。キャラクターが動き回るときに、このシーンに視差効果をどのように与えますか?すべてにカメラに面したスプライトを使用すると、遠くで問題なく見えるかもしれませんが、たとえば、文字が列(円柱)に近づくと、それは本当に偽物になります。

助言がありますか?ブリザードはディアブロ2でどのように視差効果を作りましたか?

このスクリーンショットを参照してくださいhttp : //guidesmedia.ign.com/guides/10629/images/act2tombs.jpg


RTSスタイルのカメラです。google.com/#q=rts+game+camera
2013年

1
私はカメラについて尋ねていませんでした、それは地面から特定の角度での遠近法カメラです、それは明白です。私の質問は、環境と視点がどのように機能するかについてでした。
Nikolay Dyankov 2013年

1
重複ではなく、AoEには視差効果はありません。私の質問全体をもう一度読んでください。
Nikolay Dyankov 2013年

1
答えがわからない場合は、この質問に鼻を向けないでください。あなたは明らかに質問を理解していないので、編集をやめてください!
Nikolay Dyankov 2013年

2
これに反対票を投じた馬鹿は誰ですか?このサイトの一部の人々は本当に手がかりを持っていません!ディアブロIIをプレイしたことがない人だけが反対票を投じることができたと思います!
エンジニア

回答:


5

これは長い答えですが、実際にはdivide-by-camera-zの基本的な前提は非常に単純です。何かが離れているほど、小さく見えます。また、2つの物の間のより短い距離が表示されます。

ポジション(Unityを使用している場合は読む必要はありません!)

まず、正しい視点を使用して位置/ポイントをレンダリングする必要があります。

位置は平面上にあります。右の画像のようなものが必要です...タイルの角をサンプルポイント/位置と見なしてください。ここに画像の説明を入力してください

ポイントの変換方法は次のとおりです。

  • 座標系は次のとおりです。ポジティブzは画面に出て、x左から右にy走って下に走ります。カメラz ワールドzです。これは、完全な3Dエンジンを作成するよりもはるかに簡単なショートカットです。欠点?カメラは向きを変更できません(ただし、位置は変更できます)。
  • カメラの初期3D位置を保存します。それをz世界の起源から少し(マイナス)戻します。
  • 3Dポイントのコレクションをxz平面に格納します(それらを指定しますy=0)。世界の起源を越え、それらを中心に試してみてくださいx(0,0,0)すなわち、負からn正へn。これは、レンダリングの開始時にビューポートの中央に配置するためです。
  • 減少点/ピクセルプロットの原点を画面の中心と見なします。
  • 1ワールドスペースユニット= 1ピクセルとなるカメラからの距離を決定します。つまり、カメラを1ワールドスペースユニットだけ移動すると、10ユニット離れたオブジェクトは1ピクセルだけシフトします-かなり遠くにあります!この距離を定数として保存しKます。
  • ここで、すべてのポイントについて、次の式を使用して位置でレンダリングしscreenPosition(x,y) = screenOrigin + (worldPosition(x,y) - cameraPosition(x,y)) / ((worldPosition(z) - cameraPosition(z)) * K)ます。...ご覧のzとおり、現在のポイントとカメラ間の距離に基づいてレンダリング位置を決定しています。

  • ポイントのレンダリングが表示されるまで、カメラのz位置を試してください。しかし、表示されるのは、すべてのポイントが画面の中心線を横切って表示されることです。したがって、それを改善する必要があります。試しK=1対をK=10差異を見るために。

  • これで、カメラを移動して、カメラyがポイントの平面の上と下にどのように移動するかを確認できます(つまり、カメラを上下に移動すると、ポイントはそれぞれ画面の正中線の下または上にレンダリングされ、遠近法で正しく表示されます) )。

これらは非常に大まかなガイドラインです。実装の詳細はいくつかあります。最初のステップは、何かを表示させ、そこから修正することです。頭に浮かぶのは、カメラが地面を見下ろしているように見えるようにしたい場合は、レンダリングの原点をビューポートの上部に近づける必要があるということです。別の詳細としては、カメラとポイントの間の距離にトリガー比率を含める必要があるかもしれません...を使用するとtan、より現実的な視点が得られると思います。これについてははっきりと覚えていませんが、パースペクティブが奇妙に見え、それに応じて適応できるかどうかがすぐにわかります。サンプルを書き直さなければ、もっと具体的にすることはできません。

ビルボードごとのワーピングとスケーリング(必須)

ポイントの位置のセットの中で遠近法を見ることができ、自由に位置を追加、削除、または移動できる(キャラクターと同様に)ことができるようになったので、それらの位置をルートとする個々のスプライトにも遠近法を適用する必要があります。

D2では常に、単純な横方向のワープ関数であるように見えました。これは、画面上部のビルボードよりも画面下部のビルボードに多く適用され、正中線から遠ざかるほど多く適用されます。スクリーン。

看板にも垂直方向のスケーリングが適用されている場合があります。木が期待される縮尺に比べて短くなり、画面の下部に近づきます(カメラが木を見下ろしているように見えるようにするために-これを安全に探索するには、トリストラムの木が最善の方法であることがわかりました。日 ;) )。

私がすることは:

  1. さまざまなポイントでのカメラから地面までの距離に基づいて、基本的なスケーリング関数に取り組みます。したがって、すべてのスキャンラインに同様のスケーリングが適用されます。
  2. それを行った後で初めて、横方向のワープを確認します。最初に画面を走る正中線からの距離に基づいています。
  3. 最後に、横方向のワープが画面の距離によってどのように影響を受けるかを調査します(そして、単純なトリガー比率がこの中心にあると感じます)。

遠近法正しいタイリング(Unityを使用している場合は読む必要はありません!)

上記は、正しく配置され、歪んだ「立ち上がる」スプライト(つまり、地面に垂直に座っているキャラクター、木、家などのオブジェクト)を提供することを期待しています。

ただし、地面のタイルを正しくシームレスに変形させる方法も考慮する必要があります。そして、それが特にD2でGPUを必要とする部分であることがわかると思います。GPUが搭載されていないシステムでは、パースペクティブオプションが無効になっていたことを覚えています。これは、GPUがテクスチャサーフェスを取得し、それにパースペクティブ補正を非常に迅速に適用できるためであり、タイル間のグリッチがなく、アプリケーションコードで非アフィン変換を実行することに関する懸念もありません。そして少し高価になる可能性があります:

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

これに対処するためのいくつかの提案があります。

  • (Unity)Unityカメラを使用して、テクスチャのある平らな地面のレンダリングを提供し、画面スペースの位置に基づいて看板の歪みを個別に処理します。
  • このロジック(またはすべてのレンダリングロジック)をGPUシェーダーで実行します。
  • 地面のタイルはまったく使用しないでください。代わりに、ポイントスプライトを使用して-キャラクター自体と同じように-均一に色付けされた平面(たとえば、緑の芝生)でその平面の詳細を提供して、鈍く見えないようにします。これによりレンダリングのコストが増加しますが、この問題に取り組む最も確実な方法は確かです。

悲しいことに、私が理解した唯一のことは「垂直スケーリング」でした。多分私は今のところアイソメトリック2Dに固執する必要があります。
Nikolay Dyankov 2013年

では、質問を簡単にしてみましょう。2Dで描かれた円柱を3Dにどのように見せますか?このように描かれたもの-media.web.britannica.com/eb-media/49/63049-004-C560D293.gif
Nikolay Dyankov

それらに視点はありません。チャットで話し合いたいですか?
エンジニア

確かに、チャットを開始してください。方法はわかりません:)
Nikolay Dyankov 2013年

^ページの上部には、^
エンジニア
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.