Immediate Mode GUI (IMGUI)
作成日時:2019/01/13
更新日時:2019/08/14
この記事の確認環境
Unity Version 2019.1.8f1 Personal
Immediate Mode GUI (IMGUI)とは
シーンビューには表示されず、コードドリブンで表示されるGUIシステムです。ゲームのプレイヤーが操作するUIではなく、デバッグ用途の使用が想定されています。
公式ドキュメント
Immediate Mode GUI (IMGUI) - https://docs.unity3d.com/ja/current/Manual/GUIScriptingGuide.html
コントロール - https://docs.unity3d.com/ja/current/Manual/gui-Controls.html
使用方法
スクリプトに「OnGUI()」という名前の関数を定義してその中に処理を記述することにより表示が行えます。
using UnityEngine;
public class SampleSceneController : MonoBehaviour
{
void OnGUI()
{
}
}
いずれも第一引数に「Rect」型の変数で位置とサイズを指定、
第二引数に「GUIContent」「string」「Texture」型のいずれかを指定、
第三引数に「GUIStyle」を指定するとスタイルの指定が行えます。
タイプ一覧
使用例
Box
using UnityEngine;
public class SampleSceneController : MonoBehaviour
{
void OnGUI()
{
GUI.Box(new Rect(0, 0, 100, 100), "Box Text");
}
}
Label
using UnityEngine;
public class SampleSceneController : MonoBehaviour
{
void OnGUI()
{
GUI.Label(new Rect(0, 0, 100, 100), "Label Text");
}
}
using UnityEngine;
public class SampleSceneController : MonoBehaviour
{
void OnGUI()
{
GUIStyle guiStyle = new GUIStyle(GUI.skin.label);
guiStyle.fontSize = 20;
guiStyle.normal.textColor = Color.blue;
GUI.Label(new Rect(0, 0, 100, 100), "Label Text", guiStyle);
}
}
Button
指定位置に指定サイズのボタンが表示され、クリック時に戻り値が真になるためif文内の処理が実行されます。
using UnityEngine;
public class SampleSceneController : MonoBehaviour
{
void OnGUI()
{
if (GUI.Button(new Rect(0, 0, 100, 100), "Button Text"))
{
Debug.Log("Button Click!");
}
}
}
以下のコード例のようにTexture2D型の変数を定義、インスペクターからテクスチャの参照を設定し、第二引数にテキストの代わりにテクスチャを渡すとボタン内に画像が表示されます。
using UnityEngine;
public class SampleSceneController : MonoBehaviour
{
public Texture2D texture;
void OnGUI()
{
if (GUI.Button(new Rect(0, 0, 100, 100), texture))
{
Debug.Log("Button Click!");
}
}
}
RepeatButton
GUI.Button同様にクリック時に戻り値が真になりますが、GUI.Buttonは押した瞬間1フレームのみ真値が返ってくるのに対し、GUI.RepeatButtonは押している間ずっと真値が返ってくるため、押している間if文内の処理が実行されます。
using UnityEngine;
public class SampleSceneController : MonoBehaviour
{
void OnGUI()
{
if (GUI.RepeatButton(new Rect(0, 0, 100, 100), "RepeatButton"))
{
Debug.Log("Repeat Button Click!");
}
}
}
TextField
編集可能なテキストフィールドを表示します。複数行の入力ができないため、複数行の入力を行う場合はGUI.TextAreaを使用します。
using UnityEngine;
public class SampleSceneController : MonoBehaviour
{
private string textFieldString = "text field";
void OnGUI()
{
textFieldString = GUI.TextField(new Rect(0, 0, 100, 100), textFieldString);
}
}
TextArea
編集可能なテキストエリアを表示します。
using UnityEngine;
public class SampleSceneController : MonoBehaviour
{
private string textAreaString = "text area";
void OnGUI()
{
textAreaString = GUI.TextArea(new Rect(0, 0, 100, 100), textAreaString);
}
}
Toggle
on/offを切り替えられるとぐるボタンを表示します。
bool型の変数を定義し第二引数に渡し、変更後の値が戻り値として返ってくるため同じ変数に戻り値を格納します。
using UnityEngine;
public class SampleSceneController : MonoBehaviour
{
private bool toggleBool = true;
void OnGUI()
{
toggleBool = GUI.Toggle(new Rect(0, 0, 100, 100), toggleBool, "Toggle");
}
}
Toolbar
ツールバーを表示します。
string型の変数を定義し第三引数に渡すとその要素数分ボタンが表示されます。
第二引数には選択されている要素のインデックスを格納するint型の変数を渡し、変更後の値が戻り値として返ってくるため同じ変数に戻り値を格納します。
すべての要素が横並びに表示されるため、複数行や縦並びのツールバーを表示する場合はGUI.SelectionGridを使用します。
using UnityEngine;
public class SampleSceneController : MonoBehaviour
{
private int toolbarInt = 0;
private string[] toolbarStrings = { "Toolbar1", "Toolbar2", "Toolbar3" };
void OnGUI()
{
toolbarInt = GUI.Toolbar(new Rect(0, 0, 250, 30), toolbarInt, toolbarStrings);
}
}
SelectionGrid
基本的にGUI.Toolbarと同じ引数が必要ですが、第四引数に1列に表示する要素数を指定可能です。
using UnityEngine;
public class SampleSceneController : MonoBehaviour
{
private int selectionGridInt = 0;
private string[] selectionStrings = { "Grid 1", "Grid 2", "Grid 3", "Grid 4" };
void OnGUI()
{
selectionGridInt = GUI.SelectionGrid(new Rect(0, 0, 100, 100), selectionGridInt, selectionStrings, 2);
}
}
HorizontalSlider
水平のスライダーを表示します。
using UnityEngine;
public class SampleSceneController : MonoBehaviour
{
private float hSliderValue = 0.0f;
void OnGUI()
{
hSliderValue = GUI.HorizontalSlider(new Rect(0, 0, 100, 100), hSliderValue, 0.0f, 10.0f);
}
}
VerticalSlider
垂直のスライダーを表示します。
using UnityEngine;
public class SampleSceneController : MonoBehaviour
{
private float vSliderValue = 0.0f;
void OnGUI()
{
vSliderValue = GUI.VerticalSlider(new Rect(0, 0, 100, 100), vSliderValue, 10.0f, 0.0f);
}
}
HorizontalScrollbar
水平のスクロールバーを表示します。
using UnityEngine;
public class SampleSceneController : MonoBehaviour
{
private float hScrollbarValue;
void OnGUI()
{
hScrollbarValue = GUI.HorizontalScrollbar(new Rect(0, 0, 100, 100), hScrollbarValue, 1.0f, 0.0f, 10.0f);
}
}
VerticalScrollbar
垂直のスクロールバーを表示します。
using UnityEngine;
public class SampleSceneController : MonoBehaviour
{
private float vScrollbarValue;
void OnGUI()
{
vScrollbarValue = GUI.VerticalScrollbar(new Rect(0, 0, 100, 100), vScrollbarValue, 1.0f, 10.0f, 0.0f);
}
}
ScrollView
スクロールビューを表示します。
GUI.BeginScrollViewからGUI.EndScrollViewの呼び出し間に表示されたコンテンツがスクロールビュー内に表示されます。
using UnityEngine;
public class SampleSceneController : MonoBehaviour
{
Vector2 scrollViewVector = Vector2.zero;
string innerText = "I am inside the ScrollView";
void OnGUI()
{
scrollViewVector = GUI.BeginScrollView(new Rect(0, 0, 100, 100), scrollViewVector, new Rect(0, 0, 200, 200));
innerText = GUI.TextArea(new Rect(0, 0, 200, 200), innerText);
GUI.EndScrollView();
}
}
https://docs.unity3d.com/ja/current/ScriptReference/GUI.BeginScrollView.html
https://docs.unity3d.com/ja/current/ScriptReference/GUI.EndScrollView.html
Window
ポップアップウィンドウを表示します。
第一引数にはウィンドウ固有のIDを指定する必要があるため、複数のウィンドウを表示する場合はそれぞれ別の値を渡す必要があります。
第二引数には他タイプのGUIで第一引数に渡している表示位置とサイズを指定するRect型変数を渡します。
第三引数にはウィンドウ内に表示するコンテンツを描画するコールバック関数を指定します。
第四引数には他タイプのGUI同様テキストやテクスチャ、GUIContentを指定し、第五引数にGUIStyle型の変数を渡すとスタイルの指定も可能です。
以下の例ではコールバック関数内でGUI.DragWindowの呼び出しを行っていますが、この関数にウィンドウ内の範囲を指定するRect型変数を渡すとその範囲をクリックしドラッグすることにより、ウィンドウの移動が可能になります。
using UnityEngine;
public class SampleSceneController : MonoBehaviour
{
private Rect windowRect = new Rect(0, 0, 100, 100);
void OnGUI()
{
windowRect = GUI.Window(0, windowRect, WindowFunction, "My Window");
}
void WindowFunction(int windowID)
{
GUI.Label(new Rect(50, 50, 100, 100), "Label");
GUI.DragWindow(new Rect(0, 0, 100, 100));
}
}
https://docs.unity3d.com/ja/current/ScriptReference/GUI.DragWindow.html
スタイルを指定しなかった場合のデフォルトのスタイル
GUI.skin内に各タイプごとのGUIStyleが格納されていてそれらが適用されています。
こちらの変数の値を書き換えることでそのタイプのGUIすべてに変更を適用することも可能で、GUIStyle型の変数を用意し単一タイプのGUIスタイルの切り替え、GUISkin型の変数を用意し複数タイプのGUIスタイルの切り替えが行えます。
デフォルトのフォントについてはGUI.skin.fontにデータが格納されており、フォントサイズはGUI.skin.font.fontSizeで確認可能です。
各スタイルのフォントサイズに0が指定されている場合は、こちらの値が使用されます。
サンプル
以下に一通りのスタイルを使用したWebGLアプリケーションのサンプルがございます。
ブラウザ上で確認可能です。