1. CanvasとPanelの作成
- Hierarchyウィンドウで右クリックし、UI > Canvasを選択してCanvasを作成します。CanvasはUI要素を配置するための土台となります。
- Canvasを右クリックし、UI > Panelを選択してPanelを作成します。Panelはモーダルウィンドウの背景として機能します。
2. Panelの調整
- InspectorウィンドウでPanelのRect Transformコンポーネントを調整し、モーダルウィンドウのサイズと位置を設定します。
- Anchors: 親オブジェクト（Canvas）に対する位置とサイズをどのように維持するかを設定します。
- Position: Panelの位置を設定します。
- Size: Panelのサイズを設定します。
- Scale: Panelの拡大率を設定します。
- PanelのImageコンポーネントを調整し、背景の色や透明度を設定します。
- Color: 背景色を設定します。
- Alpha: 透明度を設定します（0: 透明、1: 不透明）。
3. モーダルウィンドウの内容を作成
- Panelの子要素として、Text、Button、ImageなどのUI要素を追加し、モーダルウィンドウの内容を作成します。
- Text: タイトルや説明文を表示します。
- Button: 閉じるボタン（close button）やOKボタンなどを配置します。
- Image: アイコンや画像などを表示します。
4. スクリプトの作成
- オブジェクトにアタッチするスクリプトを作成します。このスクリプトは、オブジェクトのクリックイベントを検出し、モーダルウィンドウの表示・非表示を制御します。
5. スクリプトの記述
スクリプトに以下のコードを記述します。
C#
using UnityEngine;
using UnityEngine.UI;
public class ModalWindow : MonoBehaviour
{
public GameObject modalWindow; // モーダルウィンドウのPanel
public Button closeButton; // モーダルウィンドウの閉じるボタン
void Start()
{
// 閉じるボタンのクリックイベントを設定
closeButton.onClick.AddListener(CloseModalWindow);
// モーダルウィンドウを非表示にする
modalWindow.SetActive(false);
}
void OnMouseDown() // オブジェクトがクリックされた時に呼ばれる
{
// モーダルウィンドウを表示する
modalWindow.SetActive(true);
}
void CloseModalWindow()
{
// モーダルウィンドウを非表示にする
modalWindow.SetActive(false);
}
}6. オブジェクトへのスクリプトの追加
- 作成したスクリプトをモーダルウィンドウを表示させたいオブジェクトにドラッグ＆ドロップして追加します。
7. スクリプトの変数を設定
- Inspectorウィンドウで、スクリプトの変数にモーダルウィンドウのPanelと閉じるボタンを割り当てます。
modai window→panel
close Button→ close button
8. 動作確認
- ゲームを実行し、オブジェクトをクリックするとモーダルウィンドウが表示されることを確認します。
- モーダルウィンドウの閉じるボタンをクリックすると、モーダルウィンドウが非表示になることを確認します。