UnityのGUI Textureを使って画像を表示させる方法【初心者向け】

Unityで【GUI Texture】を使って画像を表示させる方法を初心者向けに解説した記事です。GUI Textureのプロパティを使うと画像の調整ができるので、表示位置などのパラメータを合わせて紹介します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

UnityGUI Textureを使って画像を表示させる方法を初心者向けに解説した記事です。

Unityには、画像を表示するために「GUI Texture」というゲームオブジェクトが用意されおり、2Dの画像ファイルを直接、ゲーム画面上に表示することができます。

 

なお、本記事はTechAcademyのUnity入門オンライン講座の内容をもとにしています。

 

20163020-2

 

今回はGUI Textureの使い方を学習するよ。

 

20160620

 

田島メンター!!GUI Textureは何をする機能なんですか~?

 

20163020-2

 

GUI Textureは2Dの平坦な画像をゲーム画面に表示させる機能だよ。画像の表示位置も自由に決めれるのでユーザーインターフェイスなどに使うといいかもしれないね。

 

20160620

 

なるほど、是非やってみたいです。よろしくお願いします!

 

目次

本記事では以下の流れで解説していきます。

 

 

GUI Textureの作成

では早速、「GUI Texture」を作成してみましょう。

まず、画面上部のタブで[GameObject]→[Create Other]→[GUI Texture]と選択します。

001

 

「UnityWatermark-small」というゲームオブジェクトが作成されました。

002

 

画面には、デフォルトの画像としてUnityのロゴが表示されます。

002-2

 

次に、この画像を変更しましょう。

今回は「TextureGreen」と言う名前の画像ファイルを用意しました。

Inspector上の「Texture」に画像ファイルをドラッグアンドドロップします。

004

 

すると、画面に表示される画像が変更されました。

003

 

20163020-2

 

バージョンによっては「Create Empty」で空のオブジェクトを作成してから「Add Component」→「Rendering」→「GUI Texture」で追加する形になるよ。

 

20160620

 

Texture欄にAssetsから画像をドラッグすると、画面にそれが表示されましたね。

 

20163020-2

 

では次はこれを編集してみよう。場所や大きさなどの変更ができるんだ。

 

 

[PR] Unityを使ったゲーム開発で挫折しない学習方法を動画で公開中

GUI Textureのプロパティ

次にGUI Textureのプロパティを使って画像の調整を行います。

GUI Textureは、以下のパラメータを持っており、画像の表示位置などを設定可能です。

 

Transform

「Position」で画像の表示位置を設定できます。

画面左下を原点として、画像の表示位置を0~1の間で値を設定します。画面右端がX=1、上端がY=1です。

 

Texture

表示する画像ファイルを設定できます。

 

Color

画像の色を設定できます。

 

Pixel Inset

Transformで設定した位置を基点に、ピクセル単位で画像の表示位置を操作できます。

また、「Width」と「Height」では、画像の幅と高さを変更することができます。

 

Left Border~Bottom Border

画像の中で、縮尺の影響を受けない部分をピクセル単位で設定できます。
(今回は使用しません。)

 

では、以下のようにパラメータを設定してみましょう。

005

 

これで画像が画面左上に表示されるようになりました。

006

 

 

スクリプトからパラメータを設定する

GUI Textureの各パラメータは、スクリプトからも参照できます。

「UnityWatermark-small」に以下のスクリプトを追加してみましょう。

 

Javascriptの場合は以下のように記述します。

public var textureWidth : float;
function Update () {
textureWidth += 1;
if ( textureWidth >= 128 ) {
textureWidth = 0;
}
else {
gameObject.guiTexture.pixelInset = Rect(2, -34, textureWidth, 32);
}
}

 

C#の場合は以下のように記述します。

public class NewBehaviourScript : MonoBehaviour {
public float textureWidth;
void Update () {
textureWidth += 1;
if ( textureWidth >= 128 ) {
textureWidth = 0;
}
else {
gameObject.guiTexture.pixelInset = new Rect(2, -34, textureWidth, 32);
}
}
}

 

ゲームを再生すると、画像がバーのように伸び縮みします。

007

 

今回の記事は以上です。

 

20163020-2

 

テクスチャ表示の調整はできたかな?

 

20160620

 

なるほど、こうやって好きな場所に好きな大きさで配置することができるんですね。

 

20163020-2

 

「Color」の項目で色を指定すると、全体の色合いを変更することができるんだ。ちょっと雰囲気を変えたいときなどに使ってみよう。

 

20160620

 

表現のバリエーションが増えて便利そうですね。活用したいです!

 

Unityをさらに使いこなしたい場合は、Unityにtransformの値を設定する方法も合わせてご覧ください。

[お知らせ]TechAcademyではオリジナルゲームアプリが公開できるUnityオンラインブートキャンプを開催しています。現役Unityエンジニアのサポートで効率的に学びたい場合はご検討ください。