Introduction and use of the Outline (stroke) component of Unity UGUI

1. What is Outline (stroke) component?

Outline (stroke) component is a special effect component in Unity UGUI, which is used to add stroke effect to UI elements. You can make UI elements stand out more visually by setting the color, width, and blur of the stroke.

2. Outline (stroke) component works

The Outline (stroke) component achieves the stroke effect by drawing multiple identical UI elements around the UI element and setting different colors and sizes. The width and blur of the stroke can be controlled by adjusting the parameters.

3. Common attributes of Outline (stroke) components

• Effect Color: The color of the stroke.
• Effect Distance: The distance of the stroke, which can be set as a positive or negative value.
• Use Graphic Alpha: Whether to use the transparency of the UI element as the transparency of the stroke.
• Blur: How blurry the stroke is.
• Outline: The width of the stroke.

4. Common functions of Outline (stroke) components

• ModifyMesh: Modify the grid of UI elements for drawing stroke effects.

5. Complete example code

Example 1: Add a red stroke to the button

using UnityEngine;
 using UnityEngine.UI;

 public class Example1 : MonoBehaviour
 {
     public Button button;
     public Outline outline;

     void Start()
     {
         outline.effectColor = Color.red;
         outline. effectDistance = new Vector2(2, -2);
         outline.useGraphicAlpha = true;
         outline. blur = 0;
         outline.outline = 5;
     }
 }
 

Operation steps:

1. Create a button and attach the Example1 script to the button.
2. Drag the Outline component of the button to the outline variable of the Example1 script.
3. In the Start function, set the attributes of outline, including effectColor, effectDistance, useGraphicAlpha, blur and outline.

Notes:

• The color, distance, transparency, blur and width of the stroke can be adjusted as desired.

Example 2: Add a blue stroke to the text

using UnityEngine;
 using UnityEngine.UI;

 public class Example2 : MonoBehaviour
 {
     public Text text;
     public Outline outline;

     void Start()
     {
         outline.effectColor = Color.blue;
         outline. effectDistance = new Vector2(1, -1);
         outline.useGraphicAlpha = true;
         outline. blur = 0;
         outline.outline = 3;
     }
 }
 

Operation steps:

1. Create a text object and attach the Example2 script to the text object.
2. Drag the Outline component of the text object to the outline variable of the Example2 script.
3. In the Start function, set the attributes of outline, including effectColor, effectDistance, useGraphicAlpha, blur and outline.

Notes:

• The color, distance, transparency, blur and width of the stroke can be adjusted as desired.

Example 3: Add a green stroke to the picture

using UnityEngine;
 using UnityEngine.UI;

 public class Example3 : MonoBehaviour
 {
     public Image image;
     public Outline outline;

     void Start()
     {
         outline.effectColor = Color.green;
         outline. effectDistance = new Vector2(3, -3);
         outline.useGraphicAlpha = true;
         outline. blur = 0;
         outline.outline = 7;
     }
 }
 

Operation steps:

1. Create a picture object and attach the Example3 script to the picture object.
2. Drag the Outline component of the image object to the outline variable of the Example3 script.
3. In the Start function, set the attributes of outline, including effectColor, effectDistance, useGraphicAlpha, blur and outline.

Notes:

• The color, distance, transparency, blur and width of the stroke can be adjusted as desired.

Example 4: Add a yellow stroke to the slider

using UnityEngine;
 using UnityEngine.UI;

 public class Example4 : MonoBehaviour
 {
     public Slider slider;
     public Outline outline;

     void Start()
     {
         outline.effectColor = Color.yellow;
         outline. effectDistance = new Vector2(2, -2);
         outline.useGraphicAlpha = true;
         outline. blur = 0;
         outline.outline = 5;
     }
 }
 

Operation steps:

1. Create a slider object and set Example4The script is attached to the slider object.
2. Drag the Outline component of the slider object to the outline variable of the Example4 script.
3. In the Start function, set the attributes of outline, including effectColor, effectDistance, useGraphicAlpha, blur and outline.

Notes:

• The color, distance, transparency, blur and width of the stroke can be adjusted as desired.

Example 5: Add a purple stroke to the input box

using UnityEngine;
 using UnityEngine.UI;

 public class Example5 : MonoBehaviour
 {
     public InputField inputField;
     public Outline outline;

     void Start()
     {
         outline.effectColor = Color.magenta;
         outline. effectDistance = new Vector2(1, -1);
         outline.useGraphicAlpha = true;
         outline. blur = 0;
         outline.outline = 3;
     }
 }
 

Operation steps:

1. Create an input box object and attach the Example5 script to the input box object.
2. Drag the Outline component of the input box object to the outline variable of the Example5 script.
3. In the Start function, set the attributes of outline, including effectColor, effectDistance, useGraphicAlpha, blur and outline.

Notes:

• The color, distance, transparency, blur and width of the stroke can be adjusted as desired.

References

• Unity official document: Outline

__EOF__

.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out
}

@keyframes octocat-wave {

0%,
100% {
transform: rotate(0)
}

20%,
60% {
transform: rotate(-25deg)
}

40%,
80% {
transform: rotate(10deg)
}
}

@media (max-width:500px) {
.github-corner:hover .octo-arm {
animation: none
}

.github-corner.octo-arm {
animation: octocat-wave 560ms ease-in-out
}
}

The author of this article:

Blank



Link to this article:

Copyright statement: Unless otherwise stated, all articles on this blog adopt the BY-NC-SA license agreement. Please indicate the source!
Support bloggers: If you think the article is helpful to you, you can click in the lower right corner of the article
【
recommend】

Click. Your encouragement is the greatest motivation for bloggers!