Search Unity

2D Pixel Perfect:レトロな 16 ビットゲームの制作に向けた Unity プロジェクトのセットアップ方法

, 8月 2, 2019

レトロゲーム制作に向けた 2D Pixel Perfect をガイドした初回の記事では、2D Pixel Perfect ツールのセットアップ方法と、かつて 8 ビットグラフィックスがどのように制作されていたのかについて説明しました。今回のブログ記事では、話を 16 ビットの時代に進めます。Mega Cat Studios の力を借りて、Unity の設定、グラフィックスの構造、カラーパレットなどを使って、メガドライブ(Sega Genesis)やスーパーファミコン(Super NES)風のゲームのアートを本物らしく作成する方法を学びます。



Mega Cat Studios は、当時の雰囲気を忠実に再現したレトロゲームの制作を 1 つのアートの形に昇華させました。実際、同社のいくつかのタイトルはカートリッジの形で入手でき、Sega Genesis などの古いコンソールでプレイすることも可能です

2D Pixel Perfect を使ったレトロゲーム制作

このブログ記事を読む前に、レトロゲーム制作に関する前回のガイドの内容を理解しておくことをお勧めします。前回のガイドでは、2D Pixel Perfect の設定と、8 ビットスタイルのグラフィックスの再現方法を説明しています。

Unity 2019.2 では、ライトウェイトレンダーパイプライン(LWRP)パッケージの 2D Renderer に 2D Pixel Perfect が組み込まれています。2D Pixel Perfect は、LWRP を使用しないクリエイター向けに、スタンドアロンパッケージとしても用意されています(機能は同じです)。このガイドでは、LWRP でのプロジェクトのセットアップ方法を説明します。

Unity 2019.2 と LWRP を使う場合の新しいプロジェクトのセットアップ

  1. Unity Hub で、「New」をクリックし、「2D」を選択して、プロジェクトに名前を付けます。

2. 2D Pixel Perfect パッケージをインポートするには、ツールバーで「Window」メニューをクリックして、「Package Manager」を選択します。ポップアップウィンドウで、「Lightweight RP」パッケージを選択します。バージョン 6.9.0 以上を入手するようにします。

3.次に、エディターで 2D Renderer を設定し、新しいパイプラインアセットを作成します。「Project」ウィンドウで「Assets」ビューを右クリックし、「Create」>「Rendering」>「Lightweight Render Pipeline」>「Pipeline Asset」の順に選択します。

4. 「Project」ウィンドウの「Assets」ビューで右クリックし、「Create」>「Rendering」>「Lightweight Render Pipeline」>「2D Renderer」の順に選択して新しい 2D Renderer を作成します。

5.作成したパイプラインアセットを選択します。「General」を選択し、「Renderer Type」を「Forward Renderer」から「Custom」に変更します。

6. 作成した 2D Renderer をデータフィールドに割り当てます。

7.「Graphics」設定の「Scriptable Render Pipeline Settings」で、作成した新しいパイプラインアセットを使用するように設定します。

これで、2D Pixel Perfect Camera を含め、2D Renderer の設定は完了です。

Unity 2019.2 では、2D スプライトに「Sprite-Lit」マテリアルを設定することができます。これを設定すると、2D スプライトが 2D ライティング条件に影響を受けるようになります。プロジェクトで 2D Lights を使用しない場合、スプライト可視化のために 2D Lights を必要としないマテリアルを使用してください。その場合、マテリアルを「Sprites-Default」に変更できます。

16 ビット風のグラフィックスのためのピクセルパーフェクトのセットアップ

メインカメラに Pixel Perfect Camera コンポーネントを追加する必要があります。「Run In Edit Mode」をオンにすることをお勧めします。

メガドライブコンソールの解像度は 320 x 224 ピクセル(8 x 8 ピクセルのタイルが 40 x 28 のマス目に表示される)です。これは NTSC バージョンです。スーパーファミコンの解像度は 256 x 224 ピクセル(8 x 8 ピクセルのタイルが 30 x 28 のマス目に表示される) であり、これも NTSC バージョンです。

グラフィックのスタイルがどちらの場合であっても、縦の解像度を 224 ピクセルにし、8 PPU でアセットを設計することをお勧めします。

参照スプライト(画像に示したのはメガドライブの『Sonic the Hedgehog』のフルスクリーン画像で、320 x 224 ピクセル)を使用すると、単位あたりのピクセル数(PPU)が 8 のスプライトが、同じ解像度と PPU の「Scene」ビューにどのように収まるのかを確認できます。

2D Pixel Perfect Camera コンポーネントに用意されている各オプションの機能について説明が必要な場合は、レトロゲームに関する以前のブログ記事をご覧ください。

メガドライブ風のアートワークを本物らしく作成する方法

このセクションでは、ファミコン風のゲームを取り上げたブログ記事のように、さまざまなコンソールの表示を模倣したアートワークを作成するワークフローについて説明します。8 ビットのプロジェクトよりも制約が少なく、色の自由度も高くなっていますが、メガドライブには特有の制約があります。皆さまがご自分のレトロ風ゲームのプロジェクトでそのような制約を適用するために、オリジナルハードウェアの仕組みを説明することも重要だと考えています。

パレットとサブパレット

8 ビットコンソールから 16 ビットコンソールに移行すると、ハードウェアが高度になり、利用できるオプションが増えます。とは言え、ファミコン風ゲームの美しいアートワークを作成するときの基本は引き続き当てはまります。たとえば、スプライトであれ、背景要素であれ、すべてのグラフィックスは引き続き 8 x 8 のタイルに格納され、それが組み合わせられて大きな画像が作られます。16 ビットではパレットの自由度がいろいろな意味で大きくなるとは言っても、共通の透過色が設定された、制限のあるサブパレットで作業する必要があります。気楽なのは、16 ビットコンソールには通常、8 ビットコンソールとは異なり、ハードコーディングされたカラーパレットがないことです。つまり、利用できる色はファミコンよりも大幅に増えています。

次にメガドライブが誇る機能はサブパレットです。サブパレットには、15 色に加え、スプライトの透過色とレイヤーの透過色に使用する共通色が含まれています。しかし、メガドライブ向けのアートをデザインするうえでの弱点の 1 つは、このサブパレットにあります。サブパレットはスプライトまたは背景のタイルに自由に割り当てることができますが、メガドライブでは一度に使用できるサブパレット数が 4 つに制限されているのです。そのため、スプライトと背景で使用できる色を最大化できるように、アーティストはサブパレットで使用する色に注意する必要があります。メガドライブのサブパレットには通常、すべてをきれいに調和させるために、背景とスプライトの両方で使用する色が含まれます。

(上)メガドライブのシーン(下)使用されているサブパレット

どの 16 ビットプラットフォーム向けに作成する場合でも、インデックス付きパレットを使って作業する必要があります。そのための、Photoshop の代替となるオープンソースソフトウェアとして Gimp があります。Gimp では、多くのインデックス付きパレット操作を行うことができます。

Gimp でインデックス付きパレットを作成するには、「画像」>「モード」>「インデックス…」の順に移動します。

「インデックスカラー変換」ウィンドウが表示されます。

「最大色数」を 15 に設定します。自動ディザリングパターンを使用できますが、手動で作成した方がきれいな見た目になる傾向があります。

これで、画像の色がインデックス付けされました。この情報は、この色インデックスを使用できるように、画像と一緒に自動的に保存されます。インデックスに含まれる色の順番に変更が必要な場合には、カラーマップを右クリックして「インデックスカラーの並べ替え…」を選択します。

ポップアップメニューが表示され、色をドラッグアンドドロップして新しい順番に変更できます。

色づかいを豊かにするためによく使われるテクニックの 1 つが、指定のラスターラインに合わせてパレットを制御することです(もっとも、パララックススクロールはファミコンの時点ですでに実現されていました)。メガドライブでは、指定のラスターラインに合わせてアートワークで使用するサブパレットを切り替えることができます。このテクニックは、レベルの一部を水中であるかのように見せかける場合によく使われています。「水中」の色は、まったく別のサブパレットに追加し、特定のラスターラインが画面上にレンダリングされたときに、そのサブパレットを読み込みます。

オリジナルハードウェアにおけるタイルベースの格納と読み込み

一般的に、16 ビットコンソールがグラフィックタイルを読み込む方法は、8 ビットコンソールとは異なっています。8 ビットコンソールでは、スプライトと背景のタイルを個別に、サイズの大きなデータチャンクとして読み込むことで、大量の処理能力を使用するのを回避しています。一方、16 ビットコンソールには、より柔軟性の高い処理能力があります。個別のタイルをその場で読み込んで入れ替えることができるため、必要なときに必要なグラフィックスだけを読み込めばよいのです。そのため、ゲームの 1 レベルや 1 画面で、さらに幅広いアートワークを使用できるようになっています。

メガドライブが独特な点のもう 1 つは、グラフィックタイルとパレットデータ以外のデータも、ゲーム中にコンソールの VRAM に読み込まれる点です。これにより、ゲームの状況に応じて、所定のタイミングでメモリに読み込むことのできるグラフィックタイルの数が変化するので、メガドライブ向けのアートのデザインがややこしいものになる場合があります。一般的に、ほとんどのゲームでは最大で 1000 タイルを読み込めるだけの十分な容量が用意されています。また、動的な要素がある場合は、いつでもタイルを自由に入れ替えることができます。

先ほどのシーンでメモリに読み込まれているタイル。中央の大きな空間と下部のアーティファクトは、敵などのゲーム要素をメモリに割り当てるための空間です。

VRAM に一度に読み込んで利用できるタイルの幅が広がったとは言っても、それによって新たに使えるようになった容量は、画面上に一度に表示するスプライトのアニメーションのバリエーションを増やしたり、種類を増やしたりと、スプライトで利用するために取っておくことがほとんどです。つまり、背景でメモリ容量を使いすぎることのないよう、タイルのセグメントを繰り返し使用するという基本的なデザイン哲学は、16 ビットアートでも多分に使用される傾向があります。ファミコン、メガドライブ、スーパーファミコンの解像度はどれも似たようなものなので、この種のデザインでは、16 x 16 のセグメントが開始点となる傾向があります。

この画像では、簡素な 32 x 32 ブロックのパターンを使って、背景の歩行可能な空間の大部分を作成しています。

背景レイヤーの使用

メガドライブでは、2 つの背景レイヤーを同時に画面上でアクティブにできます。つまり、背景をデザインするうえで、以前よりも簡単にレイヤード要素を利用できるようになっています。そうは言っても、利用できるレイヤーは 2 つだけなので、シーンの奥行を深く見せるためには、ラスターラインを使ったテクニックに頼ることになるでしょう。さいわい、そのようなテクニックはすべて 2 番目のレイヤーで使用するため、デザイナーは、奥行感を損なうおそれなく、背景の前に自由にフォアグラウンドオブジェクトを配置することができます。

また、2 番目のレイヤーの存在により、スプライトの優先度を使ってフォアグラウンドオブジェクトを作るテクニックは時代遅れになりました。(高度なレイヤー化ではスプライトの優先度を素早く操作する必要は引き続きあるかもしれませんが)スプライトの優先度をその場で何度も変更する代わりに、単純に 2 番目の背景レイヤーがプレイヤーの前に表示されるように設定すれば済むようになったのです。2 番目の背景ペインには、ヘッドアップディスプレイ(HUD)に使用できるサブペインも備わっています。サブペインは場所が固定され、スクロールしません。

ゲームが見下ろし視点であるため、スプライトレイヤーの順番を操作するために木に特別なタイルを作成する必要があります。

スプライトの制約事項

16 ビットコンソールへ移行すると、スプライトを扱う際の自由度が大きくなります。メガドライブでは、画面上に同時に 80 のスプライト、1 つの水平線上に約 20 のスプライトが表示されるまで、新しいスプライトをレンダリングできます。さらに、スプライトは 8 x 8 の個々のタイルから構成されるものではなくなりました。メガドライブでは、複数のタイルから成るスプライトを生成できます。スプライトは、単一タイルの小さなものから、4 x 4 タイルの大きなものまでさまざまです。それ以上の大きさのものは、引き続き複数のスプライトから生成する必要があります。

ラスボスは、アニメーション化した多数の背景要素、レイヤー、および多数のスプライトを使用しています。そのいずれも、8 ビットプラットフォームでは不可能でした。

パターンのディザリングとコントラスト

16 ビット時代のアートワークの決定的な特徴の 1 つは、ディザリングの使用です。それまでのゲームは CRT モニターで表示されており、画面上のピクセルが互いににじみ合う傾向がありました。アーティストは、アートワークでディザリングパターンを使用して、このにじみを活用していました。繰り返しパターンで、あるピクセルが別のピクセルににじむと、実際に使用できるよりも多くの色が使用されているという錯覚が生じるのです。現在に至るまで、ディスプレイの性能向上にかかわらず、ディザリングはピクセルアートで多用され、美的外観の演出に一役買っています。

16 ビットではディザリングが盛んに使用されました。CRT では、ピクセルのパターンがブレンドされ、本来不可能だった新しい色や透過性効果が生み出されました。

2 つの主要な 16 ビットコンソールのうち、メガドライブでは、色が大きなコントラストで表示されます。この点についても、サブパレット選択時に留意が必要です。アートの作成で落ち着いた、鈍い色を使うほど、実際に画像をハードウェアにレンダリングしたときに期待どおりの見た目になりません。最終的な見た目をアーティストの当初のビジョンどおりにするには、一般的に、アートをハイコントラストのカラーパレットで作成する必要があります。

スーパーファミコン風のアートワークを本物らしく作成する方法

スーパーファミコン向けのプロジェクトでは、引き続きサイズが 8 x 8 ピクセルのタイル/グリッドを使用するので、繰り返し可能なタイルを使うと非常に便利です。一般的に、それは 8 の倍数になります。

カラーパレット

メガドライブとスーパーファミコンの最初の根本的な違いは、カラーパレットにあります。メガドライブと同様に、スーパーファミコンにもハードコーディングされたカラーパレットはないため、自由に色を選ぶことができます。

やっかいなのは、スーパーファミコンの場合、現在ではけっして一般的ではない、5 BPP(bits per pixel)色を使用していることです。これに対処するには、Gimp でアートワークを作成し、画像を 32 階調の RGB にポスタリゼーションします。すると、5 BPP 色になるように画像を保存していなくても、5 BPP 色の画像を作成できます。このようにして、コンソールで画像の色を正確に表示できます。


このオプションは、Gimp の「色」>「ポスタリゼーション…」にあります。表示されるポップアップウィンドウでポスタリゼーションのレベルを 32 に設定すると、5 BPP 対応の色を作成できます。

画面解像度に関する考慮事項

2 つのシステムにおける次の大きな違いは、画面解像度に関するものです。スーパーファミコンはファミコンの後継機であるため、この 2 つのシステムの画面解像度は似ています。スーパーファミコンの内部解像度は 256 x 224 です。これは、すべての画像が大半の CRT テレビのセーフゾーンに表示されるようにレンダリングされ、画像が欠けることのない解像度です。この解像度は変化しないため、これがアーティストが参照として使用する必要のある画像サイズとなります。

この画像はスーパーファミコンのフルスクリーン解像度を使用するように設定されています。この解像度は、ほとんどのスクリーンモードで使用されています。

オリジナルハードウェアのスクリーンモード

このセクションでは、各種のスクリーンモードについて簡潔に説明します。

2 つのシステムの最も大きな違いは、スーパーファミコンでは 7 つの異なるスクリーンモードで背景グラフィックスをレンダリングできることです。スーパーファミコンでは、特定のスクリーンモードで、1 つのサブパレットを使い、合計 256 色を画面上に一度にレンダリングできます。以下に、最も一般的なスクリーンモードをいくつか示します。

  • モード 1:スーパーファミコンで最もよく使われているスクリーンモードの 1 つです。コンソールの最も平均的な能力を発揮します。モード 1 では、3 つの背景レイヤーを使用できます。内訳は、16 色のサブパレットを使うレイヤーが 2 枚と、4 色のサブパレットを使うレイヤーが 1 枚です。
  • モード 3:一般的に、タイトル画面やストーリー画面など、サイズの大きい静的画像で使用されます。このモードには、2 枚の背景プレーンがあります。1 枚目のプレーンでは最大の 256 色のサブパレットを使用でき、2 枚目のプレーンでは 16 色のサブパレットを使用できます。
  • モード 7: スーパーファミコンの主要機能の 1 つです。モード 7 は、スーパーファミコンのプロモーション資料の多くで大々的に取り上げられていました。背景プレーンで拡大縮小、回転、引き伸ばし、スキューといった画像の変形をリアルタイムで適用できる家庭用コンソールは、これが初めてだったからです。モード 7 は、多くのレーシングゲームや飛行ゲームで見られる疑似 3D 効果の作成に使用されました。

モード 7 で使用する 1 枚の背景プレーンの処理方法は、先述の機能を実現するために、他のスクリーンモードとはかなり異なっています。まず、処理対象である 256 色の背景プレーン 1 枚しかありません。つまり、すべてのスプライトは、背景プレーンのサブパレットの色を共有する必要があります。次に、モード 7 の背景プレーンのサイズは、スーパーファミコンの通常の画面サイズではなく、1024 x 1024 ピクセルです。これは、後でデザイナーの意図するように画面に合わせてサイズ変更されます。

このオフィスではモード 1 を 1 つのサブパレットで使用しています(残りの 2 つは UI 用です)。「Thanks for Playing」画面はモード 3 を使用しており、アーティストは 256 色のパレットを活用できます。

スプライトのサイズ

背景スクリーンモードは複雑でしたが、スプライトのルールは比較的単純です。スーパーファミコンには、メガドライブと同様に複数のスプライトモードがありますが、ゲーム全体で 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 枚という大変な制限があります。この数を超えたスプライトは、画面上にレンダリングされません。

『Fork Parker’s Crunch-Out』では、ゲーム内のすべてのスプライトに 32 x 32 と 16 x 16 の組み合わせを使用しました。

スプライトには、作業用に 16 色のサブパレットを 8 つ設定できます。すべてのレトロコンソールと同様に、サブパレットの最初の色は、透過色に使用する共通色です。他のコンソールと比較して利用できるサブパレット数が多いため、スプライトの色をより自由に選ぶことができます。留意すべきは、256 色のハード制限だけです。

 

次のステップ

このブログ記事では、最新バージョンの Unity で 2D Pixel Perfect を使用して 8 ビットや 16 ビットのレトロゲームを制作する方法を紹介しました。楽しんでいただけたなら幸いです。

2D Pixel Perfect はまだ完成していません。今後、機能が Unity 2019.3 で制作に利用できるかどうか検証を行う予定です。また、Cinemachine 2D との互換性も強化する予定です。

皆さまの 2D Pixel Perfect プロジェクトの開発状況についてお聞かせください。また、2D フォーラムにアクセスして、Unity コミュニティや 2D 開発チームとぜひ交流してください。

16 コメント

コメントの配信登録

コメント受付を終了しました。

  1. Sirius Bizdness

    9月 25, 2019 6:51 am

    I find it a bit odd that you discussed the bit depth of the SNES but not the Genesis…. The reason the Genesis “displays its colors with much greater contrast” is because its palette is stored in 3 bits-per-channel format, meaning it had fewer possible shades than the SNES.

    Also, “BPP” usually refers to the number of bits per *pixel,* not the number of bits per *palette entry.* For the reader’s reference: SNES uses 5 bits per *channel of a palette entry*, for a total of 15 bits per entry.

    Didn’t know about the posterize trick, though. That could be very handy! Now if only I could make it treat 248 as the top of a channel rather than 255….

  2. Platform games

    9月 24, 2019 11:45 am

    Do we have to go through lightweight RP or can we just use the pixel perfect package?

  3. These 8-bit and 16-bit Pixel Perfect posts are great! Thank you very much for creating them! :D
    A question, is there already in Unity a feature to natively (i.e: no use of shaders) indexed palette swapping? If it’s not, is it planned for the (hopefully not too distant) future? :)

    1. Eduardo Oriz

      9月 17, 2019 2:50 pm

      Thanks, we are glad you like them :) there’s no feature for that, but you can find some options on the Asset Store, for example: https://assetstore.unity.com/packages/tools/particles-effects/color-palette-swapper-131292

  4. There’s a bug where clicking UI elements becomes inaccurate if you use a custom 2D Renderer data in the LWRP Data.

  5. Hi, which version of Unity are you using? The available version of LWRP only goes up to 4.10.0

  6. This. Looks. Adorable!! Thanks for taking the time to write about this! Even though I mostly do 3D, I’m definitely gonna save this and look at it later. There’s something magical about this kind of pixel-art/art style… ah…

  7. Christy S. Jones

    8月 6, 2019 6:11 am

    Nice

  8. Isaac Surfraz

    8月 5, 2019 10:25 am

    *Sigh* Someone delete this spam comment.

  9. Daniel Flanigan

    8月 4, 2019 5:54 pm

    “Since SNES is the predecessor of NES…” what?

    1. Eduardo Oriz

      8月 5, 2019 9:53 am

      Thanks for spotting that, text is updated now

  10. Joseph Punton

    8月 4, 2019 1:04 am

    I don’t get this it seems using the lightweight renderer stops pixel snap from working?

    1. Eduardo Oriz

      8月 5, 2019 10:35 am

      Hi Joseph, make sure you look at the Game view and not the Scene view, you can also make sure that “Upscale Render Texture” is activated in the camera component, additionally in the menu Edit>Snap Settings…, you can define the minimum pixel size for the Snapping effect, Move X, Move Y, Move Z with value of 1 should work well

      1. Wenceslao Villanueva Jr

        9月 30, 2019 2:18 am

        He is correct. It appears after including the LWRP, Pixel Perfect settings do not function in or out of editor anymore. I debugged it to the fact that OnPreCull, OnPreRender and OnPostRender don’t seem to be called anymore. Without OnPreCull called, the orthographic size does not get calculated. I struggled with this for a few hours and decided to just drop the LWRP in favor of getting going.

        1. Wenceslao Villanueva Jr

          9月 30, 2019 9:09 am

          Ok, I just figured it out. Don’t import the Pixel Perfect Package from the Previous Blog Tutorial about 8-bit games. The new LWRP for 2D comes with an experimental pixel perfect component. You need to use that one on your camera. Not the one from the Pixel Perfect Camera. It’s posted on the forum and I’m not sure if I can link to it from here but search for “Experimental 2D Lights and Shader Graph support in LWRP”

  11. Good one