3Dからピクセルアートへ：完全ガイド

キャラクターを8方向で、歩き、走り、攻撃、やられのサイクル付きで手描きすると、膨大なフレーム数になります。小さなチームにとっては、ゲームで最大のアートコストになることもあります。3Dモデルからそのフレームをレンダリングするのは、この問題への昔からの答えです。このガイドでは、その発想の由来、うまくいく理由、失敗しやすい点、そして縮小したレンダリングではなくピクセルアートに見えるスプライトを得る方法を解説します。

プリレンダリングスプライトの短い歴史

1994年、RareはスーパーファミコンでDonkey Kong Countryを発売しました。キャラクターと背景はSilicon Graphicsのワークステーションでモデリングとレンダリングを行い、それをゲーム機の小さなスプライトと限られた色数に落とし込んだものです。同じ機種のほかのどのゲームとも違って見え、3Dパイプラインが2Dゲームに素材を供給できることを示しました。

90年代後半には、プリレンダリングのスプライトがPCで一般的になりました。Diablo（1996）、FalloutとFallout 2、StarCraft、Age of Empiresはどれも、3Dからレンダリングしたユニットやキャラクターを、多くの場合さまざまな方向で使っていました。モデルは自由に回せますが、絵はそうはいかないからです。

この技法はDead Cells（2018）で別の形で復活しました。Motion Twinはキャラクターを3Dでアニメーションさせ、小さなピクセルアートのフレームとしてレンダリングし、その工程を2018年のGamasutra（現Game Developer）の記事「Art Design Deep Dive: Using a 3D pipeline for 2D animation in Dead Cells」で紹介しました。狙いは1994と同じで、小さなチームが全フレームを描かずに、滑らかで一貫したアニメーションを得ることでした。

詳しくはプリレンダリングのスプライトをご覧ください。

3Dからレンダリングする理由

繰り返し挙がる理由が3つあります。

• すべての方向。モデルがあれば、新しい向きはカメラを1台増やすだけです。4方向でも8方向でも16方向でも、設定の手間は同じです。
• 一貫したアニメーション。キャラクターのプロポーションは、すべてのフレーム、すべての向きで同じです。手描きのスプライトはずれていきますが、スケルトンはずれません。
• 変更が手軽。鎧の色、スプライトのサイズ、パレットを変えて、もう一度レンダリングするだけです。手描きのシートでは、後からの変更は数百フレームの描き直しを意味します。

その代わり、普通のレンダリングはピクセルアートに見えません。スムーズシェーディングでレンダリングした画像を縮小すると、ぼやけた輪郭、濁ったグラデーション、ほぼ同じ色が何百も並び、フレームごとにちらつくピクセルになります。このガイドの残りは、その差を埋める方法についてです。

ピクセルアートに見える理由

ピクセルアートは低解像度であること以上に、制御することが大事です。すべてのピクセルが判断の結果です。レンダリングは頼んでもいない無数の小さな判断を下すので、その判断を取り戻すことが仕事になります。

1つのピクセルスケール

ゲーム内のすべては、1つのピクセルサイズを共有すべきです。木をあるスケールで描き、キャラクターを2倍の細かさで描けば、その不一致は一目で分かります。ピクセルアーティストは、混在したピクセルサイズをミクセルと呼びます。3Dパイプラインでの解決策は、1メートルあたりのピクセル数を1つに決めることです。身長2メートルの騎士は常に同じピクセル数の高さになり、隣の木箱も釣り合いが取れます。そのためPixorでは、カメラに固定のピクセル/mを設定しましょう。デフォルトでは、各カメラはスプライトを自分のサイズに合わせます。

固定したピボット

キャラクターの足がフレームごとに別のピクセルに着地すると、アニメーション自体が良くても、ゲーム内でスプライトががたつきます。ピボット（たいてい両足の間）は、すべてのフレームとすべての向きで同じピクセルにあるべきです。Pixorはすべてのフレームと向きでピボットを1つのピクセルに固定します。

限られたパレットとランプ

手作りのスプライトは少ない色をランプに並べて使います。マテリアルごとに暗から明への短い並びです。色が少ないと、小さなサイズでも形がはっきり読み取れます。レンダリング結果は、ただ適当に選んだ少ない色にではなく、パレットに減色する必要があります。

色相シフト

良いランプは暗くなるだけではなく、進むにつれて色相も変わります。たいてい影では冷たく、光では暖かくなります。これが色相シフトで、ピクセルアートが灰色にくすんだ感じではなく、描いたように見える大きな理由です。

セレクティブアウトラインときれいな線

すべてを囲む黒い線が合うスタイルもありますが、多くのアーティストは、アウトラインを囲む形から色付けし、影側は暗く、光の当たる側は明るくするか省きます。これがseloutです。線は1ピクセル幅で、「L」字型の二重の角がないようにし、剣の刃や杖のような細いパーツは途切れずにきれいな1ピクセルの線のままにします。詳しくはアウトラインで。

孤立ピクセルもちらつきもなし

どの形にも属さない孤立したピクセルは、ノイズのように見えます。アニメーションでより深刻なのはちらつきです。あるフレームに現れて次のフレームで消えるピクセルや線のことです。レンダリングでは、モデルのわずかな変化で値がしきい値をちょうど上回ったり下回ったりするので、どちらも常に発生します。

意図しないディザリングはなし

ディザリングは意図的なスタイルにもなり得ます。使う場合、パターンはモデルが動いても面に固定されたままであるべきで、網戸のように表面を這ってはいけません。

パイプラインを1段階ずつ

これが一般的な流れと、各ステップでのPixorの役割です。

1. モデル

リグ付きでも静止モデルでも、どんなモデルでも使えます。PixorはglTFとGLB、FBX（Mixamoからのダウンロードを含む）、OBJ、MagicaVoxelの.voxファイルを読みます。形がはっきりしてマテリアルが分かれたシンプルなモデルのほうが、非常に精細なモデルより良いスプライトになります。1ピクセルより小さな細部はどのみち失われます。

2. 向きごとに1台のカメラ

各方向は、モデルを見るカメラです。横スクロールでは1台、見下ろし型やアイソメトリックのゲームでは4台か8台のリングを使います。方向と同じくらい重要なのがピッチです。真横、斜め上、2:1のアイソメトリック、真上からの視点は、それぞれ別のゲームに合います。Pixorではすべての向きがカメラで、4台、8台、16台のリングや、好きな角度に置けます。

3. Gバッファー

完成画像をいきなりレンダリングするのではなく、必要な情報をレンダリングします：各ピクセルのフラットな色、その面が向いている方向（法線）、カメラからの距離（深度）、属するパーツやマテリアルです。これをGバッファーと呼びます。以降のすべてのステップがこれをもとに処理するので、残りを制御できるのです。このページ上部の画像は、宝箱の色、法線、深度、そして完成したスプライトです。

4. 光を帯に分ける

滑らかなシェーディングが、いくつかの平らな帯になります：明部、中間、影。ピクセルアートでは2～4本が一般的です。難しいのは、モデルが動いても帯を安定させることで、ほとんど向きを変えていない面で帯の境界が行ったり来たりしないようにする必要があります。Pixorは1～4本の帯で陰影を付け、面がはっきり向きを変えるまで帯を保ちます。

5. 線

深度、法線、パーツIDから、シルエット、パーツ間の内側の辺、面が折れる折り目を見つけられます。それぞれ別の描き方ができます：暗い線、色付きの線、または描かない。Pixorはシルエット線、内側の線、折り目の線を別々の種類として扱い、それぞれに独自のセレクティブアウトライン設定を持たせ、L字の角のない1ピクセル幅で描き、細いパーツは1ピクセルの線として残します。

6. パレット

各マテリアルの各帯は、ランプ内の1色に割り当てられます。ツールにモデルの色からランプを作らせることも、ゲーム全体で共有する固定パレットを強制することもできます。Pixorはマテリアルごとに色相シフトしたランプを作り、自動パレット、7つの組み込みパレットのどれか、Lospecの.hexやGIMPの.gplファイル、画像から取ったパレットを使えます。インデックスPNGを書き出し、Game Boy、NES、PICO-8、TIC-80、C64の色数制限に合わせるゲーム機モードもあります。

7. クリーンアップ

最後のパスでは、孤立した1ピクセルや、1フレームだけ現れる線を取り除きます。これが、手描きに見えるシートと動画のように見えるシートの違いです。Pixorはこのクリーンアップを独立した段階として実行します。

8. シート

フレームはシートにまとめられ、通常はアクションと向きごとに1行で、エンジンに各フレームの位置を伝えるデータが付きます。

Pixorでは、これらの各段階がスタイルグラフのノードなので、どれでも確認して変更できます。気に入ったルックはキットとして保存し、プロジェクト全体で再利用できます。組み込みのプリセット（clean、selout、retro4、flat、wireframe）は出発点です。

サイズと向きの選び方

サイズはまずデザイン上の選択です。小さなスプライトは大勢の中でも読みやすく、手直しも楽です。大きなスプライトはより個性を出せます。おおよその目安：

• 16 pxは、タイル、アイテム、ごく小さなキャラクターに向いています。
• 32 pxは、見下ろし型やプラットフォーマーのゲームでよく使われるキャラクターの高さです。
• 48〜64 pxなら、顔、装備、表情豊かなアニメーションの余地があります。

主人公が望む高さになる1メートルあたりのピクセル数を選び、ほかはすべてそれに従わせます。ゲームは整数倍（2×、3×、4×）で表示し、アートの各ピクセルが画面上できれいな正方形になるようにします。詳しくはスプライトのサイズで解説しています。

方向の数：横スクロールなら1方向（反転すれば逆向き）、シンプルな見下ろし型なら4方向、ほとんどのアクションや戦略ゲームなら8方向、乗り物のように滑らかに向きを変えるものなら16方向です。

アニメーション

3Dアニメーションには瞬間ごとにポーズがあります。ピクセルアートのアニメーションにはほんの数フレームしかなく、そのフレームは均等にサンプリングするのではなく、選ぶものです。

ポーズの極みとホールド

最も大事なフレームは極端なポーズです：歩きの接地ポーズ、ジャンプの頂点、剣が当たる瞬間。良いスプライトアニメーションはそれらを残して少し長くホールドし、小さなサイズでは何も加えない中割りを省きます。等間隔のフレームはふわふわして見えがちです。Pixorのスマートフレームは、ポーズの極端を選んでホールドします。

フレームは少なく、きれいに

32ピクセルなら、6〜8フレームの歩行で十分です。フレームが多いほど、ちらつきの機会と修正の手間が増えます。Pixorはアニメーション全体のちらつきを測ります。

アニメーションの入手

モデルを自分でアニメーションさせるか、付属のクリップ（または別ファイルのクリップ）を使うか、別のリグからクリップをリターゲットできます。Pixorには、シンプルなアクション（待機、歩き、走り、ジャンプ、攻撃、被弾、死亡）と、小道具や取得アイテム用のオブジェクトモーション（回転、上下動、揺れ、脈動）のモーションライブラリもあります。

手で仕上げる

レンダリングで得られるのは一貫したフレームです。アーティストの判断までは得られません。良い結果の多くは、きれいなベースをレンダリングしてから、重要なフレームを直すことで生まれます。顔をはっきりさせる、攻撃のフレームのシルエットを強める、刃にハイライトを入れる、など。

これにはAsepriteがよく使われます。Pixorはアクションと向きごとにタグを付けた.asepriteファイルを書き出します。モデルや設定を変えてもう一度レンダリングしても、手で描いたレイヤーはそのフレームに残るので、再ベイクで手直しが失われることはありません。Asepriteを参照してください。

ゲームエンジンへの書き出し

エンジンはフレームとメタデータを必要とします。よくある書き出し先：

• フレーム、アクション、向きを列挙したJSONファイル付きのPNGのスプライトシート。
• Godotプロジェクト向けのGodot SpriteFrames。
• プレビュー、ストアページ、SNS投稿用のGIFやAPNG。
• エンジンが2Dスプライトをライティングするならノーマルマップと深度マップ。

Pixorはこれらすべてを書き出します。レンダリングは決定的なので、同じモデルと設定なら常に同じピクセルになり、シートはいつでも予想外のことなく作り直せます。書き出しと書き出しマニュアルを参照してください。

試してみる

Pixorは、上の各ステップをオフラインかつアカウント不要でこなす、WindowsとLinux向けのデスクトップアプリです。生成AIは含まれておらず、あなたが選んだ設定でモデルをレンダリングします。価格は$19.99の買い切りで、アップデートはすべて無料です。まずは仕組みから始めるか、ライブラリでこの方法でレンダリングしたスプライトを見るか、マニュアルですべての設定を確認してください。