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

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

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

 

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

 

 

目次

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

• GUI Textureの作成
• GUI Textureのプロパティ
• スクリプトからパラメータを設定する

 

 

GUI Textureの作成

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

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

 

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

 

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

 

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

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

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

 

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

 

 

[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

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

 

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

 

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

 

 

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

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);
}
}
}

 

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

 

今回の記事は以上です。

 

 

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

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