ToB企服应用市场:ToB评测及商务社交产业平台

标题: Unity UGUI的Outline(描边)组件的介绍及使用 [打印本页]

---

作者: 傲渊山岳    时间: 2023-7-29 18:44
标题: Unity UGUI的Outline(描边)组件的介绍及使用
Unity UGUI的Outline(描边)组件的介绍及使用

1. 什么是Outline(描边)组件？

Outline(描边)组件是Unity UGUI中的一种特效组件，用于给UI元素添加描边效果。通过设置描边的颜色、宽度和模糊程度，可以使UI元素在视觉上更加突出。
2. Outline(描边)组件的工作原理

Outline(描边)组件通过在UI元素周围绘制多个相同的UI元素，并设置不同的颜色和大小，从而实现描边的效果。描边的宽度和模糊程度可以通过调整参数来控制。
3. Outline(描边)组件的常用属性

• Effect Color：描边的颜色。
  
• Effect Distance：描边的距离，可以设置为正值或负值。
  
• Use Graphic Alpha：是否使用UI元素的透明度作为描边的透明度。
  
• Blur：描边的模糊程度。
  
• Outline：描边的宽度。
  

4. Outline(描边)组件的常用函数

• ModifyMesh：修改UI元素的网格，用于绘制描边效果。
  

5. 完整例子代码

例子1：给按钮添加红色描边

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class Example1 : MonoBehaviour
5. {
6.     public Button button;
7.     public Outline outline;
9.     void Start()
10.     {
11.         outline.effectColor = Color.red;
12.         outline.effectDistance = new Vector2(2, -2);
13.         outline.useGraphicAlpha = true;
14.         outline.blur = 0;
15.         outline.outline = 5;
16.     }
17. }

复制代码

操作步骤：

• 创建一个按钮，并将Example1脚本挂载到按钮上。
  
• 将按钮的Outline组件拖拽到Example1脚本的outline变量上。
  
• 在Start函数中，设置outline的属性，包括effectColor、effectDistance、useGraphicAlpha、blur和outline。
  

注意事项：

• 可以根据需要调整描边的颜色、距离、透明度、模糊程度和宽度。
  

例子2：给文本添加蓝色描边

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class Example2 : MonoBehaviour
5. {
6.     public Text text;
7.     public Outline outline;
9.     void Start()
10.     {
11.         outline.effectColor = Color.blue;
12.         outline.effectDistance = new Vector2(1, -1);
13.         outline.useGraphicAlpha = true;
14.         outline.blur = 0;
15.         outline.outline = 3;
16.     }
17. }

复制代码

操作步骤：

• 创建一个文本对象，并将Example2脚本挂载到文本对象上。
  
• 将文本对象的Outline组件拖拽到Example2脚本的outline变量上。
  
• 在Start函数中，设置outline的属性，包括effectColor、effectDistance、useGraphicAlpha、blur和outline。
  

注意事项：

• 可以根据需要调整描边的颜色、距离、透明度、模糊程度和宽度。
  

例子3：给图片添加绿色描边

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class Example3 : MonoBehaviour
5. {
6.     public Image image;
7.     public Outline outline;
9.     void Start()
10.     {
11.         outline.effectColor = Color.green;
12.         outline.effectDistance = new Vector2(3, -3);
13.         outline.useGraphicAlpha = true;
14.         outline.blur = 0;
15.         outline.outline = 7;
16.     }
17. }

复制代码

操作步骤：

• 创建一个图片对象，并将Example3脚本挂载到图片对象上。
  
• 将图片对象的Outline组件拖拽到Example3脚本的outline变量上。
  
• 在Start函数中，设置outline的属性，包括effectColor、effectDistance、useGraphicAlpha、blur和outline。
  

注意事项：

• 可以根据需要调整描边的颜色、距离、透明度、模糊程度和宽度。
  

例子4：给滑动条添加黄色描边

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class Example4 : MonoBehaviour
5. {
6.     public Slider slider;
7.     public Outline outline;
9.     void Start()
10.     {
11.         outline.effectColor = Color.yellow;
12.         outline.effectDistance = new Vector2(2, -2);
13.         outline.useGraphicAlpha = true;
14.         outline.blur = 0;
15.         outline.outline = 5;
16.     }
17. }

复制代码

操作步骤：

• 创建一个滑动条对象，并将Example4脚本挂载到滑动条对象上。
  
• 将滑动条对象的Outline组件拖拽到Example4脚本的outline变量上。
  
• 在Start函数中，设置outline的属性，包括effectColor、effectDistance、useGraphicAlpha、blur和outline。
  

注意事项：

• 可以根据需要调整描边的颜色、距离、透明度、模糊程度和宽度。
  

例子5：给输入框添加紫色描边

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class Example5 : MonoBehaviour
5. {
6.     public InputField inputField;
7.     public Outline outline;
9.     void Start()
10.     {
11.         outline.effectColor = Color.magenta;
12.         outline.effectDistance = new Vector2(1, -1);
13.         outline.useGraphicAlpha = true;
14.         outline.blur = 0;
15.         outline.outline = 3;
16.     }
17. }

复制代码

操作步骤：

• 创建一个输入框对象，并将Example5脚本挂载到输入框对象上。
  
• 将输入框对象的Outline组件拖拽到Example5脚本的outline变量上。
  
• 在Start函数中，设置outline的属性，包括effectColor、effectDistance、useGraphicAlpha、blur和outline。
  

注意事项：

• 可以根据需要调整描边的颜色、距离、透明度、模糊程度和宽度。
  

参考资料

• Unity官方文档：Outline
  

            本文作者：                            Blank                            
        本文链接：        
        版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
        声援博主：如果您觉得文章对您有帮助，可以点击文章右下角            【                推荐】                    一下。您的鼓励是博主的最大动力！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4