高解像度ドット絵をぼやけさせずに小型ディスプレイへ適応させる方法
小型ディスプレイ向けには、高解像度のドット絵をスムージングフィルターで縮小して、すべてのピクセルの詳細が維持されることを期待するのは避けましょう。まずはターゲットサイズで何を判読可能にしておくべきかを決め、その上で小型ディスプレイ専用のバージョンを作成します。詳細を簡略化し、適切なフィルターでリサイズし、実際の表示サイズで確認してください。整数比率は均一なピクセル形状を保つのに役立ちますが、より小さな画像には収まりきらない細部を復元してくれるわけではありません。
ドット絵の縮小がぼやけて見える理由
高解像度の元画像には、出力先が表示できる以上のピクセルが含まれています。そのためリサイズ処理では、元画像の情報同士を合成するか破棄する必要があります。バイリニア補間などのスムージングフィルターは、周囲のピクセルから出力色を計算するため、くっきりした色の境界がぼやけてしまうことがあります。ニアレストネイバー法は元画像の特定ピクセルを選択して他を無視するため、混色は避けられますが、細かな特徴が抜け落ちたり線が不均一になったりする可能性があります。GodotのImageクラスのリファレンスではこの両方の影響について説明されており、MDNでもブラウザの拡大縮小の挙動は選択されたレンダリングモードに依存することが言及されています。Godot: Image MDN: image-rendering
したがって、くっきりとした表示を得ることは、単に「ぼかしなし」を選択すれば済む問題ではありません。出力先の寸法、アート内のピクセルの形状や間隔、そして最終画像がどのように表示されるかに左右されます。小さなバージョンは、マスター画像を機械的に縮小したものとしてではなく、デザイン的な適応として捉えましょう。
リサイズ前にターゲットサイズを決める
アートが表示される表示領域をピクセル単位で測定し、元画像のアスペクト比を維持します。元画像が1200×800ピクセルで、ターゲットが300×200の場合、各方向の縮尺は1:4になります。元画像の幅4ピクセルの領域が出力先の1ピクセルに綺麗に対応するため、この比率は扱いやすいですが、このサイズではやはり微細なディテールが潰れてしまいます。
320×180などのターゲットの場合は、まず画像を歪ませずにその枠内に収めます。アスペクト比が異なる場合は、切り抜き（クロップ）、レターボックス（帯の追加）、またはレイアウトの再構成のいずれを行うかを選択してください。枠いっぱいに収めようと画像を無理に押し潰してはいけません。ピクセルの形状が変わり、顔、シルエット、パターンが歪んでしまう恐れがあります。アスペクト比の違いには明確な構図の選択が必要です。GodotとUnityはどちらも、ディスプレイの不一致に対処する方法として切り抜きや帯の追加をドキュメントで説明しています。Godot: Multiple resolutions Unity: Pixel Perfect Camera reference
収まりきらない細部を簡略化する
元画像のコピーを作成し、リサイズ前に詳細を減らします。孤立した1ピクセルのハイライト、細い輪郭線、ごく小さなテキスト、ターゲットサイズでノイズに化けてしまうテクスチャの塊などを取り除きます。シルエットを強調し、重要な色領域の境界を明確に保ちましょう。目、記号、オブジェクトの境界など、意味を持つ特徴がある場合は、縮小処理による維持に頼るのではなく、ターゲットサイズで描き直してください。
有効な確認方法は、ターゲットサイズのプレビューを100%で表示し、各重要な特徴が明確に識別できるかどうかを自問することです。拡大表示はピクセルのエッジを確認するのには役立ちますが、意図した物理サイズで視認できるかどうかまではわかりません。1つの小型ディスプレイ向けの簡略化によって他の用途のものが上書きされないよう、フル解像度のマスター画像は手元に残しておきましょう。
希望する結果に合わせたリサイズ方法の選択
厳密なカラーパレットと輪郭のはっきりしたピクセルブロックを維持する必要がある場合は、ニアレストネイバーを使用し、失われた特徴や不均一な線の太さがないか注意深く確認してください。周囲の色をブレンドするのではなく近くの元画像ピクセルを選択するため、バイリニア補間に伴う柔らかいグラデーションを回避できます。その代償として、元画像のディテールの多くが破棄される可能性があります。Pillow: Filters
元画像全体の印象をより滑らかに表現したい小さな画像の場合は、Lanczosなどの高品質なダウンサンプリングフィルターと、より単純なエリアまたはボックス形式の縮小を比較検討してください。これらの手法は元画像の複数のピクセルからの情報を合成するため、全体的な形状は維持できますが、鮮明なエッジの周りに中間色が生じる場合があります。Godotでは特に縮小向けの高品質な選択肢としてLanczosを説明しており、Pillowのドキュメントには各フィルターのサンプリングアプローチが記載されています。斜め線、細い線、コントラストの高いエッジを含む切り抜き部分で各候補をテストし、原寸大の結果を見て選択してください。Godot: Image Pillow: Filters
ディスプレイが対応している場合は整数スケーリングを使用する
整数比率は、完成した小さな画像を表示用に拡大する際や、元画像の寸法がターゲットの寸法で割り切れる場合に最も効果を発揮します。これにより、元画像の各ピクセルが出力ピクセルの同じ整数分を占めるようになります。小数のスケーリングはピクセルの配置を不均一にする可能性があります。Godotの例では、640×360のベース画像を2倍に拡大して1280×720にした場合と、ピクセルサイズが不均一になる小数倍スケーリングの場合とが対比されています。Godot: Multiple resolutions
きれいな整数比率に合わない小型ディスプレイの場合は、アスペクト比を維持しつつ、余白を残す、少し切り抜く、あるいはそのレイアウト専用のバージョンを作るなど、意図的に妥協案を選択してください。整数スケーリングでは帯状の余白が生じたり、表示領域の利用が少なくなったりすることがあります。これは、特に元画像と出力先の寸法が均等に割り切れない場合、大きなマスター画像を縮小するための万能な解決策にはなりません。
実際の表示環境（パス）で最終画像を確認する
ターゲットのピクセル寸法で書き出し、実際のアプリ、ブラウザ、またはデバイス上の意図したサイズで書き出しファイルを表示します。鮮明に書き出された画像でも、2段階目の処理でスムージングをかけて拡大縮小されるとぼやけてしまうことがあります。ブラウザのcanvas描画では、スムージングがデフォルトで有効になっています。MDNでは、拡大縮小された画像のエッジをくっきり保つ必要がある場合にimageSmoothingEnabledをオフにする方法が記載されています。CSSのimage-rendering: pixelatedも表示画像に影響を与えますが、MDNは小数のデバイスピクセル比（devicePixelRatio）によってピクセルが不揃いに見える可能性があると注意を促しています。MDN: imageSmoothingEnabled MDN: Crisp pixel art look
実際の表示サイズで次の3点を確認してください。重要な詳細が判別できるか、斜め線や輪郭線が一貫して見えるか、書き出し後に画像が引き伸ばされたり再サンプリングされたりしていないかです。ターゲットディスプレイのズームやスケーリングの設定も確認してください。ブラウザのズームや非整数のデバイススケーリングはピクセルの均一性に影響を与える可能性があります。エッジがぼやけて見える場合は、アートワークを再度変更する前に、元画像から表示までのすべての経路をたどり、どこでスムージングが発生しているかを特定してください。
実践的な決定の手順
- ターゲットの幅と高さを設定し、アスペクト比の違いをどう処理するか決定します。
- 作業用コピーを作成し、そのサイズに収まらない詳細を簡略化します。
- 比較用にニアレストネイバー版とスムージングフィルター版を書き出します。細部や斜め線を含む切り抜きも含めてください。
- 両方を実際の表示サイズで確認し、消えてしまったり不鮮明になったりした重要な特徴を描き直します。
- アプリケーションやブラウザで意図しない2回目のリサイズが適用されていないことを確認し、意図した寸法で最終版を保存します。
厳密にくっきりとしたエッジが必要で、比率が適切に揃っている場合はニアレストネイバーを選択します。元のパレットカラーのみを維持することよりも全体的な形状の維持が重要な場合は、スムーズなダウンサンプリングフィルターを選択してください。どちらのバージョンでもきれいに視認できない場合は、ターゲットサイズに合わせてアートや構図を変更します。再サンプリングは詳細を再配置することはできますが、大きな画像のすべての特徴をより少ないピクセル内に保持することはできません。