Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. Dismiss Notice

Button with border(image)

Discussion in 'Immediate Mode GUI (IMGUI)' started by TakisobieWax, Aug 18, 2014.

  1. TakisobieWax

    TakisobieWax

    Joined:
    Feb 26, 2014
    Posts:
    5
  2. DarkArts-Studios

    DarkArts-Studios

    Joined:
    May 2, 2013
    Posts:
    389
    If you're using the built-in Unity GUI system (I assume?) You need to create a GUI Skin.

    There's a good tutorial on using them that you can read here.
     
  3. TakisobieWax

    TakisobieWax

    Joined:
    Feb 26, 2014
    Posts:
    5
    Okay, thx.
     
  4. IsGreen

    IsGreen

    Joined:
    Jan 17, 2014
    Posts:
    206
    If you have only one script using a custom GUIStyle, is not necessary create a GUISkin(recommended when we're using a custom GUIStyle in a lot of scripts).

    For one script, you can create a GUIStyle object directly in script. This is the code:

    Code (CSharp):
    1. using UnityEngine;
    2. using System.Collections;
    3.  
    4. public class buttonBorder : MonoBehaviour {
    5.  
    6.     public GUIStyle buttonBorderStyle;
    7.     public string text = "buttonText";
    8.     public Vector2 buttonPosition = Vector2.zero;
    9.  
    10.     Rect rect;
    11.  
    12.     void Start(){
    13.  
    14.         rect = new Rect();
    15.         rect.position = buttonPosition;
    16.         rect.size = buttonBorderStyle.CalcSize(new GUIContent(text));
    17.  
    18.     }
    19.  
    20.     void OnGUI(){
    21.  
    22.         GUI.Button(rect,text,buttonBorderStyle);
    23.  
    24.     }
    25.  
    26. }
    Proyect example, download link.

    CalcSize, calculate rectangle text size. Modify Padding values in GUIStyle to create button margins.

    To add border image to button, add background image in GUIStyle Normal rendering setting, and others necessary rendering settings.
     
  5. TakisobieWax

    TakisobieWax

    Joined:
    Feb 26, 2014
    Posts:
    5
    I want it to use in a few scripts, so....Can someone show me how to make a border for the button? (Using the guiStyle).
     
  6. IsGreen

    IsGreen

    Joined:
    Jan 17, 2014
    Posts:
    206
    Repeat.

    GUISkin have 20 GUIStyles, and you're only going to use one for the buttons.

    You can:
    -Modify GUISkin.button.
    -Create a custom GUIStyle in GUISkin.
    -Create independent custom GUIStyle.

    Bye.
     
    Last edited: Aug 25, 2014