2D UIの処理に使用する座標系は何ですか?


20

アスペクト比の質問に続いて、2D UIシステムで作業しているときに他の人が使用しているものを聞くことに興味があります(ほとんどの場合、独自のソリューションです)。具体的には、座標系をどのように処理しますか。私の考えでは、3つのオプションがあります。

  1. ハードコードされた座標(例:0-> 720、0-> 576)
  2. 正規化された座標(0.0-> 1.0、0.0-> 1.0)、レンダリング前に実際の座標にマッピング
  3. 仮想座標(例:0-> 1600、0-> 1000)、レンダリング前に実際の座標にマッピング

ハードコードは、固定プラットフォームを使用していて、画面スペースの座標が事前にわかっている場合、またはすべての可能な画面サイズのセットの画面レイアウトを作成する準備ができている場合にのみ有用です。

正規化された座標はいいですが、画面の縦横比が固定されていない場合はあいまいになります(たとえば、ワイドスクリーンで実行した場合、4:3よりも異なる物理座標に0.75がマップされます)。また、作成者にとって、UI要素を(0.2 x 0.2)として宣言するのは本当に直観に反し、レンダリング時に実際に正方形ではないことがわかります。

仮想座標は曖昧ではありませんが、再マッピング段階での正規化座標と同じ問題に悩まされます:小さな10進数の不一致により、1つずれたエラーが発生する可能性があります。

同様に、固定解像度の画面がある場合、正規化された座標と仮想座標の両方は、UIイメージ内のアーティストの細かく作成されたピクセルと画面上のピクセル間の1:1マッピングを保証するのが非常に難しいことを意味します。厄介なスケーリングアーティファクト(画面上のテクスチャ付きクワッドとしてレンダリングしていると仮定)。

特に縦横比の曖昧さを避けるために、仮想座標アプローチを採用しました。16:10画面にレンダリングする場合、UIスペースは(0,0)->(1600,1000)ですが、4:3にレンダリングする場合、使用可能なUIスペースは実際には(133,0)->(1467 、0)。

私が気づいていないより良い解決策はありますか?これら3つのアプローチが抱える問題を最小限に抑えるための良い戦略はありますか?

回答:


5

正規化された座標は実際にはUIにうまくマッピングされないことに同意すると思います。

私が2Dレイアウトで通常行うことは、基本的には「仮想」座標空間ですが、好みのターゲット解像度(1280x720など)で1:1に対応する空間を選びます。修正されていませんが、直感的に対処でき、90%のケースで適切に表示されることを知っています。明らかに、満足しないで、実際にさまざまな解像度を頻繁にチェックすることが重要です。

解像度を再マップするときの鮮明さのために、フォントレンダリングからいくつかのヒントを借りて、ヒント情報を提供します。そのため、連続する必要のあるものには何らかの方法でタグを付け、鮮明な配置が必要な正確なピクセルへの丸めも実行してください。

おそらく、物事をより相対的にすることも検討してください。したがって、すべてを「絶対X、Yにオブジェクト1を配置」するのではなく、「オブジェクト1の右下からオフセットしてオブジェクト2の左下に配置」を指定できます。その場合、重要な関係を失うことなく、物事を再スケールしたり移動したりするのが簡単です。


5

CEGUIの座標系は本当によく考えられているようです。だシステムの座標統一相対位置とのブレンド絶対位置を。次のような場所を指定できます。

  • 画面の真ん中に
    UDim(0.5,0)
  • 右端の左に5ピクセル
    UDim(1.0,-5)
  • 中央にあるが10ピクセル離れた2つのウィジェット
    HA_RIGHT,UDim(0.5,-5) HA_LEFT,UDim(0.5,5)

2

疑わしい場合は、CSSボックスモデルを使用するか、それを単純化してください。

パーセンテージまたはピクセルで位置を指定できます。コンテナをパーセントで配置しますが、たとえば、ピクセル単位でコンテナ内にアイテムを配置します。


1

私は仮想座標を使用するのが好きですが、共通のターゲット解像度(できればゲームが実行されると予想される最高の解像度の1つ)に基づいています。

最近では、適切な選択肢は1920x1080です。

すべてのアートワークと画面のモックアップはその解像度で作成でき、ピクセル単位で位置/距離を簡単に測定できます。

仮想座標と異なるアスペクト比で実行する場合、画面に合わせる方法を選択できます(レターボックス化、側面のトリミング、またはその両方)

コーディングするとき、正規化された座標で考えるよりも「ピクセルで考える」方がはるかに簡単だと思います!-テキストの高さを「0.0463単位」ではなく「50(仮想)ピクセル」にしたい


0

使用するGUIのタイプに完全に依存しますが、多くの場合、ゲームには画面の端に沿ってコーナーに固定されたものがあり、画面の中央にモーダルダイアログまたは何かのためのボックスがある場合があります。

その場合は、アンカーとオフセット(x、y)を指定するスキームを使用することをお勧めしますか?これは、JavaのBorderLayoutに似ています(ただし、4つのコーナー、4つのエッジの中央、1つの画面の中央がある場合があります)。したがって、たとえば、左上隅からのオフセット(0,0)を指定できます。その場合、要素は画面の隅に正確に固定されます。そして、解像度、アスペクト比などに関係なく、画面の隅にヘルスインジケータが表示されます。ただし、要素を右上隅に固定すると、要素は自然に(左上ではなく)右上点に対して固定されるため、解像度に関係なく自動的に画面の隅に固定されます。

正規化された0.0-1.0座標に対しては絶対にお勧めします。これらは、浮動小数点の精度に基づいて異なる場合があります。3D GUIがない場合、GUIはピクセルにマップする必要があります。


さて、相対配置とアンカーを使用することは、あらゆる種類のUIシステムにほぼ与えられます。異なるコンポーネント間の測定に特に興味があります。そして、この種のことに関して、3D / 2D GUIの区別はやや曖昧です:特にテクスチャ化された画面スペースクワッドを使用して任意のサイズの画像を取得し、UIスペースでそれらを拡大縮小/配置する場合。
-MrCranky

0

多くは、ゲームの種類と状況に依存します。迅速で汚いプロトタイプの場合、グラフ用紙でUIを計画し、固定ウィンドウサイズの数値座標のリストを書き留め、すべてをハードコーディングすることを好みます-私にとっては簡単で高速です。ただし、サイズ変更可能なウィンドウや代替画面解像度が必要な「実際の」プロジェクトの場合、これは明らかに理想的ではなく、両方向にスケーリングできる何らかのソリューションが優れているでしょう。

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