UnityのGUIでラベルを表示させる方法【初心者向け】

UnityのGUIで【ラベル(Label)】を追加する方法を初心者向けに解説した記事です。JavaScript、C#それぞれのスクリプトを紹介しています。また、テクスチャ(Texture2D)を指定する方法も紹介。

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

UnityのGUIでラベルを表示させる方法を初心者向けに解説した記事です。

 

Unityでは、様々な入出力を処理するGUIを簡単に作成できます。

今回は、文字やテクスチャを表示するためのGUIを紹介します。

 

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

 

20163020-2

 

今回はGUIのひとつ、Labelを実装してみよう。

 

20160620

 

田島メンター!!Labelはどういった機能を持っているんですか~?

 

20163020-2

 

Labelは文字やテクスチャを画面に表示させるものだよ。ユーザーがそれで何か操作するというタイプのものではなく、指定した要素をそのまま出力するんだ。実際にやってみよう。

 

20160620

 

分かりました!お願いします!

 

Label(ラベル)とは

Labelは、文字やテクスチャをゲーム画面上に表示します。

ユーザからの操作を受け付けない表示のみのGUIです。

 

では早速、作成してみましょう。

 

 

Labelを表示させる

スクリプトファイルのOnGUI関数内に、以下のコードを追加してください。

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

// Javascript
function OnGUI () {
// ラベルを表示する
GUI.Label(Rect(20, 20, 100, 50), “Label”);
}

 

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

//C#
public class TestLabel : MonoBehaviour {
void OnGUI () {
// ラベルを表示する
GUI.Label(new Rect(20, 20, 100, 50), “Label”);
}
}

 

この状態でゲームを再生してみましょう。

001

「Label」と書かれたラベルが表示されました。

 

20160620

 

再生すると、文字列が表示されましたね。

 

20163020-2

 

先ほど入力したコード内で座標や文字列の内容を変えたりすることができるよ。

 

20160620

 

なるほど!ではテクスチャを表示させたい場合はどうしたらいいんですか?

 

20163020-2

 

テクスチャの場合は使用する画像を用意してから、コードを編集する必要があるんだ。次の手順を見てみよう。

 

 

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

テクスチャ(Texture2D)を指定する

Label関数は第一引数(Rect構造体)へGUIの表示位置を指定します。そして、第二引数(String)へラベルに表示する文字列を指定します。

また、第二引数には文字列のかわりにテクスチャ(Texture2D)を指定することもできます。実際にやってみましょう。

 

まず、Assetsフォルダの配下にTextureフォルダを作成し、画像ファイルを保存してください。

(画像ファイルの追加方法は、こちらで詳しく紹介していますので、ご参照ください。)

 

そして、コードを以下のように修正しましょう。

スクリプト内でテクスチャをあつかう場合は、Unityに用意されているTexture2Dクラスを使用します。

// Javascript
public var labelTexture : Texture2D;
function OnGUI () {
// ラベルを表示する
GUI.Label(Rect(20, 20, labelTexture.width, labelTexture.height), labelTexture);
}

 

//C#
public class TestLabel : MonoBehaviour {
public Texture2D labelTexture;
void OnGUI () {
// ラベルを表示する
GUI.Label(new Rect(20, 20, labelTexture.width, labelTexture.height), labelTexture);
}
}

 

最後に、[Inspector]タブでスクリプトコンポーネントの「labelTexture」へテクスチャをドラッグ&ドロップしてください。

改めてゲームを再生します。

002

ラベルにテクスチャが表示されました。

 

今回の記事は以上です。

 

20163020-2

 

LabelTextureの欄が表示されていない場合は、スクリプトコンポーネントの名前の部分をクリックして表示させよう。

 

20160620

 

さっき文字列があったところに、今度は画像が出てきましたね!

 

20163020-2

 

表示させるテクスチャの内容はLabelTextureに他の画像をドラッグ&ドロップすることでいつでも変更できるからね。また、文字列同様座標を変えることで表示位置を調整することも可能だよ。

 

20160620

 

色々試してみます。ありがとうございます!

 

 

Unityの他のGUIを追加したい場合は、UnityのGUI Buttonでボタンを表示させる方法を合わせてご覧ください。

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