2

HTML5、canvas、WinJSを使用してWindows8用のゲームを作成しています。ゲームはほぼ完了し、すべてが機能しています。しかし、私はグラフィックスに進み、さまざまな解像度のサポートを実装する方法について心配し始めました。このプロジェクトを始めたとき、私は解像度を処理する方法について多くの情報を読んでいましたが、キャンバスとはほとんど関係がありませんでした。私は次のようなものを実装することになりました：

if (window.innerWidth >= 2560 && window.innerHeight >= 1440) {           //Full 2560x1440(16:9) / Letterbox 2560x1600(16:10)
    canvas.width = 2560;
    canvas.height = 1440;
} else if (window.innerWidth >= 1920 && window.innerHeight >= 1080) {    //Full 1920x1080(16:9) / Letterbox 1920x1200(16:10)
    canvas.width = 1920;
    canvas.height = 1080;
} else if (window.innerWidth >= 1600 && window.innerHeight >= 900) {     //Full 1600x900(16:9) / Border 1680x1050(16:10)
    canvas.width = 1600;
    canvas.height = 900;
} else if (window.innerWidth >= 1360 && window.innerHeight >= 768) {     //Full 1366x768(16:9) / Border 1440x900 (16:10) / Cut 1360x768(<16:9)
    canvas.width = 1366;
    canvas.height = 768;
} else if (window.innerWidth >= 1280 && window.innerHeight >= 720) {     //Full 1280x720(16:9) / Letterbox 1280x768(<16:9) / Letterbox 1280x800(16:10) / Letterbox 1280x1024(5:4)
    canvas.width = 1280;
    canvas.height = 720;
} else {                                                                 //Letterbox 1024x768(4:3)
    canvas.width = 1024;
    canvas.height = 575;
}

pixelScale = canvas.height / 768;
assetScale = canvas.height;

その背後にある基本的な考え方は、特定の解像度でキャンバスに最適なサイズを見つけることです（画面の比率が異なるレターボックスを使用）。次に、assetScaleがPreloadJSのマニフェスト内のすべての画像に適用され、正しいサイズのビットマップ（たとえば、images / 1080 / myimage.png）が読み込まれます。また、pixelScaleは、1366x768の作業解像度から操作解像度に座標をスケーリングするために使用されます（他の解像度で正しく配置されます）。

しかし、これが本当にそれを処理するための最良の/正しい方法であるかどうか、そして私がそれを過度に複雑にしている可能性があるかどうかは、もはやわかりません。メニュー要素のスケーリングを支援するためにbody要素にクラスを追加した後、Blend for VS2012で、高DPIデバイス（つまり1920x1080 @ 140％）が解像度を1080ではなく768として選択することに突然気づきました。高DPIデバイスの劣化したビジュアルに？これを個別に考慮する必要がありますか？もしそうなら、どのようにですか？それとも私が無視しているものですか？

私が遭遇した他の方法は、キャンバス要素全体を高解像度でレンダリングし、次にキャンバス要素全体を縮小し（ビジュアルが再び低下しましたか？）、ファイルに「-100」、「-140」、および「-180」（これは、canvas/PreloadJSではなくinline/css画像でのみ機能するようです）。

誰かがこれを処理する方法の正しい方向に私を向けることができますか？について多くの誤った情報があるようです。最終的には、すべてのユーザーが自分のコンピューター/デバイスの解像度で最高品質の画像を提供できるようにしたいだけです。どうもありがとう

4

2 に答える 2

1

ここで多くのことを支援するコントロールは、WinJS.UI名前空間にあるViewBoxコントロールです。

ViewBoxコントロールは、その中に含まれるUI要素を自動的にスケーリングするため、UIを現在の解像度に合わせる方法を手動で理解する必要はありません。

ViewBoxコントロールの使用を開始する簡単な方法については、VisualStudioのFixedLayoutAppテンプレートを確認してください。固定レイアウトアプリテンプレートを含むアプリテンプレートの詳細については、WindowsDevCenterをご覧ください。

また、画面に合わせてスケーリングするためのガイドラインも確認してください。

Windows Storeアプリ開発の詳細については、GenerationAppに登録してください。

于 2013-03-04T14:35:14.153 に答える
0

ViewBoxコントロールは、キャンバスをデバイスの解像度にスケールアップします。これは、希望するものである場合とそうでない場合があります。ピクセルでいっぱいのキャンバスをスケーリングすると、ピクセルが大きくなります。それはあなたが求めているような高品質の画像にはなりません。

真に適応性がありパフォーマンスの高いゲームが必要な場合は、解像度に応じてキャンバスオブジェクトを動的にレンダリングする必要があります。デバイスが1366x768の場合、キャンバスは1366x768であり、一部のスプライトはたとえば100x100ピクセルである必要があります。デバイスが1600x900の場合、キャンバスは1600x900であり、同じスプライトは140x140である必要があります。コードにはいくつかのロジックが必要です。

まず、元の投稿と同じようにキャンバスのサイズを設定します。次に、すべてのビジュアルアセットで、そのキャンバスサイズを基準にしてサイズを定義する必要があります。タスクを抽象化するためのコードを書くのが最善でしょう。

于 2013-03-04T19:32:37.307 に答える