目次
1. はじめに
今回は UnityのUI Toolkit を使って、
ソーシャルゲーム（ソシャゲ）でよく見かける「大きく表示されるウィンドウ（ダイアログ）」を作成する方法を紹介します。
プロジェクトは以前作成した「ソシャゲ風UI画面」をベースにしていますが、
この記事だけを読んでも実践できるよう、手順を丁寧に解説します。
UI Toolkitについてはこちら
ホーム画面の作り方はこちら
完成イメージ
完成画像はこちらです
主な特徴
・画面中央にダイアログが表示されます
・表示中は背景が少し暗くなります
・「閉じるボタン」またはウィンドウ外をタップすると、ダイアログが閉じます
2. UI Toolkitでダイアログを作る考え方
今回作成するスタミナゲージは、主に５つのパーツで構成します
| パーツ名 | 役割 |
| ダイアログエリア | 画面全体を覆うエリア（背景が暗くなる部分） |
| ウィンドウ | メインとなるウィンドウ |
| タイトルエリア | ウィンドウ上部のタイトル表示エリア |
| メッセージエリア | テキストや画像などを表示するエリア |
| ボタンエリア | OKボタンや閉じるボタンを表示するエリア |
これをUI ToolkitのVisualElementとUSSで組み合わせます。
3.ダイアログUIの作成手順
ここからは実際にダイアログUIを組み立てる手順を紹介していきます。
3.1 UXMLでパーツを配置する
HierarchyへVisualElementを配置していきます。後ほどスタイルを変更します。
この記事では他のUI（メインコンテナ）がある前提で作成します。
このような配置になりました。
（メインコンテナの下に表示されてしまっていますが後で調整します）
次は各要素の名前を変更します。
3.2 USSでパーツの基本スタイルを整える
完成形をイメージしやすくするために、ここで各パーツごとに 基本的な見た目の調整 を行います。
ダイアログエリアの調整
まずは、画面全体を覆う「ダイアログエリア」の設定です。
- Position：Absolute
- Size：Width 100%, Height 100%
- 背景色：黒 (アルファ値を下げて背景を少し透過し、画面全体を暗くする)
中央配置の設定
子要素（ウィンドウ）が画面中央に来るようにします。
- Align Items：Center
- Justify Content：Center
ウィンドウの調整
次に、メインとなる「ウィンドウ」の設定です。
- Size：Width 80%, Height 80%
- Justify Content：Space-between
- Flex Grow：0
見た目の調整
- Border Width：10px
- Border Radius：25px（角を丸める）
- Border Color：お好みの色に変更
タイトルエリアの調整
次に、ウィンドウ上部にある「タイトルエリア」の設定です。
中央配置の設定
後に追加する子要素（タイトルラベル）が中央に来るようにします。
- Align Items：Center
- Justify Content：Center
見た目の設定
- Size：Height 10%
- Flex Grow：0
- BackGround Color：お好みの色に変更
メッセージエリアの調整
次は、「メッセージエリア」の設定です。
- Flex Grow：1
- BackGround Color：お好みの色に変更
子要素との隙間を設定
- Spacing : Padding 15px
ボタンエリアの調整
最後に、「ボタンエリア」の設定です。
- Align Items：Center
- JustifyContent : flex-end
- Flex Grow：0
- BackGround Color：お好みの色に変更
- Size：Height 10%
3.3 各子要素を追加
Hierarchyの各エリアへ「タイトルラベル」「テキスト」「ボタン」など、ウィンドウ内の 子要素 を追加していきます。後ほどスタイルを変更します。
LabelとButtonを追加し名前を変更
3.4 各子要素をスタイル調整
配置した子要素のスタイルを調整していきます。
タイトルラベルの設定
まずは、ダイアログ上部の「タイトルラベル」の見た目を整えます。
- Font : お好みのフォントへ変更
- Font Size : 38px
- Font Color : お好みの色に変更
ダイアログテキストの設定
次は、「ダイアログテキスト」の見た目を整えます。
- Spacing : Margin 0px, Padding 0px
- Font : お好みのフォントへ変更
- Font Size : 38px
- Font Color : お好みの色に変更
- Wrap : normal
クローズボタンの設定
次は、「クローズボタン」の見た目を整えます。
- Size : Width 20%
- Font : お好みのフォントへ変更
- Font Size : 26px
- Font Color : お好みの色に変更
- BackGround Color：お好みの色に変更
- Border Color : お好みの色に変更
- Border Size : Width 3px
細かい調整
ウィンドウの角を見るとタイトルエリアがはみ出して丸くなっていません。
overflow: hidden;を設定して丸くなるようにしましょう。
Dialog-Windowを選択し、Display設定を変更
- Overflow : hidden
この設定を加えることで、タイトルエリアがウィンドウの角丸にぴったり沿い、自然で滑らかな見た目になります。
マスクのような効果と考えるとわかりやすいでしょう。
4. インラインスタイルをUSSにまとめる
ここまでの設定である程度形にはなりました。
次は、これまでインラインで設定していたスタイルを、USSファイルにまとめて整理していきます。
USSファイルの作成
StyleSheetsの「＋」 > Create New USS
UI Toolkitフォルダに名前を付けて保存します。
インラインスタイルの抽出
- スタイルを変更した要素（VisualElementなど）をクリック
- 左に白い線があるプロパティ＝変更済みの箇所です
- その右側の「︙（三点リーダー）」をクリック
- 「Extract All Inlined Styles to Selector」→「New Class」を選択
クラス名を付けて保存
任意のクラス名をつけて「Create Class」をクリックします
例：dialog-area
→ USSファイルに .dialog-area が自動追加され、
対象の要素（Dialog-area）にも .dialog-area クラスが付与されます。
5. ダイアログ用C#スクリプト
続いては、実際にダイアログ用のスクリプトを作成します。
今回の仕様は以下の通りです。
- 任意のボタンを押すとダイアログが表示される
- 「閉じるボタン」、または「ダイアログウィンドウ外」をタップするとウィンドウが閉じる
事前準備
- MainContainer に新しくボタンを配置し、ID（名前）を付ける
- Dialog-area の Display を
noneに設定しておく（最初は非表示にする） - プロジェクトに DialogController.cs という新規スクリプトを作成する
- Hierarchy 上の UIDocument に作成したスクリプトをアタッチする
新しくボタンを作成
Hierarchyに新しくボタンを配置します
Dialog-area内でなければどこでもいいのでわかりやすい場所に配置しましょう。
IDを付ける
作成したボタンにIDを付けます。
スクリプトでこのIDを使用するので覚えておきましょう。
今回は「testButton」と付けました。
ダイアログエリアを非表示にする
最初はダイアログエリアを非表示にしておきます。
必ずUSSのクラスのほうを変更しましょう。
- Display : none
スクリプトを作成しアタッチ
プロジェクトに DialogController.cs という新規スクリプトを作成
Hierarchy 上の UIDocument に作成したスクリプトをアタッチ
DialogController
ダイアログの表示・非表示を管理するスクリプトです。
DialogController
using UnityEngine;
using UnityEngine.UIElements;
public class DialogController : MonoBehaviour
{
// UI要素の参照
private Button openDialogButton;
private VisualElement dialogArea;
private VisualElement dialogWindow;
private Button closeButton;
// スクリプトが有効になったときに呼ばれる（UI要素取得・イベント登録）
private void OnEnable()
{
// UIDocumentからUIルート要素を取得
var root = GetComponent<UIDocument>().rootVisualElement;
// UXMLで設定したIDを使ってUI要素を取得
openDialogButton = root.Q<Button>("testButton");
dialogArea = root.Q<VisualElement>("Dialog-area");
dialogWindow = root.Q<VisualElement>("Dialog-Window");
closeButton = root.Q<Button>("Close-Button");
// 最初はダイアログを非表示にする
dialogArea.style.display = DisplayStyle.None;
// イベント登録
openDialogButton.clicked += ShowDialog; // 「開く」ボタンが押されたとき
closeButton.clicked += HideDialog; // 「閉じる」ボタンが押されたとき
dialogArea.RegisterCallback<PointerDownEvent>(OnDialogAreaPointerDown); // 背景がクリックされたとき
}
// スクリプトが無効になったときに呼ばれる（イベント解除）
private void OnDisable()
{
// UI要素がnullでなければイベント解除
if (openDialogButton != null)
openDialogButton.clicked -= ShowDialog;
if (closeButton != null)
closeButton.clicked -= HideDialog;
if (dialogArea != null)
dialogArea.UnregisterCallback<PointerDownEvent>(OnDialogAreaPointerDown);
}
// ダイアログを表示する処理
private void ShowDialog()
{
dialogArea.style.display = DisplayStyle.Flex; // ダイアログを表示する
}
// ダイアログを非表示にする処理
private void HideDialog()
{
dialogArea.style.display = DisplayStyle.None; // ダイアログを隠す
}
// ダイアログ外側（背景部分）がクリックされたときの処理
private void OnDialogAreaPointerDown(PointerDownEvent evt)
{
// クリックされたUI要素を取得
VisualElement clickedElement = evt.target as VisualElement;
// クリック対象がダイアログウィンドウ外であればダイアログを閉じる
if (clickedElement != null && !dialogWindow.Contains(clickedElement))
{
HideDialog();
}
}
}
UI要素の取得
openDialogButton = root.Q<Button>("testButton");
dialogArea = root.Q<VisualElement>("Dialog-area");
dialogWindow = root.Q<VisualElement>("Dialog-Window");
closeButton = root.Q<Button>("Close-Button");UXMLで設定した 各IDを使ってUI要素を取得 しています。
これでスクリプト内からボタンやダイアログエリアにアクセスできるようになります。
初期状態の設定
dialogArea.style.display = DisplayStyle.None;最初はダイアログを非表示にします。
DisplayStyle.None にすることで完全に画面から消えます。
イベント登録
openDialogButton.clicked += ShowDialog;
closeButton.clicked += HideDialog;
dialogArea.RegisterCallback<PointerDownEvent>(OnDialogAreaPointerDown);- testButton をクリック →
ShowDialog()が呼ばれ、ダイアログが表示されます - Close-Button をクリック →
HideDialog()が呼ばれ、ダイアログが閉じます - Dialog-area をクリック →
OnDialogAreaPointerDown()が呼ばれ、ウィンドウ外をクリックした場合のみ 閉じます
ダイアログを閉じる
private void HideDialog()
{
dialogArea.style.display = DisplayStyle.None;
}クリックでダイアログを閉じる処理です。
背景クリック と 閉じるボタン 両方から呼び出します。
ダイアログ外クリックで閉じる
private void OnDialogAreaPointerDown(PointerDownEvent evt)
{
VisualElement clickedElement = evt.target as VisualElement;
if (clickedElement != null && !dialogWindow.Contains(clickedElement))
{
HideDialog();
}
}クリックされた要素 (evt.target) が Dialog-Window内 でなければ HideDialog() を呼びます。
これにより「画面の暗い部分をタップで閉じる」動作が実現できます。
実行してみる
6. おわりに
今回は UnityのUI Toolkit を使って、
ダイアログウィンドウを作成する方法を紹介しました。
ウィンドウの形を変えれば、さまざまな情報やメニューを表示させることができそうです。
UI Toolkitはコードとビジュアルの両方から柔軟にカスタマイズできるので、
ゲームに合わせたオリジナルのUIを作る楽しさがあります。
この記事が、UI Toolkitを使ったUIづくりの第一歩になれば幸いです。
ポチップ
