目次
解像度とアスペクト比
レトロゲームのアスペクト比は1:1の正方形！？
- ファミコン：256×240（内部比率 16:15）
- スーパーファミコン：256×224（内部比率 16:14）
スーパーファミコンのほうが縦解像度が少ない点が気になるが、これは表示領域（オーバースキャン領域）との関係によるものである。
横解像度はどちらも256ドットで共通しており、設計思想としてはほぼ同系統である。
アスペクト比については、内部解像度だけを見ると16:15や16:14と正方形に近い比率になる。しかし、当時の表示装置は4:3のブラウン管テレビである。
ブラウン管では、ゲームの256ドット幅はそのまま表示されるのではなく、4:3の画面いっぱいに引き伸ばされる。そのため、実際の表示では横方向に約1.25倍程度拡大されて表示されていた。
つまり、当時のゲームは「4:3で横に引き伸ばされる前提」で設計されている。
現在の正方形ピクセルのディスプレイで256×240をそのまま表示すると、１つ目の画像のように、横方向がやや詰まって見えることになる。
アスペクト比は4:3としたら解像度は？
レトロゲームを完全再現したいわけではないので、この辺の仕様差は深追いせず、
レトロゲーム的な横解像度（256ドット）を基準に考えると、
- 256×192（4:3）
となり、Y方向を48ドット分削ることになる。
縦240を基準に4:3へ合わせると、
- 320×240（4:3）
となり、横方向が256より広くなる。
ファミコンなどの背景画像（256幅前提）をそのまま使う場合は、256基準で設計しないとトリミングが発生する。
背景を新規制作するのであれば、どちらの解像度設計でも問題はない。
DTDの解像度とアスペクト比
ファミコンのアスペクト比には合せない
まず初めに、アスペクト比を決めるところからスタートしよう。ファミコンと同じ4:3だとタワーディフェンス型のゲームは横幅が足りず、更に、DTDでは画面中央にタイピングに関する画面を表示するので、そのエリアも確保したい。そうなると多くのPCが採用している16:9のアスペクト比が良いように思う。
スーパーファミコンの解像度256×224（内部比率 16:14）から16:9に変更する。
縦の224を基準にすると
- 398.2222×224
横の256を基準にすると
- 256×144
もし昔のTVが4:3ではなく16:9だったら、ファミコンの解像度は256×144になっていたかな？
16×16のマップチップで考えると、横16、縦9という数になる。
アスペクト比16:9での最適解像度は？
横16個だと少ないので、倍の32個にしたい。そうなると解像度は512×288だ。この解像度の整数倍は
- 256×144（1倍）16×9
- 512×288（2倍）32×18
- 1024×576（4倍）64×36
- 1536×864（6倍）96×54
- 2048×1152（8倍）128×72
となってしまい、よくある画面解像度と異なってしまう。
よくある画面解像度は次のとおりだ。
- 320×180（1倍）20×11と余り
- 640×360（2倍）40×22と余り
- 1280×720（4倍）80×45
- 1366×768（例外）85と余りx48
- 1920×1080（6倍）120×67と余り
- 2560×1440（8倍）160×90
16×16のマップチップとの相性が悪い。そこで、マップチップが欠けないように16の倍数を優先し、余る分を余白（+XX） とすると、次のようになる。
- 320×176(+4)（1倍）20×11
- 640×352(+8)（2倍）40×22
- 1280×704(+16)（4倍）80×44
- 1280(+86)x704(+64)（4倍）80×44
- 1920×1056(+24)（6倍）120×66
- 2560×1408(+32)（8倍）160×88
16:9の解像度に近い16の倍数の仮想解像度が得られる。
ということでDTDのアスペクト比は16:9（内余白あり）とし、解像度はマップチップの数的にもちょうど良さそうな640×352(+8)に決めた。
結論
仮想解像度は 640x352 とし、上下 8px（上、下それぞれ 4px ずつ）を余白として扱う。実行時は各解像度に整数倍で拡大し、余った部分は黒帯（余白）として描画しない。
画面解像度が 1366x768 のユーザーは、2倍に拡大され、左右は 43px ずつ、上下は 32px ずつ黒帯が表示される。
Unityのカメラ周りの設定
Main Camera に Pixel Perfect Camera を追加すること
カメラ
Main Camera (Pixel Perfect Camera)
- Reference Resolution：
640 x 352 - Assets Pixels Per Unit：
16 - Upscale Render Texture：
ON（ドットの歪み防止に推奨） - Pixel Snapping：
ON - Crop Frame：
XとYをON（黒帯を出すため） - Stretch Fill：
OFF
キャンバス
Canvas (UI)
- Render Mode：
Screen Space - Camera - Pixel Perfect：
ON - Render Camera：
Main Cameraをアサイン
Canvas Scaler
- UI Scale Mode：
Constant Pixel Size（スクリプトにより自動制御） - Reference Pixels Per Unit：
16
Pixel Perfect Canvas Scaler Sync（自作Script）
- Canvas Scaler：自分自身のコンポーネントをアサイン
- Reference Width：
640 - Reference Height：
352
パネル
キャンバスの下に１つ仮のパネルを配置して、その下にUIを組み立てる。画面サイズが変わって「黒帯」が出たときも、UIが常にゲーム画面内に収まるようにする。
Rect Transform
- Width：
640 - Height：
352 - 揃え：
Center, Middle
スプライト
スプライトのインポート設定
- Texture Type：
Sprite (2D and UI) - Filter Mode：
Point (no filter) - Compression：
None - Pixels Per Unit：
16または8- 基本 (16bit風)：
16 - 粗め (8bit風)：
8（16基準より2倍大きく表示される）
- 基本 (16bit風)：
※Asepriteファイル（.aseprite）を直接使用する場合
ファイルを右クリック ＞ Properties から Pixels Per Unit を設定可能です。Compression 等はインポーターが自動的に None として扱ってくれます。
Image（シーン配置時）
- Native Size：スプライトを割り当てた後、Set Native Size ボタンをクリックして、PPUに基づいた正しい比率（1ピクセル＝1ドット）を維持すること。