Unityでの2D画像表示と透過処理のステップとマテリアルの適用方法

Unityを使用したゲームやアプリ開発には、見栄えが良くユーザーにとって分かりやすい画像が不可欠です。この記事では、Unityに2D画像を表示させる方法について解説します。

画像の背景を切り抜きたい場合はPNG形式の画像がおすすめです

HD-2Dなどのように、背景を透過した画像を使用してキャラクターやアイテムを表示する場合、PNG形式の画像が最適です。アセットや自作の画像を用意すれば、Unity上で簡単に画像を表示させたり、キャラクターとして動かすことができます。

画像データのサイズや解像度について

今回用意した画像は、当サイトのアイコンです。サイズは512×512ピクセルで、容量は341KBです。ゲーム全体のボリュームや表現方法によりますが、Unityでの表示にはもっと軽量な画像でも十分な場合があります。

Unityに2D画像を表示する

Unityを起動し、用意した画像を画面下の「Assets」にドラッグ&ドロップします。

取り込んだ画像を選択すると、インスペクターを確認することができます。

取り込んだ画像は、インスペクターでTexture2Dとして認識されており、この画像をそのまま3Dオブジェクトに貼り付けると、背景が白く表示されます。

これは、この画像のテクスチャタイプが「デフォルト」で、2D画像を3Dオブジェクトのテクスチャとして使用するときに使用しますが、今回の画像を透過させる方法とは異なります。

「補足」
3Dキューブを作成するには、ヒエラルキーで「3Dオブジェクト」→「キューブ」を選択します。

2D画像の背景を切り抜く（透過させる）

PNG画像を、背景を透過させて使用したい場合は、画像をスプライトとして設定します。

取り込んだ画像を選択した状態で、インスペクターを修正します。

テクスチャタイプを「スプライト(2DとUI)」に変更し、インスペクター下にある「適用」を押します。
（適用しないまま別の操作をすると、変更を保存するか確認メッセージが表示されます）

「適用する」を選択すると、画像の背景が透過されます。（画像の背景が灰色のチェック模様部分が透過されます）

修正した画像をシーンにドラッグ&ドロップすると、透過された2D画像が表示されます。

スプライト画像に光や影の表現を加えたい

HD-2Dのようにリアルな光や影の表現を加えるには、スプライトにマテリアルを適用します。

Assetsで右クリック→「作成」→「マテリアル」を選択し、任意の名前を付けます。
ヒエラルキーまたはシーン内のオブジェクトを選択し、作成したマテリアルをドラッグ&ドロップして追加します。

これで、スプライト画像にリアルな表現を加えることができます。

プログラミングとWEBデザインのオンライン個別指導

スプライトの裏面が表示されない

スプライトなどのような平面のオブジェクトを使用する場合、裏面が表示されない場合があります。

スプライト画像のインスペクターでSprite Rendererの反転をXまたはY方向にチェックすることでも裏面を表示することができますが、この方法では逆の面が表示されなくなってしまいます。裏表を表示するには、オブジェクトに割り当てているマテリアルの「シェーダー」を変えることで裏表表示されるようになります。

ゲーム全体の条件によって方法は異なるかもしれませんが、単にスプライト画像の裏表を表示したい場合は、割り当てているマテリアルのシェーダー(Shader)をSprite→Defaultに変更すれば改善されます。