解像度に依存しないシステムにする方法を教えてください。


10

私はこれを消している。もちろん、端にものを固定することができます。これにより、UIの解像度が独立します。グラフィックが小さすぎるほど変化するまで。必要なときに適切にスケーリングするにはどうすればよいですか?スケーリング中にグラフィックスを正しい比率に保つにはどうすればよいですか?他の解像度とは対照的に解像度が16:10のように異なる場合、それらを引き伸ばしたくありません。

これに対する真のテスト済みのアプローチはありますか?この問題のため、ビデオプレーヤーに黒い境界線が表示されますが、これは適切に解決できませんか?


1
[this] [1]の質問を参照してください。私の答えはいくつかの悲惨な詳細を説明しています。[1]:gamedev.stackexchange.com/questions/34/…–
エンジニア、

回答:


5

最初に、ラスタライズでは技術的には真の解像度の独立性などは存在しないことに注意してください。十分に高い倍率では、個々のテクセルが見え始めます。これに対する唯一の解決策は、ベクターグラフィックスシステムを作成することです。

そうは言っても、堅牢なラスターベースの解像度に依存しないシステムを作成するには、サイズ変更、座標系、およびレイアウトのいくつかの手順があります。

サイジングと配置のために、実際のアプリケーション解像度との比率を維持するユニットのセットを使用する必要があります。この場合、私はアメリカ人であり、DPI(インチあたりのドット数)で要素をスケーリングできるため、インチを使用できます。たとえば、アプリケーションが800x600で実行されているとします。デフォルトのWindows DPIは96であるため、アプリケーションの解像度は(800/96)x(600/96)インチまたは8.33x6.25インチです。

少なくとも、4:3と16:9の両方のアスペクト比で作業できるようにする必要があるため、画面座標系の処理方法は少しトリッキーになります。私が行うことをお勧めするのは、表示領域(およびウィンドウとコントロール)の中央に(0,0)を置くことです。コーナーに(0,0)を置くと、そのコーナーが解像度とアスペクト比に基づいて動き回るので、すべてのスプライトが移動しますが、画面の中心は常に画面の中心になるため、これはうまくいきます。デバイスの問題。800x600の例を続けると、座標系は(左から右に)-4.165inから4.165inに、(上から下に)3.125inから-3.125inになります。

したがって、現時点では、画面の中心に対して常に同じ場所にある項目を持つDPIに依存しないUIシステムがあり、解像度に完全に依存しているわけではありません。さいわい、DPIの独立性によって実現できることは、何らかのヒューリスティックに基づいてDPIをスケーリングすることでUIをスケーリングすることです。たとえば、ヒューリスティックとして垂直解像度を使用してDPIをスケーリングできます。800x600が96 DPIの場合、1024x768には123 DPI、1280x720には115 DPIを使用します。

最後に、絶対配置と相対配置の両方を処理するレイアウトシステムを構築する必要があります。この優れた例は、WPFとWebです。他の多くの便利な自動レイアウトオプションとともに、コントロール/ボックスが親要素の一部を塗りつぶすように指定することができます。これらすべてを組み合わせると、多くの異なる解像度とアスペクト比でほぼ同じに見えるUIシステムが得られます。

要約すると、WPFは、左上隅の座標系で原点を維持し、垂直解像度に基づいてDPIを自動的にスケーリングしないことを除いて、これのほとんどすべてを行うため、WPFを検討することを強くお勧めします。


-1

一般的に何をしたいかはゲームによって異なります。

1つのオプションは、アスペクト比(比率)が異なる場合に黒い境界線を表示することです(おそらく最も簡単です。テクスチャにレンダリングしてから画面にレンダリングし、必要に応じてサイズ変更します)。

別のオプションは、異なるアスペクト比に対して異なるレンダーパスを持つことです。ワイドスクリーン用、「通常」用のいずれかを使用できます。

さらに別のオプションは、物事を個別にスケーリングすることです。たとえば、UIメッセージボックスを解像度に応じて大きくまたは小さくします。正確なピクセルを使用する代わりに、どこに描画するかを検討する必要があるときはいつでも、下に0.2、横に0.8、幅0.1、高さ0.3のようなことを行います。この場合、きちんと伸ばすことができますが、細かい描き方にもよります(つまり、UIの背景は伸ばしますが、テキストは伸ばしません)。

3Dに関しては、ビューポートを正しく設定する限り、ワイドスクリーンプレーヤーはワイドスクリーン以外の設定よりもわずかに多く見えるようになるはずです。(または、黒い境界線を描画するか、ビューを拡大します)。


「テクスチャにレンダリングし、それを画面にレンダリングし、必要に応じてサイズを変更する」いいえ。これは、本当にぼやけた奇妙な画像を作成します。そして、解像度が低すぎる場合はどうなりますか?すべてが読めなくなります。
Tara

読み続けてください。これはいくつかのオプションの1つです。あなたはあなたが説明した問題を確実に得られないでしょう(単純に/誤って行われた場合、そうであればそれはぼやけて引き伸ばされるでしょうなど)
George Duckett

私は読み続けました。しかし、あなたの答えは非常に具体的ではありません。また、すべてを低解像度でレンダリングし、テキストが完全に読みやすくなることを期待できないため、私が説明した問題が確実に発生します。
Tara

ターゲットよりも低い解像度でレンダリングすると言っているわけではありませんが、明らかに高い解像度でレンダリングするだけでもアーティファクトが発生します。私の答えも具体化できたかもしれませんが、良い受け入れられた答えがあるので、私はこれに戻りません。テキストレンダリングについては、描画する場所(および大きさ)を選択するのとは少し異なるため、具体的には触れましたが、非常に簡潔で、詳しく説明することはできました。
George Duckett 2015

ターゲットよりも低い解像度でレンダリングすることもしませんでした。UIを1対1にして、設計された解像度よりも低い解像度でレンダリングすることはできません(これは、私が低解像度で意図したことです)。
Tara
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.