UnityUnityの使い方

Unityの使い方⑪ UI(ユーザーインターフェース)を作ってみよう

Unity

はじめに

こんにちは!Unityの使い方シリーズ第11回へようこそ!

今回は、**UI(ユーザーインターフェース)**の作り方を一緒に学んでいきましょう。

ゲームやアプリを使っているとき、画面に表示される「ボタン」や「テキスト」、「スライダー」などを見たことがありますよね?これらのことを**UI(ユーザーインターフェース)**といいます。

例えば、

  • 「スタート」や「リトライ」などのボタン
  • プレイヤーのHPやスコアを表示するテキスト
  • 音量調整のスライダー

これらのUIは、ゲームの操作や見た目をわかりやすくするために欠かせないものです。

今回の目標

この記事では、Unityで簡単なUIを作る手順を、ステップごとに詳しく解説します。
「ボタンを押したら文字が変わる」など、簡単な機能もつけてみましょう!

初心者でも大丈夫。ひとつずつ一緒に進めていくので、安心してくださいね!
それでは、UIの世界にチャレンジしていきましょう!🎮✨


1. UIを作ってみよう!

それでは、実際にUnityでUIを作っていきましょう!今回は、画面にボタンテキストを追加して、シンプルなUIを作成します。


① キャンバス(Canvas)を追加しよう

UIを作るためには、まず「キャンバス(Canvas)」が必要です。キャンバスはUIを表示するための「土台」のようなものです。

  1. ヒエラルキーウィンドウで「右クリック」→「UI」→「Canvas」を選びます。
  2. すると、シーンにCanvasが追加され、画面の中に枠が表示されます。

ポイント

  • キャンバスがないと、ボタンやテキストなどのUIは表示されません!
  • 「Render Mode」はデフォルトで「Screen Space – Overlay」になっています。この設定なら、画面全体にUIが表示されます。
  • 見づらい場合はシーンビューの上にある2Dボタンを押してみてください!

② ボタンを追加しよう

次に、画面にボタンを追加してみましょう。

  1. ヒエラルキーウィンドウで「右クリック」→「UI」→「Button」を選びます。
  2. シーンビューにボタンが表示されましたね!
  3. ボタンのテキストを変更する方法
    • ヒエラルキーで「Button」→「Text」を選びます。
    • インスペクターウィンドウで「Text」の内容を好きな文字に変えましょう。
      例:「START」や「CLICK ME!」

※TextMeshProをインポートしていない場合このような画面が出てくるので、Import TMP Essentialsをクリックしましょう。


③ テキストを追加しよう

次に、画面にテキストを追加します。これでUIに文字を表示できるようになります。

  1. ヒエラルキーウィンドウで「右クリック」→「UI」→「Text – TextMeshPro」を選びます。
    ※「TextMeshPro」の確認画面が出た場合は、指示に従ってインポートしてください。
  2. シーンビューにテキストが表示されます。
  3. インスペクターウィンドウで文字の内容を変えましょう!
    • 「Text Input」欄に表示したい文字を入力します。
    • フォントのサイズも好きなように調整できます。

④ スライダーや画像を追加しよう

ボタンやテキストだけでなく、他のUI要素も簡単に追加できます。

スライダーを追加する

  1. ヒエラルキーウィンドウで「右クリック」→「UI」→「Slider」を選びます。
  2. シーンにスライダーが表示されます。
  3. インスペクターウィンドウでスライダーのサイズやデザインを調整しましょう。

画像を追加する

  1. ヒエラルキーウィンドウで「右クリック」→「UI」→「Image」を選びます。
  2. シーンに白い四角が表示されます。
  3. 画像を設定する場合は、プロジェクトウィンドウに画像を追加して、インスペクターの「Source Image」にドラッグ&ドロップします。

これでUIの基本的なパーツが作成できました!
次のステップでは、UIに簡単な機能を追加して、動かしてみましょう!😊✨




2. UIに機能を追加しよう

次は、作成したUIに機能を追加してみましょう!
例えば、「ボタンをクリックすると、画面のテキストが変わる」というシンプルな動きを作ります。


① スクリプトを作成しよう

まずは新しいスクリプトを作成します。

  1. プロジェクトウィンドウを右クリックし、「Create」→「C# Script」を選びます。
    (Unity6では「Create」→「Scripting」→「C# Script」)
  2. 名前を「ButtonClickTMP」と付けましょう。

② スクリプトの中身を書く

作成したスクリプトをダブルクリックして開き、以下のコードを入力します:

using UnityEngine;
using TMPro; // TextMeshProを使うための名前空間

public class ButtonClickTMP : MonoBehaviour
{
    // TextMeshProのテキストを参照する変数
    public TMP_Text displayText;

    // ボタンがクリックされたときに実行する関数
    public void OnButtonClick()
    {
        displayText.text = "clicked!";
    }
}

ポイント:

  • TextMeshProを使うためには、**TMP_Text**型を使用します。通常のTextとは異なるので注意しましょう。
  • Text(Legacy)の場合は変数をこのように書きます。public Text displayText;

③ スクリプトをアタッチしよう

次に、このスクリプトをUIのボタンに関連付けます(アタッチします)。

  1. ボタンオブジェクトをヒエラルキーで選びます。
  2. 作成した「ButtonClickTMP」スクリプトをボタンにドラッグ&ドロップします。
  3. ボタンのインスペクターウィンドウを確認し、スクリプトが追加されていることを確認しましょう。

④ TextMeshProのテキストオブジェクトを設定する

ボタンをクリックしたときに変更するTextMeshProのテキストを設定します。

  1. ヒエラルキーにある「Text – TextMeshPro」オブジェクトを選びます。
  2. スクリプトの「displayText」項目に、このText – TextMeshProオブジェクトをドラッグ&ドロップします。

⑤ ボタンのクリックイベントを設定する

最後に、ボタンをクリックしたときに実行される関数を設定します。

  1. ボタンオブジェクトを選び、インスペクターの「On Click ()」項目を見つけます。
  2. +」ボタンをクリックして新しいイベントを追加します。
  3. ButtonClickTMPスクリプト」がアタッチされているオブジェクトを指定します。
  4. 関数一覧から「ButtonClickTMP → OnButtonClick」を選びます。

⑥ シーンを再生して確認しよう!

ここまで設定できたら、シーンを再生して動作を確認しましょう!

  • ボタンをクリックすると、TextMeshProのテキストが「clicked!」に変わります。

この手順を覚えれば、もっと複雑なUIの動きも作れるようになります。
次は、スライダーや他のUI要素に動きをつけてみるのもいいですね!😊✨




6. まとめ

今回はUnityを使ってUI(ユーザーインターフェース)を作成する方法を紹介しました。

  • キャンバス(Canvas) を追加する
  • ボタンやTextMeshProのテキスト を配置してデザインする
  • スクリプト でボタンをクリックしたときの動きを作る

これらのステップで、シンプルなUIが作れるようになりましたね!ボタンやテキストはゲームやアプリ制作に欠かせない要素です。少しずつできることを増やして、もっと高度なUIにも挑戦してみましょう!


Unity初心者でも簡単!アセットを活用してゲーム開発を加速しよう!

Unity Asset Storeには、初心者でもすぐに使える便利なアセットがたくさんあります。
でも「どれを使えばいいの?」「どう活用すればいいの?」と迷っていませんか?

この記事では、初心者向けのおすすめアセットとその活用法を詳しく解説!
ゲーム開発をもっと楽しく、効率的に進めたいなら必見です!




よくある質問

Q
キャンバス(Canvas)が見えません。どうすればいいですか?
A

シーンビューの上にある「2D」ボタンをクリックすると、UIが見やすく表示されます。また、キャンバスの「Render Mode」が「Screen Space – Overlay」になっているか確認してください。

Q
TextMeshProのテキストが表示されません。どうしたらいいですか?
A

TextMeshProを初めて使うときは、パッケージがインストールされているか確認してください。Unityが「TextMeshProの導入」を促すダイアログを表示する場合があるので、その指示に従ってインポートしましょう。

Q
TextMeshProと普通のテキスト(UI Text)は何が違うのですか?
A

TextMeshProは、普通のテキストよりもきれいな表示ができ、文字の装飾や細かいデザイン調整が可能です。特に高解像度の画面やゲームでは、TextMeshProが推奨されています。