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エンジニアのサポートで効率的に学びたい場合はご検討ください。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する