IMGUI (即時モードの GUI)

IMGUI コントロール

IMGUI の基本

このセクションでは、Unity の Immediate Mode GUI システム (IMGUI) をスクリプトで コントロール する基本について説明します。

IMGUIの作成

Unity の IMGUI コントロールは、OnGUI() と呼ばれる特殊な関数を使用します。OnGUI() 関数は、Update() 関数同様、書かれているスクリプトが有効である限り、毎フレーム呼び出されます。

IMGUI コントロールの構造体は非常にシンプルです。構造体は以下の例のとおりです。

/* Example level loader */
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {
            
    void OnGUI ()
    {
        // Make a background box
        GUI.Box(new Rect(10,10,100,90), "Loader Menu");
    
        // Make the first button. If it is pressed, Application.Loadlevel (1) will be executed
        if(GUI.Button(new Rect(20,40,80,20), "Level 1"))
        {
            Application.LoadLevel(1);
        }
    
        // Make the second button.
        if(GUI.Button(new Rect(20,70,80,20), "Level 2")) 
        {
            Application.LoadLevel(2);
        }
    }
}

これはレベル選択を行うメニューの例です。このスクリプトをコピーして貼り付け、ゲームオブジェクト に追加して 再生モード に入ると、以下のメニューが表示されます。

サンプルコードの詳細を見てみましょう。

最初の GUI 行、GUI.Box (Rect (10, 10, 100, 90), “Loader Menu”); は、ヘッダーテキスト “Loader Menu” を含む Box コントロールを表示します。これは、後で確認する通常の GUI コントロールの宣言スキームに従っています。

次の GUI 行は、Button コントロールの宣言です。Box コントロールの宣言とは若干異なることに注意してください。具体的には、Button 宣言全体が if ステートメント内に置かれている点です。ゲーム実行中にボタンをクリックすると、この if ステートメントは true を返し、if ブロック内のコードが実行されます。

OnGUI() コードは毎フレーム呼び出されるので、GUI コントロールを明示的に作成または削除する必要はありません。コントロールを宣言する行は作成する行と同じです。特定の時間にコントロールを表示する必要がある場合、スクリプトにさまざまなロジックを使用して実現できます。

/* Flashing button example */
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour
{
            
    void OnGUI () 
    {
        if (Time.time % 2 < 1) 
        {
            if (GUI.Button (new Rect (10,10,200,20), "Meet the flashing button"))
            {
                print ("You clicked me!");
            }
        }
    }
}

この場合、GUI.Button() は 1 秒ごとにのみ呼び出されるため、ボタンは表示されたり消えたりします。当然、ユーザーはボタンが表示されているときにのみクリックできます。

このように、必要なロジックを使用して、GUI コントロールが表示され、機能するタイミングを制御できます。次に、各コントロールの宣言を詳しく探ります。

GUI の詳細

GUI の宣言時に必要な情報は次の 3 つです。

Type (Position、Content)

この構造体は 2 つの引数を持つ関数であることがわかります。この構造体を詳しく探りましょう。

Type

Type は Control Type で、Unity の GUI クラスまたは GUILayout クラスの関数を呼び出すことによって宣言されます。詳しくは、このガイドの IMGUI レイアウトモードのセクションで説明します。例えば、 GUI.Label() は相互作用しないラベルを作成します。すべてのコントロールタイプについては、このガイドのコントロールのセクションで後述します。

Position

Position は、GUI コントロール関数の 1 つ目の引数です。引数自体は Rect() 関数で指定します。Rect() は、left-most position、top-most position、total width、total height の 4 つのプロパティを定義します。これらの値はすべてピクセル値に対応する整数で指定します。すべての UnityGUI コントロールは スクリーンスペース で機能し、公開されたプレイヤーのピクセル単位の解像度で表されます。

座標系は左上を原点とします。Rect(10, 20, 300, 100) は、座標 10, 20 から開始し、座標 310, 120 で終了する矩形を定義します。Rect() の 2 つ目の値のペアは、全体の幅と高さであり、コントロールの終了位置の座標ではありません。そのため、前述の例では 300,100 ではなく 310,120 で終了します。

Screen.width と Screen.height プロパティを使用して、プレイヤーで使用できるスクリーンスペースの合計の大きさを取得できます。この方法は以下の例を参照してください。

/* Screen.width & Screen.height example */
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour 
{
            
    void OnGUI()
    {
        GUI.Box (new Rect (0,0,100,50), "Top-left");
        GUI.Box (new Rect (Screen.width - 100,0,100,50), "Top-right");
        GUI.Box (new Rect (0,Screen.height - 50,100,50), "Bottom-left");
        GUI.Box (new Rect (Screen.width - 100,Screen.height - 50,100,50), "Bottom-right");
    }

}

Content

GUI コントロールの 2 つ目の引数は、コントロールに実際に表示されるコンテンツです。ほとんどの場合、コントロールにはテキストや画像を表示します。テキストを表示するには、以下のように文字列を Content 引数として渡します。

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour 
{
    void OnGUI ()
    {
        GUI.Label (new Rect (0,0,100,50), "This is the text string for a Label Control");
    }
}

画像を表示するには、パブリック変数 Texture2D を宣言し、以下のように変数名を Content 引数として渡します。

/* Texture2D Content example */
public Texture2D controlTexture;
  ...

void OnGUI () 
{
    GUI.Label (new Rect (0,0,100,50), controlTexture);
}

以下は、よく使われる例です。

/* Button Content examples */
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour
{
    public Texture2D icon;
    
    void OnGUI () 
    {
        if (GUI.Button (new Rect (10,10, 100, 50), icon)) 
        {
            print ("you clicked the icon");
        }
    
        if (GUI.Button (new Rect (10,70, 100, 20), "This is text")) 
        {
            print ("you clicked the text button");
        }
    }
}

3 つめのオプションとして、GUI コントロールに画像とテキストを一緒に表示する方法もあります。GUIContent オブジェクトを Content 引数として渡し、GUIContent 内で表示する文字列と画像を定義できます。

/* Using GUIContent to display an image and a string */
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour
{
    public Texture2D icon;

    void OnGUI () 
    {
        GUI.Box (new Rect (10,10,100,50), new GUIContent("This is text", icon));
    }
}

GUIContent で Tooltip を定義して、GUI のどの場所にマウスオーバーしてもツールチップが表示されるようにもできます。

/* Using GUIContent to display a tooltip */
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour 
{
    void OnGUI () 
    {
        // This line feeds "This is the tooltip" into GUI.tooltip
        GUI.Button (new Rect (10,10,100,20), new GUIContent ("Click me", "This is the tooltip"));
        
        // This line reads and displays the contents of GUI.tooltip
        GUI.Label (new Rect (10,40,100,20), GUI.tooltip);
    }
}

また、GUIContent を使用して、文字列、アイコン、ツールチップを表示することもできます。

/* Using GUIContent to display an image, a string, and a tooltip */
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour 
{
    public Texture2D icon;
    
    void OnGUI () 
    {
        GUI.Button (new Rect (10,10,100,20), new GUIContent ("Click me", icon, "This is the tooltip"));
        GUI.Label (new Rect (10,40,100,20), GUI.tooltip);
    }
}

GUIContent のコンストラクターのスクリプトリファレンスで使用例を参照してください。

IMGUI (即時モードの GUI)

IMGUI コントロール

Unity マニュアル

IMGUI の基本

IMGUIの作成

GUI の詳細

Type

Position

Content