コントロールの解像度を選ぶ

この記事では、Win2D の XAML コントロールで使用される解像度を構成する方法について説明します。 次の方法について説明します。

  • Win2D コントロールを固定解像度で実行します。
  • レンダリングするピクセル数を減らしてパフォーマンスを向上させるために、コントロール DPI を調整します。

解像度とコントロールのサイズ設定

このドキュメントで使用されている "Resolution" は、ビットマップのサイズに関するもう 1 つの単語です。 幅と高さで構成されます。

Win2D の XAML コントロールが描画対象とするオブジェクトには解像度があります。 また、DPI もあります。 オブジェクトの DPI は、描画時にそのオブジェクトのピクセルの密度を測定したものです。 DPI はスケール ファクターと同様に動作します。DPI が高い場合は、描画されたオブジェクトを構成するピクセルの数が増えます。 一方、オブジェクトの DPI を下げると、ピクセルのスパンが少なくなります。 Win2D の DPI の一般的な処理の詳細については、 このページを参照してください。

DPI に依存しないサイズは、"論理サイズ" と呼ばれることもあります。 DPI に依存するサイズ (ピクセル単位) は、"物理サイズ" と呼ばれます。

解像度とサイズ設定の観点から、コントロールが読み込まれるときのコントロールの既定の動作は次のとおりです。

  • コントロールの論理サイズは、XAML ツリー内のどこに配置されるかによって決まるレイアウトによって決まります。
  • DPI は環境から取得されます。 コントロールの DPI がその値に設定されています。
  • コントロールの描画可能領域を構成する物理ピクセルの量は、コントロールのサイズによって決まります。DPI によってスケーリングされます。
    • DPI が高い場合、物理サイズは論理サイズと比較して大きくなります (ピクセル数が多くなります)。
    • DPI が低い場合、物理サイズは論理サイズと比較して小さくなります (ピクセル数が少なくなります)。
    • 既定の DPI では、描画可能領域の物理サイズと論理サイズは同じです。
  • コントロールの描画リソース (CanvasImageSourceのCanvasControl、CanvasVirtualImageSourceのCanvasVirtualControl、CanvasSwapChainのCanvasAnimatedControl) は、コントロールのサイズと DPI に合わせて設定されます。

ほとんどの Win2D 操作は dip (DPI に依存しない単位) であり、Win2D の XAML コントロールの描画リソースは DPI を考慮するように自動的にサイズ設定されます。 つまり、多くの場合、アプリケーションは DPI を無視できます。 サイズと座標は、特に指定しない限り、常に DPI に依存しません。 アプリケーションでは、さまざまなサイズや座標をハードコーディングしてコントロールに描画し、異なる DPI を持つ環境でアプリを実行するとコンテンツがスケーリングされます。

ただし、一部のアプリケーションでは、既定の動作では不十分です。 この記事では、既定値では不十分なシナリオと、それを修正するためにアプリが実行できるいくつかのシナリオについて説明します。

シナリオ: コントロールの内容は固定で、通常より低い解像度である必要があります

このシナリオは、たとえば、実行されている実際のディスプレイ ハードウェアに関係なく、常に固定の 640 x 480 解像度でレンダリングする必要がある 2D スプライト ゲームで発生する可能性があります。

これを解決するには、新しい Win2D コードをまったく記述する必要はありません。

Viewbox XAML オブジェクトを使用すると、必要に応じて縦横比を維持するために、文字ボックス化または柱ボックス化を使用して、子ビジュアル要素のサイズを制限し、自動的にスケーリングを追加できます。

CanvasControl、CanvasVirtualControl、またはCanvasAnimatedControlがViewBoxの子要素であることを確認し、そのコントロールのサイズを制限するだけです。

たとえば、DPI に関係なく、コントロールのサイズを幅 320 ピクセル、高さ 224 ピクセルに制限するには、次の操作を行います。

<canvas:CanvasAnimatedControl/>

使用：

<Viewbox>
    <canvas:CanvasAnimatedControl  Width="320" Height="224"/>
</Viewbox>

レターボックス化/柱箱化を追加して縦横比を維持しない場合は、 Stretch 属性を追加します。

<Viewbox Stretch="Fill">
    <canvas:CanvasAnimatedControl Width="320" Height="224"/>
</Viewbox>

Viewbox要素によって実行されるスケーリングでは、補間モードの制御は保証されないことに注意してください。 フィルター処理方法は、 CanvasInterpolationMode.Linearなどのようになります。 アプリで特定の補間モードが必要な場合は、固定サイズのコントロールで ViewBox を使用しないでください。 まず、中間の固定サイズである CanvasRenderTargetに描画し、その後、目的の補間モードを使用してスケールされた中間をターゲットに描画します。

シナリオ: アプリが高解像度で適切に動作できない

一部のデバイスには非常に高解像度のディスプレイがありますが、そのグラフィックス処理装置は、その多くのピクセルをスムーズにアニメーション化するのに十分な強力ではありません。 開発者は、アプリをテストしないと、これらのデバイスでアプリがどのように動作するかをすぐに認識できない場合があります。

1 つのオプションは、コントロールの DpiScale プロパティを使用してコントロールの DPI を減らすことです。

たとえば、半分の解像度でコントロールを修正するには、次のコマンドを使用します。

<canvas:CanvasAnimatedControl DpiScale="0.5" />

実際の DPI スケール ファクターは、アプリのニーズによって異なります。 オプションの 1 つは、アプリの DPI を 96 で固定し、それ以上にしないようにするスケールファクターを計算することです。

例えば次が挙げられます。

float dpiLimit = 96.0f;

if(control.Dpi > dpiLimit)
{
    control.DpiScale = dpiLimit / control.Dpi;
}

この設定が DPI の変更間で確実に機能するように、アプリケーションは DisplayInformation.DpiChanged をサブスクライブし、ハンドラーでこのロジックを使用して、新しい DPI に対して DPI スケールを設定する必要があります。

これにより、アプリのオーバーヘッドが少し節約され、ユーザーは高 DPI ディスプレイで解像度の低下を簡単に認識できない可能性があります。

ネイティブより低い解像度の制御リソースを持つ場合に実行されるスケーリングでは、前述の ViewBox と同様に、補間モードの制御を保証することはできません。 アプリで特定の補間モードが必要な場合は、代わりに中間を使用します。

  • Last updated on