Toggleボタンの見た目カスタム

UnityでToggleボタンを自作するのにどんな画像を用意すればよいのかよくわからなかったので試しに並べてみました。そういやホバーイメージってないよね。なるほど言われてみれば確かにこんな感じ。

void OnGUI() {

    System.Collections.Generic.Dictionary<System.String, Texture2D> drawItems = new System.Collections.Generic.Dictionary<string, Texture2D>();
    drawItems.Add("0.active", EditorStyles.toggle.active.background);
    drawItems.Add("1.focused", EditorStyles.toggle.focused.background);
    drawItems.Add("2.hover", EditorStyles.toggle.hover.background);
    drawItems.Add("3.normal", EditorStyles.toggle.normal.background);
    drawItems.Add("4.onActive", EditorStyles.toggle.onActive.background);
    drawItems.Add("5.onFocused", EditorStyles.toggle.onFocused.background);
    drawItems.Add("6.onHover", EditorStyles.toggle.onHover.background);
    drawItems.Add("7.onNormal", EditorStyles.toggle.onNormal.background);

    Vector2 toggleSize = EditorStyles.toggle.CalcSize(GUIContent.none); 
    Rect drawPosition = new Rect(0, 0, toggleSize.x, toggleSize.y);
    Rect labelPosition = new Rect(toggleSize.x, 0, position.width - toggleSize.x, toggleSize.y);
    foreach (System.Collections.Generic.KeyValuePair<System.String, Texture2D> item in drawItems)
    {
        GUI.DrawTexture(drawPosition, item.Value);
        GUI.Label(labelPosition, item.Key);
        drawPosition.y += toggleSize.y;
        labelPosition.y += toggleSize.y;
    }
}

ついでにminiButton

ボタンの場合はborderとstretchの設定も重要っぽいのでちょっと書き足して。ボーダーをゼロにしたバージョンだと端まで余さずストレッチするので、枠までボケちゃうところがポイント。

void OnGUI() {

    System.Collections.Generic.Dictionary<System.String, Texture2D> drawItems = new System.Collections.Generic.Dictionary<string, Texture2D>();
    drawItems.Add("0.active", EditorStyles.miniButton.active.background);
    drawItems.Add("1.focused", EditorStyles.miniButton.focused.background);
    drawItems.Add("2.hover", EditorStyles.miniButton.hover.background);
    drawItems.Add("3.normal", EditorStyles.miniButton.normal.background);
    drawItems.Add("4.onActive", EditorStyles.miniButton.onActive.background);
    drawItems.Add("5.onFocused", EditorStyles.miniButton.onFocused.background);
    drawItems.Add("6.onHover", EditorStyles.miniButton.onHover.background);
    drawItems.Add("7.onNormal", EditorStyles.miniButton.onNormal.background);

    Vector2 buttonSize = EditorStyles.miniButton.CalcSize(new GUIContent("OK"));
    Rect drawPosition = new Rect(0, 0, buttonSize.x, buttonSize.y);
    Rect labelPosition = new Rect(buttonSize.x, 0, position.width - buttonSize.x, buttonSize.y);
    foreach (System.Collections.Generic.KeyValuePair<System.String, Texture2D> item in drawItems)
    {
        GUI.DrawTexture(drawPosition, item.Value);
        GUI.Label(labelPosition, item.Key);
        drawPosition.y += buttonSize.y;
        labelPosition.y += buttonSize.y;
    }

    // ボーダーの有無テスト。ボーダー幅の太さだけ拡大縮小の対象にならないというのがポイント。

    GUIStyle buttonStyle = new GUIStyle(EditorStyles.miniButton);
    buttonStyle.border = new RectOffset(); // ボーダーの設定をゼロでクリア。

    GUI.Button(drawPosition, "OK"); // 標準の描画
    GUI.Label(labelPosition, "Border:" + EditorStyles.miniButton.border.ToString());
    drawPosition.y += buttonSize.y;
    labelPosition.y += buttonSize.y;

    GUI.Button(drawPosition, "OK", buttonStyle); // ボーダーゼロで描画。枠線がボケる。
    GUI.Label(labelPosition, "Border:Zero");
    drawPosition.y += buttonSize.y;
    labelPosition.y += buttonSize.y;

    // ストレッチ設定もログ。
    GUI.Label(labelPosition, "stretchHeight/Width:" + buttonStyle.stretchHeight.ToString() + "/" + buttonStyle.stretchWidth.ToString());
}