ピクセルを設定する前に CSS ボックスを測定します
表示されたキャンバスの寸法を読み取り、選択したデバイス スケールを掛け、バッキングの幅と高さを設定し、ゲーム ロジックが CSS 空間単位を使用し続けることができるように描画座標を変換します。これらのキャンバス属性を割り当てると描画状態がリセットされるため、幅または高さを変更した後は変換を再適用してください。
1、1.5、2 などの倍率で 1 ピクセルのグリッド、斜めのエッジ、小さな UI テキストを比較します。鮮明さと応答性の両方を確認します。完全な devicePixelRatio 乗数は出発点であり、すべてのゲームが従うべきルールではありません。レンダリング スケールを下げると、CSS レイアウトを変更せずに、密集したディスプレイのコストを削減できます。
サイズ変更とメモリを選択の一部として扱う
バッキング ストアのピクセル数は両方の次元で増加するため、各方向にスケールを 2 倍にすると 4 倍のピクセルが作成されます。高密度設定を出荷する前に、サポートされている最大のディスプレイ サイズでビジー シーンをテストし、メモリ不足や再描画の速度の低下を確認します。
MDN のキャンバス ガイダンスには、devicePixelRatio ベースのセットアップが示されています。 WebGL のベスト プラクティス ページでは、非整数の比率とズームに関する微妙な点が指摘されています。ブラウザーのズームまたはディスプレイ間でウィンドウを移動した後は再確認し、有効なサイズが変わっていない場合はバッキング ストアを繰り返しリセットしないようにしてください。
ゲームのCanvasとdevicePixelRatioについての質問
キャンバスの幅は常に CSS 幅と devicePixelRatio の積に等しい必要がありますか?
いいえ。コンテンツは鮮明になりますが、処理負荷とメモリ使用量が増えます。同じシーンと見た目のチェックを使い、フル解像度版と上限を設けた解像度版を比較してください。
サイズを変更すると描画がぼやけてしまうのはなぜですか?
キャンバスの幅または高さを変更すると、そのビットマップがクリアされ、コンテキストの状態がリセットされます。バッキングの寸法を再計算し、コンテキストを再度スケールし、シーンを再描画します。
関連情報
古い情報を見つけましたか？ 訂正を連絡