ピクセルアートのスケーリングが他の画像と異なるのはなぜですか?


12

最近、私はピクセルアートゲームを作るのが初めての開発者を指導していましたが、ピクセルアートのスケーリングに関する「従来の知恵」があることに気付きました。だから、ここでそれを修正する試みがあります....


  1. 私は、ピクセルアートを200%、300%などだけスケーリングする必要があると聞きました。120%などの中間サイズではありません。

    • 何故ですか?スケーリングは、他の画像と同じように「機能する」べきではありませんか?
    • 適切なゲームプレイや外観を得るためにキャラクターをほんの少しだけ大きくしたり小さくしたりする必要がある場合はどうすればよいですか?どうすれば修正できますか?
  2. 1つのゲームで異なるスケールでピクセルアートを使用するのは「悪い」と言われています-なぜですか?

    • たとえば、各スプライトテクセルが4x4スクリーンピクセルになるようにキャラクターを拡大すると、各スプライトテクセルが6x6スクリーンピクセルになるように背景アートが拡大されます。ピクセルは一日の終わりのピクセルではありませんか?

回答:


30

整数によるスケーリング

2x、3xによるスケーリング... n xは単純です-各ピクセルはn x nピクセルの正方形になり、元のスプライトの外観は完全に保持されます(すべての鋭い線、角、階段のジグザグを含む) 。

ただし、ピクセルは本質的に離散的であるため、ピクセルアートを小数(たとえば、1.5倍)でスケーリングすると問題が発生します。本当に「半分のピクセル」を持つことはできません。

他の種類のアートの場合、ピクセルが「半分の色」であるはずの隣接するソースピクセルをブレンドすることで多くの場合回避でき、高解像度では通常、アーティファクトは目立ちません。しかし、大きな分厚いピクセルアートでは、これにより、鮮明な外観がすぐに破壊されます。

そのため、通常は「最近傍」フィルタリング(ポイントフィルタリングとも呼ばれます)を使用して、スケーリング後の各ピクセルが元のスプライトの正確に1つのピクセルから色を取得するようにします。

これには別のしわがあります:スケーリング後のピクセル数はソースピクセル数の整数倍ではないため、一部のソースピクセルは他のソースピクセルよりも多く複製されるか(スケールアップする場合)、完全にスキップされます(スケールダウンする場合)。

残念ながら、画像編集ソフトウェアとGPUテクスチャフィルタリングは、ピクセルを複製またはスキップする場所についてあまり選択的ではありません-基本的な丸め規則に従うだけです-結果が歪んで不均一に見える可能性があります。

以下の例をご覧ください。中央では、最近傍フィルタリングを使用してマッシュルームスプライトを150%拡大しましたが、結果は不安定で無計画に見えます。一方の目はもう一方よりも大きく、一部の輪郭は太く、他の輪郭は細く、丸みを帯びたスポットはブロック状に見えます...ピクセルアーティストが意図的に描画するようなものではありません。

非整数スケールの使用によるアーティファクトの例

スプライトを150%大きくする必要がある場合(たとえば、ゲームプレイを適切に感じるため、または代替ディスプレイ解像度サポートするため)、右の例のように問題のある領域を塗り直すことができます。今では、アーティストが作成するもののように見え、ゲーム内の他のアートとスタイル的に一貫しています。(私は自分自身は素晴らしいピクセルアーティストではありませんが、それでもなお良いかもしれません😉)

残念ながら、このための優れたショートカットはあまりありません。整数スケールの場合、特別に設計されたピクセルアートのアップスケーリングアルゴリズム(ImageResizerなどのツールでさまざまなものが利用可能)を使用して、Nearest Neighbourよりもブロックの少ない開始点を取得できますが、それでもアーティストの目と肘のグリースが必要です高品質の結果を取得します。


脇: 小数スケールはまた、実行時に、最大切り抜くことができます

ゲームがNES解像度(256 x 240)であり、1080p画面に表示したいとします。

1080÷240 = 4.5であるため、シーン内のソースピクセルまたは「テクセル」の一部は最大5スクリーンピクセルまで吹き飛ばされますが、他のピクセルはわずか4であり、上記のような歪みが生じます。動きの中で、明らかな原因なしにスプライトが波打って気を散らす傾向があります:

波状のアーティファクトを示す、分数スケールのキノコの移動の例

多くの場合、カメラまたはオブジェクトの位置を整数ピクセル座標に丸めることを人々が提案しますが、実際には問題は解決しません。丸めは、最近傍フィルターの一部として既に行われています-問題は、一部の画面ピクセルが同じソーステクセルに丸められ(複製)、そうでない場合は結果が不均一になることです。

解決策は、パディング/クロップまたは代替アセットセットの組み合わせを使用して、サポートする各ディスプレイ解像度で一貫した整数の画面ピクセル数とテクセル数の比率に戻すことです。Unityの例を参照してください。これは簡単な普遍的な修正がない別のケースであり、ゲームをシャープに見せるために判断と芸術性を適用する必要があります。

ピクセルスケールの一貫性の維持

この「ルール」は、スタイルの一貫性に帰着します。

ピクセルアートをさまざまなスケールで使用すると、アセットがさまざまなゲームから一緒に丸まったように見え、代わりに統一された審美性を持ちます。

単一のゲームでアセットを異なる方法でスケーリングする例

左の例では、スーパーマリオワールドのスプライトをすべて同じスケールでまとめました。

中央では、マリオとレベルを背景の解像度の2倍に、モグラを解像度の3倍に拡大しました。私は整数のスケールを使用しているため、どこにも歪みや波紋はありませんが、それでも少しおかしく見えます。

たとえば、背景は前景よりもはるかに詳細です。滑らかな曲線とシャープなハイライトを表現できるため、前景が一貫したピクセルアートの感覚を持たずに、対照的に特に「ブロック状」に見えます。また、ほくろの輪郭は他の前景よりも著しく太く、ギザギザです。

右側では、アセットを共通のピクセルスケールで再描画することにより、新しいアセットサイズでより統一された意図的な雰囲気を取り戻すことができることを示しています。

しかし、私はする必要がありますか?

いいえ、そうでもありません。それはあなたのゲームであり、あなたはそれをあなたが望む方法にすることができます。

特に、プロトタイプを作成してゲーム内の楽しさを見つけるときは、完璧に見えるようにするよりも、高速試すことができることが重要です。あなたがあなたのゲームのために最善のものを見つける前に、あなたはおそらく、あなたの文字が間違っ何度ものような重要なものの大きさを得るでしょう、そして、それは考え吸うすべてのアニメーションフレームにあなたが別の何かをしようとするたびに再描画する必要があります。だから、早い段階で、汗をかかないでください。

リリースされたゲームの場合、それは判断の呼び出しです。ルールに従わない場合、ピクセルアートポリスがゲームの配布を禁止することはありません。また、多くのプレイヤーは違いを説明することができません。しかし、これらのピクセルの詳細に注意を払うことは、多くのプレーヤー(およびレビュアー)が品質の重要な兆候と見なすものです。

最後に考慮すべきことは、多くのピクセルアートゲームには非常に高精度のゲームプレイがあるということです。初期のメガマンゲームで1ブロックのプラットフォーム間をホッピングすることを考えてください。このような状況では、プレーヤーが自分の動きを判断して実行する際に、一貫したピクセルグリッド(およびタイルグリッド)が重要な手がかりになる可能性があります。芸術に不規則性を導入すると、実際にゲームを習得するのが難しくなり、イライラすることがあります。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.