セルアウト：セレクティブアウトライン

概要

seloutはセレクティブアウトライン（selective outlining）の略です。スプライト全体を同じ暗い線で囲む代わりに、アウトラインの各ピクセルが隣の形から色を取ります。たいていはその形自身のランプの暗い階調です。光が当たる部分ではアウトラインが明るくなるか消え、形が影へと回り込む部分では暗くなります。

赤いマントには深い赤のアウトライン。灰色の兜には暗い灰色のアウトライン。光に向いた頭のてっぺんには、アウトラインがまったくないこともあります。

アーティストがそうする理由

純粋な黒のアウトラインは強くはっきりしていますが、スプライトを平板にします。どの形も同じ重い線で囲まれ、線がシェーディングと注目を奪い合います。seloutは縁をはっきりさせたまま、光が形を包み込むように見せます。また、スプライトがステッカーのように浮かずにシーンになじむのにも役立ちます。

これはスタイルの選択であって、ルールではありません。多くの人気ゲームが全体に黒いアウトラインを使っています。

よくある間違い

• アウトライン全体を1色にする。それは単なる色付きのアウトラインです。seloutの要点は、形と光に応じて色が変わることです。
• アウトラインを明るくしすぎる。アウトラインのピクセルが塗りの色に近いと、輪郭が消えてシルエットがぼやけます。似た色の背景の上では特にそうです。
• 影側のアウトラインを消す。スプライトが影になっている側には最も暗いアウトラインを残しましょう。形を決める仕事の大半はその側がしています。
• 二重になる。ところどころ2ピクセルの太さになったアウトラインや、階段状の「L」字の角は重く見えます。きれいな1ピクセルに保ちましょう。

手作業でのやり方

1. まずスプライトを無地の暗いアウトラインで描き、シルエットをしっかりさせます。
2. 光の方向を選びます。
3. アウトラインに沿って一周します。ピクセルの連なりごとに、暗い色を、接している形のランプの最も暗い階調に置き換えます。
4. 光の当たる側では、アウトラインを1～2階調明るくするか、形がはっきり明るい部分では取り除きます。
5. スプライトを暗い背景と明るい背景で、1×ズームで確認します。

同じ考え方は、パーツ間の内側の線にも使えます。たとえば袖と手袋が接する辺です。

Pixorでのやり方

Pixorはアウトラインを種類ごとに別々に扱います：シルエット、パーツ間の内側の線、面が折れる折り目です。それぞれ、省く、暗く描く、隣の面の色から作るセレクティブアウトラインとして描く、のいずれかにできます。線はL字の角のない1ピクセル幅です。seloutプリセットは、セレクティブアウトラインをオンにした出発点のルックです。ほかの段階と同様に、線の設定はスタイルグラフのノードで、気に入ったルックはキットとして保存できます。

関連

• アウトライン：シルエット、内側の線、折り目
• パレットのランプ：selout（選択的アウトライン）の色の出どころ
• ルックと設定マニュアル