UnityUnityメモ

Unity初心者必見!PanelでUIをスッキリ管理するスクリプト解説

Unity

1. はじめに

Unityでゲームを作るとき、UIはとても重要な要素のひとつですよね。でも、たくさんのUI要素が画面に散らばっていると、見た目がごちゃごちゃしてしまいがちです。特に、複数のUIを切り替える必要がある場合、コードや管理が複雑になることも…。

そこで便利なのがPanelです!
Panelを使えば、複数のUI要素を1つのグループにまとめて管理できます。そして、表示・非表示を簡単に切り替えることで、画面をスッキリ見やすくすることができます。

この記事では、以下のことを解説していきます:

  • Panelの基本的な作成方法
  • スクリプトを使ってPanelを表示・非表示に切り替える方法
  • 実際に動作させる手順

Unity初心者の方でも簡単に理解できるよう、わかりやすく説明していくので、ぜひ一緒に進めていきましょう!

Unityを触ったことがないという方はコチラの記事から見てみてください!



2. Panelの作成と基本操作

UnityでPanelを使うためには、まずはPanelを作成し、その基本操作をマスターしましょう!


2.1 Panelを作成する

  1. ヒエラルキーウィンドウで右クリックして、メニューを開きます。
    → 「UI」→「Panel」を選択します。
  2. 新しいPanelが作成されます。
    ヒエラルキーに「Panel」という名前のオブジェクトが追加され、Sceneビューには画面全体を覆う薄い白い四角形が表示されます。
パネル

2.2 Panelの構造

作成したPanelは、以下のような特徴があります:

  • Panelは四角いUI要素のコンテナとして機能します。
  • 親要素として他のUI要素(ボタンやテキストなど)をドラッグ&ドロップすることで、まとめて管理できます。

2.3 Panelのカスタマイズ

  1. インスペクターウィンドウで、Panelのプロパティを調整できます:
    • Color: 背景色を変更できます。
    • Rect Transform: サイズや位置を調整します。
    • Image Component: テクスチャを追加することも可能です。
  2. 必要に応じて、ボタンやテキストを作成し、Panelの子要素として追加します。
    • 子要素にしたいオブジェクトをヒエラルキーでPanelの中にドラッグ&ドロップするだけでOK!
メニュー

2.4 見た目をスッキリ整えるコツ

  • 必要のない余白を削除する。
  • UI要素を一つのテーマごとにPanelで分ける。
  • 名前を「MenuPanel」や「SettingsPanel」のようにわかりやすく変更する。

ここまでで、Panelを作成して、基本的な見た目を調整できました!次は、このPanelをスクリプトを使って「表示」「非表示」を切り替える方法を解説しますよ!



3. スクリプトで表示と非表示を切り替える

Panelを作成して配置したら、次はスクリプトを使って表示と非表示を切り替える方法を解説します!これができるようになると、ボタンやイベントに応じてUIを動的に操作できるようになりますよ。


3.1 スクリプトを作成する

まず、Panelを操作するためのスクリプトを作成しましょう。

  1. プロジェクトウィンドウで、何もないところを右クリック。 → 「Create」→「C# Script」を選びます。
  2. 新しいスクリプトに「PanelController」という名前を付けます。
  3. 作成したスクリプトをダブルクリックして開き、以下のコードを記述します。
using UnityEngine;

public class PanelController : MonoBehaviour
{
    public GameObject panel; // PanelをInspectorからアサイン

    // Panelを表示する
    public void ShowPanel()
    {
        panel.SetActive(true);
    }

    // Panelを非表示にする
    public void HidePanel()
    {
        panel.SetActive(false);
    }
}

3.2 スクリプトをアタッチする

  1. ヒエラルキーウィンドウでPanelを選択します。
  2. 作成したPanelControllerスクリプトを、Panelにドラッグ&ドロップしてアタッチします。

3.3 Inspectorで設定を行う

  1. Panelを選択すると、InspectorにPanelControllerスクリプトが表示されます。
  2. スクリプトの「Panel」フィールドに、Panelオブジェクト自体をドラッグ&ドロップして設定します。

3.4 ボタンと連携する

次に、ボタンを作成して、Panelの表示・非表示を切り替えるように設定します。

  1. ボタンを作成します。
    • ヒエラルキーウィンドウで右クリック。
    • UI」→「Button」を選択。
  2. 作成したボタンを選択し、Inspectorで「OnClick」イベントを設定します。
    • +」ボタンをクリックして新しいイベントを追加。
    • Panelオブジェクトをドラッグして「Object」フィールドに設定。
    • ドロップダウンから、PanelControllerスクリプトのShowPanelまたはHidePanel関数を選択。
ボタンコンポーネント



4.プレイモードで実行

  1. Unityエディターの再生ボタン(▶)をクリックして、プレイモードを開始します。
  2. 作成したボタンをクリックしてみてください。
    • 「表示」ボタンをクリック → Panelが画面に表示される。
    • 「非表示」ボタンをクリック → Panelが画面から消える。

これで、スクリプトを使ったPanelの操作ができるようになりました!次は、複数のPanelを管理する方法や応用テクニックも試してみると良いでしょう。簡単に画面を整理整頓できるようになりますよ!



5. よくある質問 (Q&A)

ここでは、Panelを使ったUI管理に関するよくある質問をまとめました。問題が発生したときに参考にしてください!


Q
Panelが表示・非表示になりません。
A

いくつかのポイントを確認しましょう:

  • InspectorでPanelフィールドが設定されているか確認
    • PanelControllerスクリプトのpanelフィールドに、対象のPanelがドラッグ&ドロップされているか確認してください。
  • Panelが非アクティブの状態になっているか
    • ヒエラルキーウィンドウでPanelが非表示になっている場合、まずアクティブにして設定を再確認しましょう。
Q
ボタンをクリックしても何も起こりません。
A

以下を確認してみてください:

  • ボタンのOnClickイベントに関数が設定されているか
    • ボタンのInspectorで「OnClick」にShowPanelまたはHidePanel関数が正しく登録されているか確認してください。
  • スクリプトがPanelにアタッチされているか
    • PanelControllerスクリプトがPanelに正しくアタッチされているか確認してください。
Q
ボタンを複数作って切り替えたい場合はどうすればいいですか?
A

A: 複数のボタンで操作したい場合、それぞれのボタンに対応するShowPanelHidePanelを設定してください。異なるPanelを切り替える場合は、スクリプトを少し改良する必要があります。例えば、複数のPanelを管理するには、以下のようなコードに変更できます:

using UnityEngine;

public class MultiPanelController : MonoBehaviour
{
public GameObject[] panels; // 複数のPanelを配列で管理

// 全てのPanelを非表示
public void HideAllPanels()
{
foreach (GameObject panel in panels)
{
panel.SetActive(false);
}
}

// 特定のPanelを表示
public void ShowSpecificPanel(int index)
{
HideAllPanels();
if (index >= 0 && index < panels.Length)
{
panels[index].SetActive(true);
}
}
}