Unity3D で画面の1ピクセルとテクスチャの1ピクセルを合わせる

20090330-1

本日は小ネタいきます

Unity で GUI やステータス等の 2D 描画に関わる部分について描画位置の調整で思い通りの位置に描画するために、2D カメラの設定方法について調べてみました。

具体的には、実解像度は 640×480 だけど、320×240 に見立ててスプライトやフォントを描画したい。なんて要求を満たします。

要件定義

それでは本日満たすべき仕様を列挙します。

  • 16×16 のスプライトを 320×240 の解像度に見立てたスクリーンに描画する
  • 実際の解像度は 640×480 とする

とします。具体的に書きますと

16×16 のスプライトが横に 20 個、縦に 15 個描画できるようにする

という事になります。根拠は

横 : 320px(画面サイズ) / 16px(スプライトサイズ) = 20個
縦 : 240px(画面サイズ) / 16px(スプライトサイズ) = 15個

というわけです。

それでは設定しましょう

unity20131221A-001

Hierarchy ビュー Main Camera を選択し、Inspector ビュー Camera の Projection プロパティを Orthographic に、Size プロパティに縦にスプライトを敷き詰めたい個数を 2 で割った値 7.5 を設定します。

以上、完了です。

ここで 7.5 を設定すると、Unity では縦に 15 メートルの長さで描画してくれるようカメラを調整してくれます。

この状態でスプライトのサイズ設定を、1 メートルに 16 ピクセルと設定すれば綺麗に 16×16 のスプライトが 20 個 x 15 個収まるようになります。

ではスプライトも設定しましょう

せっかくなので、16×16 のブロックを作ってみました。

unity20131221A-002

とりあえずよくあるタイプのレンガっぽいブロックです。こいつをスプライトとして登録します。

unity20131221A-003

ブロックの PNG 画像を Assets フォルダにドロップし、インポートします。

Project ビュー Assets フォルダのインポートされた画像 Block1 を選択し、Inspector ビュー Block1 の Texture Type を Sprite、Sprite Mode を Single、Pixels To Units を 16 に設定し、Apply をクリックします。

以上でスプライトの登録を完了です。

Pixels To Units は設定されたピクセル数を 1 メートルのサイズで表示します。Unity では 1 メートルは座標 1 つ分の扱いとなります。

Pixels To Units は同じゲーム内で全て同じ値に設定する事でゲーム内のとドットの大きさを統一する事ができます。

並べてみた

というわけで、横に 20 個、縦に 15 個並べてみました。こんな感じです。

unity20131221A-004

え?わかりにくい? そんなときは、ブロックのスプライトの Pixels To Units を 16 から 17 に設定すると、ブロックの周囲に余白が若干できるのでブロック数が数えやすくなります。

こうすると

unity20131221A-005

こうなります。これで数えやすくなりましたね。確認したら Pixels To Units を元の 16 に戻しておきます。

unity20131221A-006

以上、小ネタでした

「シェアする」

ツイートツイート