icon
icon

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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

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

 

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

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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」と書かれたラベルが表示されました。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

田島悠介

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

 

[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

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

 

今回の記事は以上です。

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

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