2D ゲームを作るためのヒントを一挙公開

Unity を使って 2D ゲームを作ることを計画しているなら、2D テクニカルプロダクトマネージャーの Rus Scammell と 2D プロダクトマーケティングマネージャーの Eduardo Oriz からの役立つヒントをぜひご覧ください。プロジェクトを素早く立ち上げ、プロジェクト全体を通じて効率よく仕事するために役立つヒントばかりです。

2D テンプレートを使えば、新しいプロジェクトをすぐに始めることができます。このテンプレートは Unity Hub から利用可能です。このテンプレートの設定で特徴的なものは以下の通りです。

• 2Dビューを使い、平行投影モードに設定されたカメラが配置され、1 色で塗りつぶされたデフォルトのシーン
• エディターはデフォルトで 2D モードに設定されており、新しいテクスチャはスプライトとしてインポートされるようになっている
• リアルタイムのグローバルイルミネーションは無効にされている
• 2D Animation、2D Pixel Perfect、2D PSD Importer、2D SpriteShape などの 2D 関連機能のパッケージと、これらのパッケージが依存するパッケージがインストール済み

Unity 2020.2 以降では、2D メニュー項目がゲームオブジェクトやアセット作成メニューの中で最上位の項目として表示されるようになりました。また、SpriteShape や Pixel Perfect Camera などの新しい機能のメニューも追加されています。

Pixel Per Unit（PPU）は、2D 開発において重要な概念です。スプライトの PPU は、ワールド空間の 1 ユニット分の距離に対応する、スプライト画像の幅または高さ方向に並ぶピクセルの数を表します。

スプライトの PPU をいくつにするかは早めに検討するべきです。PPU は、ピクセル密度のコントロールの他に、スプライトレンダラーの描画モードやタイルマップなどの他のシステムでのスプライトの使用方法にも影響を与えます。ゲームやプラットフォームのデザインに合ったピクセル密度を選び、不必要に大きなテクスチャは避けるようにしましょう。

2D PSD Importer は、レイヤー化された Adobe Photoshop PSB ファイルを Unity にインポートします。Mosaic などの機能を利用して、インポートしたレイヤーとキャラクターリグから自動的にスプライトシートを生成することができます。そして、Unity はキャラクターのスプライトをソースファイルでの配置を再現する形で再構築します。このインポーターは、2D アニメーションシステムや複数レイヤーで構成されたキャラクターを扱うワークフローで最適に動作するように設計されています。

最終的な色を画面に表示するために使うパスの数を減らすことを検討してください。ピクセルが半透明の場合、最終的な色を計算する際には、重なり合うすべてのピクセルについて考慮する必要があります。透明度を持つピクセルの描画のオーバードローが起きると、GPU のパフォーマンスが低下します。特にパワーの低いデバイスや高いフレームレートが要求される場合、この影響は顕著です。シーン内のスプライトはすべて透明度を持つとみなされますが、この場合でもオーバードローを減らす方法があります。

Unity はスプライトマスクの内側のピクセルのみをオーバードローします。完全な矩形の場合はその領域全体がオーバードローされますが、メッシュタイプが Tight に設定されていると、生成されたメッシュはスプライトの輪郭だけに沿って描画され、何もない部分は無視されるため、オーバードローされる範囲が狭くなります。メッシュの輪郭をさらに精密にコントロールしたい場合は、スプライトエディターから変更することができます。

重なり合っている静的なスプライトを結合することで、オーバードローを減らすこともできます。スプライトを移動する必要がない場合や、視差効果のためにスプライトを必要としない場合は、レベルデザインが完了した段階で、それらを結合することを検討してください。

静的な 2D コライダーを持つスプライトが多数ある場合は、それらを Composite 2D Collider コンポーネントを使って組み合わせます。これにより、パフォーマンスが向上し、面全体でよりスムーズな衝突が実現できます。Composite Collider はタイルマップと組み合わせて使うことができます。上の画像では、画面上の紫色のタイルがコライダーとして使われています。この機能を有効にするには、コンポーネントを追加し、Composite のチェックボックスをオンにします。

Composite 2D Collider は、親のゲームオブジェクトと共に使用することもできます。この時は、Used by Composite にチェックを入れて、子のコライダーを有効にするようにしてください。コライダーを最適化するもう 1 つの方法は、ゲームオブジェクトと相性の良い単純なポリゴンを手動で描くことです。

スプライトのようにゲームオブジェクトにアタッチされたレンダラーには、多少のオーバーヘッドがあります。静的なスプライトを多数、効率よく表示するためには、Tilemap Renderer を使うと、より効率的で便利な方法でゲームデザインができます。1 つのレンダラーで何百ものスプライトを表示することができます。スプライトを多数表示したいが、ソートを必要としない場合は、Tilemap Chunk Mode を使うと CPU やメモリの使用量を減らすことができます。これは、ローエンドのデバイスをターゲットにしている場合には重要なヒントです。この方法を使うには、同じタイルマップ内にすべての静的なタイルを配置し、Chunk Mode を有効にすれば良いです。

すべてのタイルが同じスプライトアトラスに入るようにしてください。シーンビューではタイルが正しく表示されないかもしれませんが、再生モードに入ると正しくソートされます。アプローチの 1 つとして、レベルデザインの段階では Individual Mode を使い、公開する準備ができたら Chunk Mode に変更するという方法があります。

スプライトを正しくソートする必要がある場合、たとえば、各タイルの前後にキャラクターを移動させたい場合には、Individual Mode を使用します。スプライトを移動させたり、スプライトにゲームプレイ上の機能を持たせたりする必要がある場合は、Regular Mode を使用してください。

Sprite Shape は、有機的な形状やステージをデザインするための 2D ツールです。デフォルトでは、Sprite Shape の API はスプラインのノードを実行時に変更できるようになっています。実行時の変更を必要としない場合は、スプラインのジオメトリをベイクしたりキャッシュしたりすることでパフォーマンスを向上させることができます。Sprite Shape Controller を選択し、Edit Spline を有効にしてから Cache Geometry を選択してメッシュをベイクします。Unity 2019 LTS 以降のバージョンを使用していて、実行時にスプラインを変更する場合は、Burst パッケージをインストールすることで大幅なパフォーマンス向上を得ることができます。これを行うには、パッケージマネージャーに移動して、Burst のバージョン 1.3 以降をインストールしてください。

Sprite Shape Profile を使って、ベクター描画ソフトと同じような環境をデザインすることができます。Sprite Shape Profile は、ゲームプレイや装飾的な要素にも使用できます。アセットの使用量を少なく抑えつつ、さまざまなアートスタイルに対応し、広い領域を素早く埋めていくことができます。

スプライトレンダラーの描画モードは、アセットのサイズを節約し、レベルデザインのプロセスをより楽しいものにしてくれます。Tileable Sprites を使えば、スプライトを引き延ばすことなしに、同じスプライトを使ってさまざまなサイズのゲームオブジェクトを作成することができます。スプライトエディターに移動し、黄色いハンドルを動かしてスプライトのタイル化する部分を枠で囲みます。その指定を適用してからゲームオブジェクトに移動し、スプライトレンダラーの Draw Mode（描画モード）を Tile Mode に変更します。

スプライトを拡大縮小しながら配置しつつ、シャープで均整の取れたブロックを使って、9 スライスのスプライトを使ってステージをデザインすることもできます。スプライトエディターで、タイル化するエリアを選択して、繰り返しではない隅の領域に隅の部分のパーツが収まるようにしてから、Draw Mode を選択してスライスします。

2D ゲームのデザインをしていると、ゲームオブジェクトの一部が同じソーティングレイヤーやソート順序に入ってしまうことがあります。スプライトを移動させる際にレイヤーをたくさん作って、正しい順番で表示するようにロジックを組むこともできますが、これは効率的ではありません。このような場合に、Unity にスプライトの表示順を指示する方法は、プロジェクト設定の Transparency Sort Mode（透明度ソートモード）を使うやり方です。Unity は、Vector2 で与えられる方向（この設定では X 軸と Y 軸で定義されています）に沿った順番でスプライトをソートします。Unity のプロダクトマーケティングマネージャーEduardo Oriz とプロダクトマネージャーRus Scammell が登場する Unite Now 講演の、9 分 15 秒付近でこの最適化を設定する手順を見ることができますので、ぜひご覧ください。

Unity でフレームバイフレームのアニメーションクリップを作成するのは簡単です。プロジェクトウィンドウでスプライトのシーケンスを選択し、シーンビューまたはヒエラルキーウィンドウにドラッグします。これでアニメーションクリップとアニメーターが自動的に作成されます。

既存のアニメーターにアニメーションクリップを追加したい場合は、アニメーションフレームをアニメーターのゲームオブジェクトにドラッグするだけです。クリップがアニメーターに追加されます。スプライトごとに別のゲームオブジェクトを作成したい場合は、Alt キーまたは Option キーを押しながらアニメーションフレームをヒエラルキーにドラッグしてください。

Unity はフレームバイフレームのアニメーションとボーンベースのアニメーションの両方に対応しています。この 2 つのアプローチの主な違いは以下の通りです。

フレームバイフレーム

• 毎フレーム異なるスプライトを使う
• アニメーションクリップを追加しようとすると追加のスプライトが必要になる
• フレームレートとスピードは通常一定である
• トランジションアニメに追加のスプライトが必要になる
• 2D インバースキネマティクス（2D IK）と組み合わせては使えない

ボーンを使ったアニメ

• 各アニメーションフレームで同じスプライトを使う
• 各アニメーションクリップで同じスプライトを使う
• アニメーションのスピードが変わって問題なく動く
• アニメーションシステム側でクリップのトランジションを作れる
• 2D IK と上手く協働する

Burst/Collections パッケージをインストールすると、多数のボーンや、頂点数の多いスプライトメッシュを使う 2D アニメーションのパフォーマンスが最適化されます。アニメーション化されたスプライトの実行時の変形もパフォーマンスが向上します。これは、2D Animation パッケージが Burst コンパイルと低レベルの配列ユーティリティを使用して、Unity のスプライトメッシュの変形処理を高速化することを可能にすることで実現されています。

この機能を利用したい場合は、2D Animation 5.0.x と Unity 2020.2 を使ってください。また、Burst パッケージ 1.3.3 以降をインストールする際に、プレビュー版パッケージの Collections もインストールしてください。

リギング用のスプライトを準備する時に、メッシュを完全にコントロールすることができます。Skinning Editor には自動テッセレーションオプションが用意されています。しかし、メッシュツールを使って頂点の追加・削除を行い、必要なメッシュを作成してこれをカスタマイズすることができます。

ボーンベースのキャラクターに 2D コライダーと Rigidbody 2D コンポーネントを追加して、2D 物理システムを介してモーションを駆動させます。上の画像は Eduardo と Rus の講演動画から取った例ですが、ここではカプセルコライダーが各ボーンと、Rigidbody 2D コンポーネントにそれぞれ追加され、それらはヒンジジョイントで接続されていました。各ジョイントの角度制限を使って可動範囲を制限したり、ジョイントを介して接続された Rigidbody コンポーネントが互いに衝突するかを切り替えたりすることができます。

すべてのアセットで一貫したピクセル密度を保つようにしてください。例えば、プロジェクトで 32 PPU と設定している場合、上の画像の左側のタイルのように、1 ユニットに 32 ピクセルが入ることが前提になります。

デフォルトの 2D カメラは、カメラの中心から垂直方向のユニット数でサイズを表現しています。ここに示した画像の例では、縦に 10 枚のタイルを収めることができます。

シーンビューにアセットを追加したときに、元の参照画像と比較してアセットが小さすぎる場合は、解像度の不一致が原因である可能性が高いです。

Unity のスプライトの PPU はデフォルトでは 100 に設定されています。スプライトアセットの設定をプロジェクトで設定している 32 PPU に変更すると、スプライトは正しいサイズになります。

デフォルトでは、ハードエッジを滑らかにするバイリニアフィルタリングがアセットに対して有効になっていますが、レトロスタイルのピクセルが目立つ外観にしたい場合は、Filter Mode を Point に変更して、最初に定義されたスクリーン空間を埋めるシャープな外観のビジュアルを得ることができます。

多くのアセットをプロジェクトにインポートする場合、個々のスプライトの設定をプロジェクトの設定に合わせて変更するのは手間がかかります。その代わりに、インポートテンプレートやプリセットを作成して、インポートしたすべてのアセットが望みの設定になるようにしておきましょう。その方法は以下の通りです。

1. 使用したい設定を持つアセットを選択する
2. スプライトアセットの横にある設定アイコンをクリックして、選択したアセットからテンプレートを作る
3. 役割が分かりやすい名前を付けてテンプレートを保存する
4. 保存したテンプレートをデフォルトにして、すべての新しくインポートされたアセットがその設定を持つようにする（プリセットアセットはプロジェクトビューで確認することができます）。

ピクセルアートを使う場合、画面には常に同じ数のピクセルが表示され、それらすべてのピクセルが同じサイズになるようにする必要があります。まず、カメラに Pixel Perfect Camera を追加します。次に、アセットの PPU をピクセルアートで使用する値に設定します。

Pixel Perfect Camera コンポーネントを追加すると、再生モードでカメラを制御するようになります。また、Run in Edit Mode を有効にすると、エディターで変更を確認することもできます。

プロジェクトでは、キャラクターやオブジェクトの位置、回転、サイズは変更することがあります。デフォルトでは、スムーズに補間されてしまいますが、プロジェクトの PPU で示されているピクセルアートの制限を忠実に守りたい場合は、Upscale Texture を有効にしてください。ゲームオブジェクトが 1 ピクセル単位で動くようになります。また、回転とスケールの変更もビジュアルの制約を守った形で行われるようになります。レトロ感のあるゲームのビジュアルを作るヒントをまとめた記事が、8 ビットゲームスタイル編と 16 ビットゲームスタイル編の 2 本出ておりますので、こちらもぜひご覧ください。

Sorting Group：Sorting Group を使用すると、2D レンダラーをまとめてグループ化することができます。各キャラクターのレンダリング順序を正しく保つために、Sorting Layer やOrder in Layer をお使いの方もいると思いますが、これらの設定は、パーツ同士が重なっている時は上手く機能せず、パーツが混じり合ったような表示になってしまいます。

各キャラクターのルートとなるゲームオブジェクトに Sorting Group を配置することで、レンダラーをグループ化して 1 つのグループとして並べ替えることができます。Sorting Group を使うと、キャラクター同士が混じり合うことなく、グループとしてソートされるようになります。Sorting Group は、すべての 2D レンダラだけでなく、パーティクルシステムについても機能します。

Sprite Atlas:このアセットは、複数のスプライトを 1 つのテクスチャにまとめたものです。Unity では、この 1 つにまとめたテクスチャを使って、1 つのフォルダーにある各スプライトに対して複数のドローコールを発行するのではなく、ドローコールを 1 回だけ発行することで、パフォーマンスを向上させることができます。

スプライトアトラスにフォルダーを追加することで、制作の途中でパックされたフォルダーの内容を変更するだけで、スプライトを自由に追加したり削除したりすることができます。

また、同じソースアセットから、さまざまなプラットフォームをターゲットにして、サイズや圧縮設定が異なるスプライトアトラスのバリエーションを作成することも可能です。

皆さんのゲームに合わせて、スプライトアトラスの作成について戦略的に考えるべきです。スプライトアトラスは、生産性、柔軟性、パフォーマンスのバランスが取れるように設計されています。

私たちの発信する、2D アーティストの皆さんに役立つ情報をぜひご覧ください。Odd Bug 社が同社のゲーム『Tails of Iron』で採用した、2D ライトで雰囲気を出す方法をご覧いただいたり、2D サンプルプロジェクト「The Lost Crypt」をダウンロードしていただいたり、2D アセットに最適な解像度を選択するための詳細なガイドをご覧いただいたりすることができます。最後になりましたが、Eduardo と Rus の Unite Now でのプレゼンテーションは下の動画でご覧いただけます。