2D Pixel Perfect：レトロな 16 ビットゲームの制作に向けた Unity プロジェクトのセットアップ方法
レトロゲーム制作に向けた 2D Pixel Perfect をガイドした初回の記事では、2D Pixel Perfect ツールのセットアップ方法と、かつて 8 ビットグラフィックスがどのように制作されていたのかについて説明しました。今回のブログ記事では、話を 16 ビットの時代に進めます。Mega Cat Studiosのヘルプを得て、 Unityの設定、グラフィックス構造、カラーパレットを使用して、セガジェネシス（またはメガドライブ）やスーパーファミコン風のゲーム向けの本格的なアートを作成する方法を学びます。
2D開発の経験を次のレベルに引き上げ、 Unityのネイティブ2Dツールスイートを探る。
Mega Cat Studiosは、非常に精巧なレトロゲームの制作を芸術の域にまで高めた。実際、同社のいくつかのタイトルはカートリッジの形で入手でき、Sega Genesis などの古いコンソールでプレイすることも可能です。
この記事を読む前に、以前公開したレトロゲームガイドに目を通しておくことをお勧めします。そのガイドでは、 2D Pixel Perfectの設定方法や、8ビットスタイルのグラフィックスを再現する方法について解説しています。Unity 2019.2 では、ライトウェイトレンダーパイプライン（LWRP）パッケージの 2D Renderer に 2D Pixel Perfect が組み込まれています。2D Pixel Perfectは、LWRPを使用しないクリエイター向けに、スタンドアロンパッケージ（同じ機能）としても提供されています。このガイドでは、LWRPでプロジェクトを設定する方法を説明します。
Unity Hubで「新規」をクリックし、 「2D」を選択して、プロジェクトに名前を付けます。
2.2D Pixel Perfectパッケージをインポートするには、ツールバーの [ウィンドウ]メニューをクリックし、 [Package Manager] を選択します。ポップアップウィンドウで、軽量RPパッケージを選択し、バージョン6.9.0以上であることを確認してください。
3.次に、エディターで2Dレンダラーを設定し、新しいパイプラインアセットを作成します。プロジェクトウィンドウで、アセットビューを右クリックし、 [作成] > [レンダリング] > [軽量レンダーパイプライン] > [パイプライン アセット]を選択します。
4.プロジェクトウィンドウのアセットビューで、右クリックして[作成] > [レンダリング] > [軽量レンダーパイプライン] > [2Dレンダラー]を選択して、新しい2Dレンダラーを作成します。
5.作成したパイプラインアセットを選択してください。「一般」を選択し、次に「レンダラータイプ」を「フォワードレンダラー」から「カスタム」に変更します。
6.作成した2Dレンダラーをデータフィールドに割り当ててください。
7.グラフィック設定で、作成した新しいパイプラインアセットを使用するように、スクリプタブルレンダーパイプライン設定を設定します。
これで、2D Pixel Perfect Camera を含め、2D Renderer の設定は完了です。
Unity 2019.2 では、2D スプライトに「Sprite-Lit」マテリアルを設定することができます。これを設定すると、2D スプライトが 2D ライティング条件に影響を受けるようになります。プロジェクトで2Dライトを使用していない場合は、スプライトを表示するために2Dライトを必要としないマテリアルを使用していることを確認してください。その場合は、マテリアルを「Sprites-Default」に変更できます。
メインカメラに Pixel Perfect Camera コンポーネントを追加する必要があります。「Run In Edit Mode」をオンにすることをお勧めします。
セガジェネシスコンソールの解像度は320×224ピクセル（または8×8ピクセルのタイルが40×28個並んだグリッド）です。これは NTSC バージョンです。スーパーファミコンのNTSC版も、解像度は256×224（8×8ピクセルのタイルが30×28個）です。
グラフィックのスタイルがどちらの場合であっても、縦の解像度を 224 ピクセルにし、8 PPU でアセットを設計することをお勧めします。
2D Pixel Perfectカメラコンポーネントの各オプションの機能について復習が必要な場合は、以前のレトロゲームに関するブログ記事をご覧ください。
このセクションでは、 NESに関するブログ記事で行ったように、さまざまなゲーム機の外観を模倣したアートワークを作成するためのワークフローについて説明します。8 ビットのプロジェクトよりも制約が少なく、色の自由度も高くなっていますが、メガドライブには特有の制約があります。また、オリジナルのハードウェアがどのように動作するのかを説明することも重要だと考えています。そうすることで、それらの制約を自身のレトロプロジェクトに応用できるようになるからです。
8 ビットコンソールから 16 ビットコンソールに移行すると、ハードウェアが高度になり、利用できるオプションが増えます。とは言え、ファミコン風ゲームの美しいアートワークを作成するときの基本は引き続き当てはまります。例えば、すべてのグラフィックスは8x8ピクセルのタイルに格納され、スプライトであれ背景要素であれ、それらを組み合わせてより大きな画像に組み立てられます。16 ビットではパレットの自由度がいろいろな意味で大きくなるとは言っても、共通の透過色が設定された、制限のあるサブパレットで作業する必要があります。気楽なのは、16 ビットコンソールには通常、8 ビットコンソールとは異なり、ハードコーディングされたカラーパレットがないことです。つまり、利用できる色はファミコンよりも大幅に増えています。
次にメガドライブが誇る機能はサブパレットです。サブパレットには、15 色に加え、スプライトの透過色とレイヤーの透過色に使用する共通色が含まれています。しかし、メガドライブ向けのアートをデザインするうえでの弱点の 1 つは、このサブパレットにあります。サブパレットはスプライトまたは背景のタイルに自由に割り当てることができますが、メガドライブでは一度に使用できるサブパレット数が 4 つに制限されているのです。そのため、スプライトと背景で使用できる色を最大化できるように、アーティストはサブパレットで使用する色に注意する必要があります。メガドライブのサブパレットには通常、すべてをきれいに調和させるために、背景とスプライトの両方で使用する色が含まれます。
どの 16 ビットプラットフォーム向けに作成する場合でも、インデックス付きパレットを使って作業する必要があります。そのための、Photoshop の代替となるオープンソースソフトウェアとして Gimp があります。Gimp では、多くのインデックス付きパレット操作を行うことができます。
Gimpでインデックス付きパレットを作成するには、 [画像] > [モード] > [インデックス付き]を選択します。
「インデックスカラー変換」ウィンドウが表示されます。
最大色数を15に設定します。自動ディザリングパターンを使用することもできますが、手動で作成した方が見栄えが良くなる傾向があります。
画像の色にインデックスが付けられました。この情報は、この色インデックスを使用できるように、画像と一緒に自動的に保存されます。インデックス内の色の順序を変更する必要がある場合は、カラーマップを右クリックして「カラーマップの並べ替え」を選択するだけです。
ポップアップメニューが表示され、色をドラッグアンドドロップして新しい順番に変更できます。
色づかいを豊かにするためによく使われるテクニックの 1 つが、指定のラスターラインに合わせてパレットを制御することです（もっとも、パララックススクロールはファミコンの時点ですでに実現されていました）。メガドライブでは、指定のラスターラインに合わせてアートワークで使用するサブパレットを切り替えることができます。このテクニックは、レベルの一部を水中であるかのように見せかける場合によく使われています。「水中」の色は、まったく別のサブパレットに追加し、特定のラスターラインが画面上にレンダリングされたときに、そのサブパレットを読み込みます。
一般的に、16 ビットコンソールがグラフィックタイルを読み込む方法は、8 ビットコンソールとは異なっています。8 ビットコンソールでは、スプライトと背景のタイルを個別に、サイズの大きなデータチャンクとして読み込むことで、大量の処理能力を使用するのを回避しています。一方、16 ビットコンソールには、より柔軟性の高い処理能力があります。個別のタイルをその場で読み込んで入れ替えることができるため、必要なときに必要なグラフィックスだけを読み込めばよいのです。そのため、ゲームの 1 レベルや 1 画面で、さらに幅広いアートワークを使用できるようになっています。
ジェネシス/メガドライブ特有のもう一つの点は、ゲーム中にゲーム機のVRAMに読み込まれるのはグラフィックタイルやパレットデータだけではないということです。これにより、ゲームの状況に応じて、所定のタイミングでメモリに読み込むことのできるグラフィックタイルの数が変化するので、メガドライブ向けのアートのデザインがややこしいものになる場合があります。一般的に、ほとんどのゲームでは最大で 1000 タイルを読み込めるだけの十分な容量が用意されています。また、動的な要素がある場合は、いつでもタイルを自由に入れ替えることができます。
VRAM に一度に読み込んで利用できるタイルの幅が広がったとは言っても、それによって新たに使えるようになった容量は、画面上に一度に表示するスプライトのアニメーションのバリエーションを増やしたり、種類を増やしたりと、スプライトで利用するために取っておくことがほとんどです。つまり、背景が利用可能なスペースをあまり占有しないように、タイル状のセグメントを繰り返し使用するという基本的なデザイン哲学は、16ビットアートでは今でもよく使われているということだ。ファミコン、メガドライブ、スーパーファミコンの解像度はどれも似たようなものなので、この種のデザインでは、16 x 16 のセグメントが開始点となる傾向があります。
メガドライブでは、2 つの背景レイヤーを同時に画面上でアクティブにできます。つまり、背景をデザインするうえで、以前よりも簡単にレイヤード要素を利用できるようになっています。とはいえ、レイヤーはたった2つしかないので、アーティストや開発者は、シーンに深度を持たせるために、ラスタラインを使った何らかのテクニックに頼らざるを得ないかもしれない。さいわい、そのようなテクニックはすべて 2 番目のレイヤーで使用するため、デザイナーは、奥行感を損なうおそれなく、背景の前に自由にフォアグラウンドオブジェクトを配置することができます。
また、2 番目のレイヤーの存在により、スプライトの優先度を使ってフォアグラウンドオブジェクトを作るテクニックは時代遅れになりました。（高度なレイヤー化ではスプライトの優先度を素早く操作する必要は引き続きあるかもしれませんが）スプライトの優先度をその場で何度も変更する代わりに、単純に 2 番目の背景レイヤーがプレイヤーの前に表示されるように設定すれば済むようになったのです。2 番目の背景ペインには、ヘッドアップディスプレイ（HUD）に使用できるサブペインも備わっています。サブペインは場所が固定され、スクロールしません。
16 ビットコンソールへ移行すると、スプライトを扱う際の自由度が大きくなります。メガドライブでは、画面上に同時に 80 のスプライト、1 つの水平線上に約 20 のスプライトが表示されるまで、新しいスプライトをレンダリングできます。さらに、スプライトは 8 x 8 の個々のタイルから構成されるものではなくなりました。メガドライブでは、複数のタイルから成るスプライトを生成できます。スプライトは、単一タイルの小さなものから、4 x 4 タイルの大きなものまでさまざまです。それ以上の大きさのものは、引き続き複数のスプライトから生成する必要があります。
16 ビット時代のアートワークの決定的な特徴の 1 つは、ディザリングの使用です。それまでのゲームは CRT モニターで表示されており、画面上のピクセルが互いににじみ合う傾向がありました。アーティストは、アートワークでディザリングパターンを使用して、このにじみを活用していました。繰り返しパターンで、あるピクセルが別のピクセルににじむと、実際に使用できるよりも多くの色が使用されているという錯覚が生じるのです。現在に至るまで、ディスプレイの性能向上にかかわらず、ディザリングはピクセルアートで多用され、美的外観の演出に一役買っています。
2 つの主要な 16 ビットコンソールのうち、メガドライブでは、色が大きなコントラストで表示されます。この点についても、サブパレット選択時に留意が必要です。くすんだ色調で何かを制作すると、実際にハードウェア上で画像をレンダリングした際に、期待通りの見た目にならない可能性があります。芸術作品は一般的に、コントラストの高い色彩を用いて制作されるべきであり、そうすることで最終的な結果がアーティストの当初の構想に沿ったものとなる。
スーパーファミコン向けのプロジェクトでは、引き続きサイズが 8 x 8 ピクセルのタイル/グリッドを使用するので、繰り返し可能なタイルを使うと非常に便利です。一般的に、それは 8 の倍数になります。
メガドライブとスーパーファミコンの最初の根本的な違いは、カラーパレットにあります。メガドライブと同様に、スーパーファミコンにもハードコーディングされたカラーパレットはないため、自由に色を選ぶことができます。
スーパーファミコンの厄介な点は、1ピクセルあたり5ビット（BPP）の色を使用していることで、これは今日ではあまり一般的ではありません。この問題を解決するには、 Gimpを使用してアートワークを作成し、その画像を32階調のRGBにポスタライズするだけで済みます。これにより、たとえ画像をそのように保存していなくても、5 BPPの色数になります。すると、5 BPP 色になるように画像を保存していなくても、5 BPP 色の画像を作成できます。このようにして、コンソールで画像の色を正確に表示できます。
このオプションは、 Gimpの「カラー」＞「ポスタライズ…」にあります。ポップアップウィンドウが表示され、そこでポスタライズレベルを32に設定すると、5つのBPP互換カラーを作成できます。
2 つのシステムにおける次の大きな違いは、画面解像度に関するものです。スーパーファミコンはファミコンの後継機であるため、この 2 つのシステムの画面解像度は似ています。スーパーファミコンの内部解像度は 256 x 224 です。これは、すべての画像が大半の CRT テレビのセーフゾーンに表示されるようにレンダリングされ、画像が欠けることのない解像度です。この解像度は変化しないため、これがアーティストが参照として使用する必要のある画像サイズとなります。
オリジナルハードウェアのスクリーンモードこのセクションでは、各種のスクリーンモードについて簡潔に説明します。
2 つのシステムの最も大きな違いは、スーパーファミコンでは 7 つの異なるスクリーンモードで背景グラフィックスをレンダリングできることです。スーパーファミコンでは、特定のスクリーンモードで、1 つのサブパレットを使い、合計 256 色を画面上に一度にレンダリングできます。以下に、最も一般的なスクリーンモードをいくつか示します。
- モード1：これはスーパーファミコンで最もよく使われる画面モードの一つです。このゲーム機は、その性能を平均的に最もよく発揮している。モード1、3つの背景レイヤーを使用できます。そのうち2つのレイヤーにはそれぞれ16色のサブパレットがあり、最後のレイヤーには4色のサブパレットがあります。
- モード3：このモードは、タイトル画面やストーリー画面など、比較的大きな静的画像を表示する場合によく使用されます。このモードには、2 枚の背景プレーンがあります。1 枚目のプレーンでは最大の 256 色のサブパレットを使用でき、2 枚目のプレーンでは 16 色のサブパレットを使用できます。
- モード 7：スーパーファミコンの主要機能の 1 つです。モード 7 は、スーパーファミコンのプロモーション資料の多くで大々的に取り上げられていました。背景プレーンで拡大縮小、回転、引き伸ばし、スキューといった画像の変形をリアルタイムで適用できる家庭用コンソールは、これが初めてだったからです。モード 7 は、多くのレーシングゲームや飛行ゲームで見られる疑似 3D 効果の作成に使用されました。
モード 7 で使用する 1 枚の背景プレーンの処理方法は、先述の機能を実現するために、他のスクリーンモードとはかなり異なっています。まず、処理対象である 256 色の背景プレーン 1 枚しかありません。つまり、すべてのスプライトは、背景プレーンのサブパレットの色を共有する必要があります。次に、モード 7 の背景プレーンのサイズは、スーパーファミコンの通常の画面サイズではなく、1024 x 1024 ピクセルです。これは、後でデザイナーの意図するように画面に合わせてサイズ変更されます。
背景スクリーンモードは複雑でしたが、スプライトのルールは比較的単純です。スーパーファミコンには、メガドライブと同様に複数のスプライトモードがありますが、ゲーム全体で 2 つのスプライトモードしか使用できないというハード制限があります。
スプライトのサイズは、8 x 8、16 x 16、32 x 32、または 64 x 64 のいずれかです。それだけでなく、デザイナーは、あらかじめ設定されたスプライトサイズの組み合わせリストから選択しなければなりません。スーパーファミコンのゲームに含めることのできる組み合わせは、次のとおりです。
- 8 x 8、16 x 16
- 8 x 8、32 x 32
- 8 x 8、64 x 64
- 16 x 16、32 x 32
- 16 x 16、64 x 64
- 32 x 32、64 x 64
これらのサイズは「決定事項」であり、一度選択したら、ゲーム内のすべてのスプライトをそれに準拠させなければなりません。スーパーファミコンでは、1 本の水平のラスターライン上に同時に 32 枚のスプライトをレンダリングできますが、画面上に同時に表示できるスプライト数は 128 枚という大変な制限があります。この数を超えたスプライトは、画面上にレンダリングされません。
スプライトには、作業用に 16 色のサブパレットを 8 つ設定できます。すべてのレトロゲーム機と同様に、サブパレットの最初の色は、透明度に使用される共通の共有色です。他のコンソールと比較して利用できるサブパレット数が多いため、スプライトの色をより自由に選ぶことができます。256色という厳密な制限があることを覚えておいてください。
このブログ記事では、最新バージョンの Unity で 2D Pixel Perfect を使用して 8 ビットや 16 ビットのレトロゲームを制作する方法を紹介しました。楽しんでいただけたなら幸いです。
2D Pixel Perfectの開発はまだ完了していません。この特徴はUnity 2019.3で製品版として検証され、 Cinemachine 2Dとの互換性のあるも向上する予定です。
ご自身の2D Pixel Perfectプロジェクトの進捗状況をぜひお知らせください。また、 Unityコミュニティや2D開発チームと交流するために、 2Dフォーラムにもぜひアクセスしてください。