アウトライン
アウトラインはスプライトの読みやすさを左右します。ピクセルアーティストはそれを3種類に分けて考えます：シルエット、パーツ間の線、折り目です。
3種類の線
- シルエット。スプライトが背景と接する外側の縁です。最も大きな役割を果たします。シルエットがはっきりしたスプライトは、単色でも読み取れます。
- 内側の線。シルエットの内側にあるパーツ間の輪郭：体の前の腕、チュニックを横切るベルト、顔にかかる兜。
- 折り目。1つの面の中の折れや急な曲がり：鼻筋、布のひだ、箱の角。
ほとんどのアーティストは、これらを区別して扱います。シルエットはたいてい最も暗く、途切れがありません。内側の線はより明るいか、部分的です。折り目は省かれることが多く、代わりにシェーディングがその役目を果たします。
暗い線か色付きの線か
すべてを囲む黒に近い線は力強く読みやすく、小さなスプライトやにぎやかな背景に向いています。純粋な黒はきつく見えることがあるので、多くのアーティストは代わりにパレットのごく暗い色、たとえば深い青や茶色を使います。
色付きの線は、接する形の色を取ります。赤いマントには暗い赤の線です。さらに進めて、光の当たる側で線を明るくするとseloutになります。
よくある間違い
- 2ピクセルの太さの線。小さいサイズでは、二重線がスプライトを食いつぶします。線は1ピクセルにしましょう。
- L字の角。線の向きが変わるとき、両隣に接する角のピクセルはL字になって太く見えます。斜めに段を付けましょう。
- 細いパーツの途切れ。幅1ピクセルの剣の刃や杖は、雑に描くと点々に途切れることがあります。連続した1ピクセルの線に保ちましょう。
- すべての折り目に線を引く。内側の線が多すぎると、スプライトがワイヤーフレームになってしまいます。小さな細部は陰影に任せましょう。
- 内側の線がシルエットと同じくらい暗い。形が1つのオブジェクトとして読めなくなります。
手作業でのやり方
- スプライトの形を1色のベタ塗りにして、シルエットだけを確認します。
- シルエットの線を1ピクセル幅で、L字の角を作らずに描きます。
- 内側の線は、パーツが重なって紛らわしくなりそうな所にだけ入れましょう。
- 陰影を付けてから、陰影だけでは足りない部分にだけ折り目を加えます。
- 暗い線か色付きの線かを決めて、全体に適用します。
Pixorでのやり方
Pixorはレンダリングの深度、法線、パーツIDから線を見つけ、シルエット線、内側の線、折り目の線を別々の種類として扱います。それぞれ、省く、選んだ色で暗く描く、セレクティブアウトラインとして描く、のいずれかにできます。線はL字の角のない1ピクセル幅で、モデルの細いパーツは1ピクセルの線として残り、1フレームだけ現れる線はクリーンアップされます。線の各設定はスタイルグラフのノードです。
関連
質問
ピクセルアートのスプライトにアウトラインは必要？
ほとんどの小さなスプライトは、少なくともシルエット線があると、どんな背景でも読み取りやすくなります。大きなアートならアウトラインをなくしてシェーディングに頼ることもできます。
黒いアウトラインか、色付きのアウトラインか？
黒は力強く読みやすく、暗い色の線や選択的アウトラインは柔らかく見えます。ゲーム全体で1つのスタイルを選びましょう。
L字の角とは？
線が曲がるところで角に余分なピクセルがあると、L字になって線が太くなります。きれいなピクセルの線は、代わりに斜めに段を付けます。