この記事では、Unityで、ピクセル画像が
- どんなルールに基づいて
- どのぐらいの大きさで表示されるのか
を明らかにして、Unityで2Dゲームを作る時
「どれぐらいのサイズの画像を用意すれば良いのか」
が誰でも分かるようにします。
しのごの言わず、まず画像を表示してみる
iPhone8(解像度:750×1334)シミュレータに、iPhone8の画面解像度と同じ、750×1334の画像を配置してみます。
(こんな画像。縁が分かるように、1pxの赤い枠を追加しています)
すると…
画像がはみ出すっ！！
(※白い線がiPhone8の画面サイズ)
なんで?
なぜかというと、Unityは、表示端末の解像度に関係なく、「10ユニット」「縦に」表示する仕組みだからです。
「ユニット」というのは「Unityで使われるサイズの単位」です。
1ユニットって何px?
1ユニットが何pxになるかは、画像ごとに定義されていて、先程iPhone8の背景として置いた画像を、Projectフォルダから選んでInspectorを見ると「Pixels Per Unit」に定義されています。
「100」ということは、1ユニット=100px
Unityは、表示端末の解像度に関係なく、「10ユニット」「縦に」表示する仕組み
というのは先程言った通りなので、つまり
Unityは、表示端末の解像度に関係なく、「1000px」「縦に」 「拡大/縮小して」表示する仕組み、という事です。
試しに、先程の画像(750×1334)を、(750x 1000 )に大きさを変えて、配置してみます。
すると…
縦がぴったり！！
シミュレータの枠も表示させてみると、上下に1pxの赤い線が見えます。(見えづらいけど)
縦が10ユニット=1000pxは分かったけど、横は何pxになるの？
横の表示サイズは、iPhone8の場合、縦が元々1334pxだったのを1000pxに縮めて表示しているので、その比率に合わせて、横は元々750pxの所が
750 x (1000/1334) ≒ 562px
になります。
では、試しに、先程のiPhone8の背景に配置した画像を「562×1000」に変えて、配置してみます。
ピッタリ！
シミュレータの枠も表示させると、上下左右に1pxの赤い線が見えます。(見えづらいけど)
おまけ
Unityは、表示端末の解像度に関係なく「10ユニット」「縦に」表示する仕組み、と言いましたが、これはMain Cameraを選択すると「Size」の所に定義されています。
この値の2倍、5×2=10ユニットが、縦に表示されるサイズとなります。
もっと高解像度にしたい場合は、このSizeを変更してみて下さい。
まとめ
Unityはデフォルトでは
- 「縦に10ユニット=1000px」
- 「端末の解像度に関係なく」
表示されます。
横は、端末の比率に合わせて
端末の横解像度 x (1000 / 端末の縦解像度) px
表示されます。
最近はアスペクト比16:9の端末が多いので、その場合、562×1000、表示されます。
(iPhone8のケースと一致)
