IMGUI コントロールをカスタマイズ

Unity の IMGUI システムは、主に開発者ツールの作成とインターフェースのデバッグ向けのものですが、IMGUI コントロールは様々な方法でカスタマイズまたはスタイル変更することができます。IMGUI システムでは、詳細な設定が含まれているコントロールの外観を細かく調整できます。コントロールの外観は GUIStyle で定義します。デフォルトでは、GUIStyle を定義せずにコントロールを作成すると、Unity のデフォルトの GUIStyle が適用されます。このスタイルは Unity の内部に存在し、公開されたゲームですばやくプロトタイピングを行う場合や、コントロールのスタイルを設定しない場合に利用できます。

異なる GUIStyle を多数使用して作業する場合に、1 つの GUISkin 内ですべてのスタイルを定義できます。GUISkin は、単純に GUIStyle を集めたものです。

Style が GUI コントロールの外観をどのように変えるか

GUIStyle は、ウェブブラウザー用のカスケーディングスタイルシート (CSS) を模倣するように設計されています。スタイリングに対する個々のステートプロパティの区別や、コンテンツと外観の分離など、CSS の様々な手法が多く採用されています。

Control でコンテンツを定義し、Style で外観を定義します。これにより、外観は普通の__ボタン__で、機能的には__トグル__のようなものを作成することができます。

Skin と Style 間の差

前述のとおり、GUISkin は GUIStyle を集めたものです。Style は GUI コントロールの外観を定義します。Style を使用する場合は Skin を使用する必要はありません。

Inspector に 1 つの GUISkin が表示される - 複数の GUIStyle が含まれていることに注意

スタイルの取り扱い

すべての GUI Control 関数には、任意で指定する最後のパラメーター GUIStyle があり、コントロールの表示に使用します。このパラメーターを指定しない場合は、デフォルトの GUIStyle が使用されます。GUIStyle はコントロールタイプの名前を文字列として適用することで内部的に機能します。そのため GUI.Button() は “ボタン” スタイルを使用し、GUI.Toggle() は “トグル” スタイルを使用します。GUIStyle を最後のパラメーターとして指定することで、コントロールに対するデフォルトの GUIStyle をオーバーライドできます。

/* Override the default Control Style with a different style in the UnityGUI default Styles */

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {
                    
    void OnGUI () {
        // Make a label that uses the "box" GUIStyle.
        GUI.Label (new Rect (0,0,200,100), "Hi - I'm a label looking like a box", "box");
    
        // Make a button that uses the "toggle" GUIStyle
        GUI.Button (new Rect (10,140,180,20), "This is a button", "toggle");
    }

}

パブリック変数 GUIStyle の作成

GUIStyle 変数を public で宣言すると、Style 内のすべての要素が Inspector に表示されます。ここで、様々な変数をすべて編集できます。

/* Overriding the default Control Style with one you've defined yourself */

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {
                    
    public GUIStyle customButton;
    
    void OnGUI () {
        // Make a button. We pass in the GUIStyle defined above as the style to use
        GUI.Button (new Rect (10,10,150,20), "I am a Custom Button", customButton);
    }
    
}

各種スタイル要素の変更

GUIStyle を宣言している場合は、Inspector でそのスタイルを編集できます。定義できる多くの State が用意されており、あらゆるタイプ Control に適用できます。

すべての Control State には、指定した Text Color を適用する前に Background Color を割り当てる必要があります。

個々の GUIStyle の詳細については、GUIStyle コンポーネントのリファレンスのページを参照してください。

スキンの使い方

より複雑な GUI システムの場合はスタイルのコレクションを 1 か所で管理する方が便利ですが、GUISkin はこれを実現したものです。GUISkin には様々なスタイルが含まれており、基本的にはすべての GUI コントロールに合わせて完全に調整することができます。

GUI スキンの新規作成

GUISkin を作成するには、メニューバーから Assets->Create->GUI Skin を選択します。これにより、Project フォルダーに GUISkin が作成されます。作成した GUISkin を選択すると、Inspector 内でそのスキンによって定義されているすべての GUIStyle が表示されます。

GUI へのスキンの適用

作成したスキンを使用するには、OnGUI() 関数の中で GUI.skin を割り当てます。

/* Make a property containing a reference to the skin you want to use */

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {
                    
    public GUISkin mySkin;
    
    void OnGUI () {
        // Assign the skin to be the one currently used.
        GUI.skin = mySkin;
    
        // Make a button. This will get the default "button" style from the skin assigned to mySkin.
        GUI.Button (new Rect (10,10,150,20), "Skinned Button");
    }
        
}

OnGUI() を 1 回コールするだけで、好きなだけスキンを切り替えることができます。

/* Example of switching skins in the same OnGUI() call */

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {
                    
    public GUISkin mySkin;
    private bool toggle = true;
    
    void OnGUI () {
        // Assign the skin to be the one currently used.
        GUI.skin = mySkin;
    
        // Make a toggle. This will get the "button" style from the skin assigned to mySkin.
        toggle = GUI.Toggle (new Rect (10,10,150,20), toggle, "Skinned Button", "button");
    
        // Assign the currently skin to be Unity's default.
        GUI.skin = null;
    
        // Make a button. This will get the default "button" style from the built-in skin.
        GUI.Button (new Rect (10,35,150,20), "Built-in Button");
    }
        
}

GUI のフォントサイズを変更する

以下の例では、コードから動的にフォントサイズを変更する方法を説明しています。

最初に、Unity で新しいプロジェクトを作成します。次に Fontsize.cs という C# スクリプトを作成し、以下のコードを貼り付けます。

using UnityEngine;
using System.Collections;
    
public class Fontsize : MonoBehaviour
{
    void OnGUI ()
    {
        //Set the GUIStyle style to be label
        GUIStyle style = GUI.skin.GetStyle ("label");
        
        //Set the style font size to increase and decrease over time
        style.fontSize = (int)(20.0f + 10.0f * Mathf.Sin (Time.time));
        
        //Create a label and display with the current settings
        GUI.Label (new Rect (10, 10, 200, 80), "Hello World!");
    }
        
}

スクリプトを保存し、空のゲームオブジェクトにアタッチして Play をクリックすると、フォントループで時間の経過とともにフォントサイズが変化するのを確認できます。フォントのサイズがスムーズに変化しないことに気づくかもしれません。これは、フォントサイズが無限にないためです。

この例ではデフォルトのフォント (Arial) がロードされ、ダイナミックフォントとして設定されます。ダイナミックフォントではないフォントのサイズを変更することはできません。