この記事の内容は「Unity blog - 2D アートアセットの解像度選択」の内容を参考にしてゲームの画面サイズをどのように決めて、どのように設定するのか、その一例を記録したものです。
- 概要・基本的な考え方
- 例：どういったゲーム画面を考えるのか？
- 設定
- キャンバス (Canvas) の設定 (Screen Space 編)
- キャンバス (Canvas) の設定 (World Space 編)
- 応用のための学習
- サンプル
- 参考
2022 年 5 月加筆
２Dで好まれる Canvas を利用したパターンの記事「Unity「2D game art, animation, and lighting for artists」を日本語で読む」を書きました。Unity 公式が 2D クリエイター向けに公開した中にカメラの設定が含まれています。英語の資料なので、和訳を進めています。2020 年 8 月加筆
２Dで好まれる Canvas を利用したパターンの記事「Unity Canvas を使った２Ｄゲーム画面設計と Reference Resolution のプラクティス」を書きました。使い分けしていただけると幸いです。使い分けの参考記事は Unity スマートフォン（複雑なアスペクト比）対応とレスポンシブ UI の基本 になります。
概要・基本的な考え方
まず、この記事の大筋として２Ｄゲームにおける画面の考え方は、次を参考にするとベターだと考えています。
2D ではスケールの問題の重要性は下がりますが、プロジェクトで物理演算を使う場合は、やはりスケールのことを考慮するほうがいいでしょう。Tilemap を使っている場合は、シンプルに取り回せるように、1 タイル = 1 ユニットになるようスケールを設定するのがいいでしょう。
- Unity Blog - Unity シーン内での計測より
Unity で使われる単位は px （ピクセル）ではなく「ユニット」と呼ばれる単位（距離、サイズを表現するもの）です。
なので、「2D ゲームの画面（メインカメラ）サイズの選択」という問題は、縦と横はどういった「ユニット」比になるのか、という話にも置き換えつつ、話を進めていきます。
例：どういったゲーム画面を考えるのか？
今回は、Game Boy 版のテトリスの画面サイズを考えることにしました。
テトリスのブロック操作部の仕様 (Dimension) は次のとおり。（１マス＝１ブロック）
- 縦 18 マス
- 横 10 マス
ブロックは、次を作成・使用しました。画像サイズは (20x20) です。これがユニットのサイズの基本にしようと思います。
言い換えておくと、ユニット比だと 10x18 をサポートすることが目安になりそうです。（横に１０ユニット、縦に１８ユニット配置できること）
さて、ゲーム画面の構想ができたので、画像をインポートして設定をはじめてみます。
設定
画像のインポート
Unity は、画像をインポートしたとき、画像は Pixels per Unit (PPU) というパラメーターを持つ Assets（素材） として扱われます。
ブロックの素材は、元の画像サイズの pixel 数にあわせて PPU を「20」に設定します。（１ユニットに収めるピクセル数だから）
- ブロックの Pixels Per Unit を
20に設定 - ブロックの Filter Mode を
Point (no filter)に設定
画面のアスペクト比
参考にしたゲームボーイ (GB) の画面サイズは、160 x 144 なので比率は 10:9 です。ここでは、近い比率の 5:4 を選択してみます。補足として、Full HD の場合は、1280 x 720 など。これは 16:9 です。（比率計算用リンク）
- Game のアスペクト比を
5:4に設定
想定される最大の解像度を選び、プロジェクト全体での指標に設定するべきであるということです。チームメンバーはその指標に基づいてアセットの製作における決定を下せます。
- Unity Blog - プラットフォームに合わせた解像度を指定するより
メインカメラ (Main Camera) の設定
ProjectionをOrthographicに設定 2Sizeを9に設定
Projection の設定値を Orthographic に設定したときのプロパティ、Size の値「９」は、画面の縦半分に Unit がいくつ入るのかを指定しています。
今回の仕様では、縦１８ブロックなので、半分の「９」になります。 ただし、
Sizeの設定は、後述のキャンバスのレンダリングがScreen SpaceであればCanvas Scalerの設定を優先するように思います。Sizeの設定は「0」でもない限り、あまり気にする必要がない。（自動的にScaleを調整してくれるから）
キャンバス (Canvas) の設定 (Screen Space 編)
キャンバスの Render Mode の設定で、このあとの描画方法が大きく異なることになります。3
Render Mode のオプションは次のとおり。詳細は「マニュアル」を参照。
- Screen Space
主に Canvas Scaler といった画面サイズ設定に依存する UI 用のスクリーン空間 - World Space
(X, Y, Z) で表される通常の 3D 空間
2D ゲームにおいては、 Screen Space でも World Space でも、好みくらいの話で、どちらでも問題なく作ることができそうです。
ただ、uGUI を利用したほうが楽できることは多そうなので、利用する方向から考えると完成がはやそう。Canvas を利用した設計 は必ず検討したほうがよいと思います。
World Space は自由度が高く Unit の設定が重要になります。Screen Space は、キャンバスのサイズがカメラサイズになり、キャンバスに追加されるプロパティ Canvas Scaler で制御するのが楽ではないかと思います。
Screen Space を利用するとして、話をすすめます。Canvas Scaler の設定値はざっくり次のとおり。詳細は「マニュアル」。
- Constant Pixel Size
ピクセルを基準に GUI のサイズを決定 - Scale With Screen Size
指定した画面サイズを基準に GUI を拡大・縮小する - Constant Physical Size
物理的単位 (mm, cm, inch...) を基準に UI のサイズを決定
今回は、縦方向のブロック数＝高さがわかっています。PPU = 20 のブロックを 縦に 18 個積むので高さは 360 です。横幅は 5:4 のアスペクト比率を予定しているので 450 です。
というわけで、指定した画面サイズを基準にできそうなので、Scale With Screen Size の設定値を使ってみることにします。
CanvasのRender ModeをScreen Spaceに設定Canvas ScalerのUI Scale ModeをScale With Screen Sizeに設定Canvas ScalerのReference ResolutionをX:450, Y=360に設定Canvas ScalerのMatchをHeight:1に設定Canvas ScalerのReference Pixel Per Unitを20に設定
イメージの配置
キャンバス内に uGUI から image を追加して、インポートしたブロックの素材を Source Image に設定します。
Rect TransformのWidthを20に設定Rect TransformのHeightを20に設定Pos XとPos Yを(0, -10)に設定
Posはイメージの中心を基点と（現在）しているため20 x 20の画像だと Pos は 10 ズレて (0, -10) にする。x 座標の位置はあとで調整するんで、とりあえずの「0」。
縦方向に１８個のブロックを並べて、２列にすると下図のようになります。
それらしいウィンドウやテキストなんかを追加することで、基本画面の完成。落ちてくるブロックの描画範囲もわかりやすいですね。
このような感じで、画面のアスペクト比率を設定して、ブロックのサイズを決めて、見立てどおりに画面サイズの選択と設定ができたと思います。
キャンバス (Canvas) の設定 (World Space 編)
おまけとして、World Space 座標系だとどうなるか。
CanvasのRender ModeをWorld Spaceに設定CanvasのEvent CameraをMain Cameraに設定
レンダリングが World Space の場合は、Screen Space とは違って Scale With Screen Size のような UI 用のスクリーン座標に変換するといったことをしません。
2D Object から Sprite を追加します。Sprite は Transform で位置を設定してください。（Height, Width を持たないだけで同じこと）
uGUI の Image と Sprite の使い分けは「テラシュールブログ - uGUIのImageとSprite Rendererの使い分け」などを参考に。
SpriteのTransformのPositionを設定
親子関係のよいポイントとして、親に Empty を追加して、親の位置を padding として扱えば、簡単に始点の位置を調整できます。
こちらの場合でも、カメラに設定した Orthographic の Size に対応して、シンプルに配置ができました。基本的なアスペクト比 5:4 を維持できる限り、この設定でも十分使えそうです。
応用のための学習
環境のアスペクト比が一定しないスマートフォンなどに対応する場合の Tips は、次の記事でまとめました。
サンプル
自分が作成したテトリスのプログラムを GitHub に公開しています。カメラの設定やサイズを考えるキッカケになったプログラムで、一応ブロックを消して遊べます。
はじめて Unity のゲームを作ったプログラムなので、最適化できていなかったり、画面サイズも考慮せずに（できずに）作ってます。（横１２マスじゃなくて１０とのご指摘が入ったりも）
おまけのおまけで、Screen Space の設定でテトリスのブロックを配置しただけのプロジェクト。
参考
- Unity blog - 2D アートアセットの解像度選択
- (kan のメモ帳 - 画面のサイズ(CameraのorthographicSize)をアスペクト比に合わせて自動で調整する
- harddrop - tetris (Game Boy)
- テラシュールブログ - uGUIのImageとSprite Rendererの使い分け
