ピクセルアートコース6

これは、出版物「 Les Forges Pixel Art Course」の翻訳です。



パート1:適切なツール

パート2:直線と曲線

パート3:展望

パート4:影と光

パート5:カラーピッカー

パート6:スムージング

パート7:テクスチャとぼかし

パート8:タイルの世界



パート6:アンチエイリアス



すべてのピクセルアートが美しくなる場所。 かどうか。 実際、それは彼が以前どれほどひどかったかにかかっています。

画像



1.攻撃の計画


現在のビデオゲームニュースの専門家を読む勇気があれば、ジャーナリストが一部のゲームでエイリアシングについて不平を言っているのを見たことがあるかもしれません。 エイリアシングは、前景のオブジェクトが背景色の前にあり、これらのオブジェクトと背景の間の境界がひどく鋭いエッジとして表示されるときに発生する現象です。 自動スムージングアルゴリズムは計算コストが高いため、3Dゲームはこの現象の主な犠牲者です。 以下の例は、ニンテンドーDSのファイナルファンタジーIIIバージョンのものです。 スペクトルの重ね合わせは、衣服の黒の端で特に顕著です。

画像

これらの恐ろしい輪郭をすべて滑らかにし、オブジェクトと背景の間の移行を滑らかにするための古き良きピクセルアートアンチエイリアス(スムージング)が常に存在するため、2Dゲームはそれほど影響を受けません。 実際、ここではアルゴリズムは必要ありません。 事前に考えてください。 ご希望の場合は少し考えてください。 エイリアシング現象が発生する可能性のある3つの状況を区別できます。それに応じて対処します。 最初のケース:スプライトに2つの異なる色があり、これら2つの色の間の移行が印象的です。 この場合、スムージングを適用して遷移を柔らかくすることができます。 2番目のケース:私のキャラクターの1つと彼の後ろの風景の間の移行、すべての手順(ヘルプ!)。 難しい場合があるため、次の2つのケースに分けます。

-運がよければ:実際には、「スプライトに表示される背景色がわかっている」という意味です。 この場合、スプライトのエッジを滑らかにして、スプライトとランドスケープ間の移行があまりシャープにならないようにすることができます。

-幸運でない場合:スプライトが表示される背景色を予測できない場合があります(たとえば、ゲームのヒーローが多くの背景を通過する場合)。 この場合、何もしません。 以上です。 トランジションの色がわからないため、スプライトのエッジを滑らかなトランジションに変更するのは愚かなことです。 さて、アンチエイリアスを使用する理由とタイミングを知ったので、使用方法を理解する必要があります。



2.攻撃!


いいね これらの2つの色の間の素晴らしい滑らかな移行をどのように行いますか? 答えは非常に明白です。バッファーシェードと呼ばれる1つ以上の中間色(たとえば、グレーが白と黒の間を行き来する)を使用するだけです。 あなたがそれらを使用する方法のすべての微妙。 実際、芸術的な才能がなければ、おそらく次のようなことをしたいと思うでしょう。

画像

くそー、それはひどいです。 このいわゆる「メソッド」の実装に時間がかかるだけでなく(ピクセルアートではこれを行うのは非常に面倒です)、移行の問題も解決しないことを、私よりも悪いことを覚えていただければ幸いです。 要するに、これでは十分ではありません。バッファーシェードを使用して滑らかにするだけです。 スムージングは​​控えめなテクニックです。覚えておいてください。 (これらの厄介な輪郭の観点から)どのようにそれを行うべきではないかがわかったので、実際に行われたことを見てください。 最初の写真、次に言葉。

画像画像画像画像

黒の背景と激しく衝突する小さなオレンジ色の弧を見てみましょう。 左側には自然状態の獣がいます。 右側には、スムージングプロセスの連続した段階があります。 円の弧のエッジは、長さが1〜3の一連のセグメントであることに言及することから始めます(これは、曲線の章を思い出させるはずです)。 画像のラインを次々に見て、各セグメントを別々に取ります。 垂直セグメントの場合(ここではありません)、画像の列を順番に見ていきます。 各ラインで、境界線の両側のトランジションをソフトにしますが、注:2色の境界線を超えて逸脱すると、元の形状が破壊されます(そして、それをしない方法の例に近づきます)。 バッファシャドウは上下の線分セグメントの端を超えてはいけません、非常に複雑に見えますが、実際にはそうではありません。最後の写真を見てください。1ピクセルのセグメントは、隣接するセグメントに流れる場合、 、「バンディング」と呼ばれる非常に不快な効果を作成します(上記の悪い例に十分近い)。 フィギュアの周囲に輪郭を描かないでください。 すべての予防措置にもかかわらず、オブジェクトの形状がわずかに歪んでいる場合、必要に応じて、いくつかの調整を行うことができますが、今では同じケースではありません。 また、長さ1のセグメントを滑らかにする必要はないことに注意してください。これは、それ自体でかなり優れています。



3.完全な勝利!


結果はすぐに表示されます(またはすぐにポイントが必要です)。 これは、これらの変更がオレンジサークルと古き良き友人であるドラゴンにどのように影響したかです。

画像

画像

また、ドラゴンの外部照明を少し暗くしたことに注意してください。 以前に発表したように、屋外照明は控えめに使用される技術です。 最後に、あなたの最も機知に富んだ小さなテクニカルノートで終わります。どこに貼り付けるかはわかりません。シャドウバッファはスムージングカラーの間にある必要はありません。 パレットを最適化するだけの場合は、グレーを使用してみてください。グレーはさまざまな色のランプで使用でき、アンチエイリアスの効果があります。

画像

このピクセルアートのサンプルは、Pandaからgeneしみなく提供されたもので、私(およびあなた)よりもアンチエイリアシングがはるかに優れています。 詳細を見た後、キーボードからよだれを拭くのを忘れないでください。



-翻訳者からロシア語へ:フランス語から英語への翻訳の著者は、ある種の写真付きの横棒を持っているため、彼はオリジナルからいくつかの写真を引き出し、Googleでフランス語から数行を翻訳し、読みやすいように修正しました。



All Articles