スプライトサイズを先に決める理由
ドット絵は、描いたあとにサイズを変えるのが難しい素材です。ドットの大きさが違う絵を混ぜたり、整数でない倍率で拡大・縮小したりすると、ドットの幅が不揃いになり、ドット絵らしいくっきりした見た目が崩れます。
また、スプライトのサイズは、PPUやReference Resolutionといったカメラの設定、画面に映るタイルの数、必要な作業量にまで影響します。描き始めてから変えると、すべての素材を描き直すことになりかねません。そのため、制作の早い段階で決めておくのがおすすめです。
スプライトサイズとは
スプライトサイズは、スプライト(ゲーム内で表示する画像)の縦と横のピクセル数です。「32×32」なら、横32ドット・縦32ドットの画像という意味です。
Unityでは、スプライトがワールド(ゲーム内の空間)で占める大きさは、次の式で決まります。
ワールド上の大きさ(ユニット) = スプライトのピクセル数 ÷ スプライトのPPU
たとえば、32×32ピクセルのスプライトをPPU 32で取り込むと、1×1ユニットになります。PPUの意味は、UnityのPixel Perfect Cameraとは?PPUとReference Resolutionをやさしく解説で説明しています。
よく使われるサイズと特徴
ドット絵では、16、32、64といった数字がよく使われます。ここでの数字は、おもに「基本になるタイル1枚のサイズ」や「キャラクターの大きさの目安」です。
| サイズ | 特徴 | 向いているもの |
|---|---|---|
| 16×16 | 1枚あたりのドット数が少なく、描く手間が小さい。表現はシンプルになり、レトロな雰囲気が出やすい。 | タイル、小さなキャラクター、アイテム |
| 32×32 | 細部や表情をある程度描ける。手間と表現力のバランスが取りやすい。 | キャラクター、タイル、UI |
| 64×64 | 細かい模様や陰影を描ける。描く手間は大きく、アニメーションの枚数が増えると負担も増える。 | 大きめのキャラクター、敵、背景パーツ |
キャラクターが正方形でなければならないわけではありません。たとえば、タイルが16×16のゲームで、人型のキャラクターを16×32(タイル1枚ぶんの幅で、高さ2枚ぶん)にする、といった決め方もよくあります。
また、スプライトのサイズは、2のべき乗(16、32、64…)である必要はありません。ただし、Unityのインポート設定にあるNon-Power of 2を「None」にしておかないと、取り込み時にサイズが変わってしまうことがあります。くわしくは、Unityでドット絵がぼやける・にじむ原因と直し方をご覧ください。
サイズを決める3つの観点
1. どのくらいの細かさで描きたいか
サイズが大きいほど、細かい表現ができます。一方で、1枚あたりのドット数が増えるため、描く手間も増えます。歩く、走る、攻撃するといったアニメーションを付けると、必要な枚数ぶんだけ作業が積み重なります。
1人で制作する場合は、「最後まで描き切れるサイズ」を優先するのが現実的です。迷ったときは、小さめのサイズから始めるほうが、完成までたどり着きやすくなります。
2. 画面にどれくらいタイルを映したいか
画面に映る範囲は、Reference Resolution ÷ タイルのサイズで決まります。同じReference Resolutionでも、タイルが大きいほど、映るタイルの数は少なくなります。
| Reference Resolution | タイル16px | タイル32px |
|---|---|---|
| 256×144 | 16×9枚 | 8×4.5枚 |
| 320×180 | 20×11.25枚 | 10×5.625枚 |
| 480×270 | 30×16.875枚 | 15×8.4375枚 |
| 640×360 | 40×22.5枚 | 20×11.25枚 |
タイルの数が割り切れなくても、画面の端でタイルが途中で切れるだけで、動作上の問題はありません。ただし、タイルがきれいに収まる形にしたい場合は、Reference Resolutionの幅をタイル数で割った値を、タイルのサイズにします。16:9なら、幅を16で割ると、画面に16×9枚のタイルがちょうど収まります。
| タイルのサイズ | Reference Resolution(16×9枚が収まる) |
|---|---|
| 16px | 256×144 |
| 24px | 384×216 |
| 32px | 512×288 |
| 40px | 640×360 |
なお、16:9の画面を整数倍で埋めたい場合は、1920×1080を割り切れるReference Resolution(320×180、480×270、640×360、960×540など)が便利です。「タイルをきれいに収めたい」と「モニターを整数倍で埋めたい」の両方を満たす値は限られるため、どちらを優先するかを決めておきましょう。
3. 偶数のサイズにする
スプライトの幅や高さは、できるだけ偶数にします。奇数だと、基準点(ピボット)を中心に置いたときに、スプライトの端がピクセルのグリッドから半ピクセルずれます。その結果、ドットの幅が不揃いに見えたり、位置がぼやけたりする原因になります。
あわせて、サイズをPPUの倍数にしておくと、スプライトのワールド上の大きさがちょうどユニットの整数倍になり、タイル(1ユニット)にぴったり揃えやすくなります。
決める順番
- タイルのサイズを決める:描ける手間と、表現したい細かさから、16px・32pxなどの基本サイズを選びます。
- PPUを決める:基本のタイルのサイズに合わせます。16pxのタイルならPPU 16、32pxならPPU 32が一般的です。スプライトのPPUも、カメラと同じ値にそろえます。
- キャラクターなどのサイズを決める:タイルを基準に、タイルの何枚ぶんにするかを決めます。幅と高さは偶数にします。
- Reference Resolutionを決める:画面に映したいタイルの数と、遊ばせたいモニターの比率から選びます。
- 画面で確認する:仮のスプライトを置いて、画面に映る大きさと、各モニター解像度での拡大倍率を確認します。
- 本番の素材を描き始める:サイズが固まってから描きます。
手順4と5は、行き来しながら調整することになります。素材を描き込む前に、仮の四角形でも構わないので、画面で確認しておくと手戻りを減らせます。
失敗しやすい点
| 失敗 | 起こること | 対策 |
|---|---|---|
| サイズの違うドット絵を混ぜる | 1ドットの大きさが素材ごとに違い、統一感がなくなる。 | プロジェクトで基本のタイルサイズを決め、素材はその規格で描く。 |
| 整数でない倍率で拡大・縮小する | ドットの幅が不揃いになる。 | 素材は、最終的に使うサイズで描く。拡大は整数倍にする。 |
| 幅や高さが奇数 | 端が半ピクセルずれる。 | 偶数のサイズにする。 |
| スプライトのPPUがカメラとずれている | 画面上の大きさが変わる。倍率が整数にならないと、ドットが崩れる。 | カメラとスプライトのPPUを同じ値にそろえる。 |
| いきなり大きなサイズで描き始める | 描く手間が膨らんで、完成しなくなる。 | 描き切れるサイズから始め、必要なら後で増やす。 |
| Reference Resolutionより大きいスプライトを作る | 画面に収まらない。 | 画面の大きさに対して、スプライトが占める割合を確認しておく。 |
当サイトのツールで確認する
当サイトの「Pixel Perfect Camera 確認」では、PPUとReference Resolutionを入力しながら、スプライトのサイズ(幅・高さ)や、スプライトごとのPPUを変えた場合の見え方を画面で確かめられます。スプライトが奇数サイズになっていないか、サイズがPPUの倍数になっているか、Reference Resolutionより大きくなっていないかといった点は、警告として表示されます。モニター解像度ごとの拡大倍率もあわせて確認できるので、サイズを決める前の試し見にお使いください。入力した内容や読み込んだ画像は、外部に送信されません。
この記事で紹介したサイズの目安は、一般的な考え方をまとめたものです。ゲームの内容や、表現したい雰囲気によって、適したサイズは変わります。Unityの項目の名前や表示は、バージョンによって異なることがあります。実際に使うバージョンのマニュアルもあわせてご確認ください。