Unity 自带 GUIStyle 效果查看器

约定不等于承诺〃 2024-02-19 21:29 9阅读 0赞

在编写 Unity 的扩展工具时，可能会需要用到 GUIStyle 来添加额外的视觉效果，Unity 本身自带了一些默认的效果可供使用。以下就是一个自用的效果查看器的代码。  
在此为了丰富视觉效果，自定义了一个 GUIStyle，并且额外添加了一个输出 GUIStyle 设置信息的功能。

using UnityEngine;
    using UnityEditor;
    
    /// <summary>
    /// Unity 自带的 GUIStyle 效果查看器
    /// </summary>
    public class GUIStyleViewerUtil : EditorWindow
    {
        
        /// <summary>
        /// 滑动条
        /// </summary>
        private Vector2 mScrollView = Vector2.zero;
        /// <summary>
        /// 寻找的样式名称
        /// </summary>
        private string mSearchStyle = "";
        /// <summary>
        /// 样式缓存
        /// </summary>
        private static GUIStyle mBtnStyle;
    
        [MenuItem("Util/GUIStyle 效果查看器")]
        private static void MenuClicked()
        {
        
            GetWindow<GUIStyleViewerUtil>("GUIStyle查看器", true);
            // 初始化一个按钮的样式
            mBtnStyle = GetBtnStyle();
        }
    
        private void OnGUI()
        {
        
            GUILayout.Space(20);
    
            // 设置一个查找的功能
            GUILayout.BeginHorizontal("HelpBox");
            GUILayout.Space(20);
            mSearchStyle = EditorGUILayout.TextField("", mSearchStyle, "SearchTextField");
            GUILayout.Label("", "SearchCancelButtonEmpty");
            GUILayout.EndHorizontal();
    
            // 设置滚动栏
            mScrollView = GUILayout.BeginScrollView(mScrollView);
            // 遍历并显示所有符合条件的 Unity 自带的 GUIStyle
            foreach (GUIStyle style in GUI.skin.customStyles)
            {
        
                if (style.name.ToLower().Contains(mSearchStyle.ToLower()))
                {
        
                    GUILayout.Space(10);
                    // 为了让显示的布局看着更舒服一些，需要以当前 style 为原型新建一个 GUIStyle
                    // 因为接下来可能会对文字居中等方面进行调整，
                    // 而如果直接更改原来的 style，则会导致系统中的对应 UI 样式和布局也发生改变
                    GUIStyle tmp = new GUIStyle(style);
                    DrawStyleItem(tmp);
                }
            }
            GUILayout.EndScrollView();
        }
    
        /// <summary>
        /// 绘制对应的 GUIStyle
        /// </summary>
        /// <param name="style"></param>
        private void DrawStyleItem(GUIStyle style)
        {
        
    
            GUILayout.BeginHorizontal("box", GUILayout.Height(style.fixedHeight));
            GUILayout.Space(20);
            // 获取按钮样式
            GUIStyle tmp = mBtnStyle;
    
            // 设置第一个按钮，点击后可以复制当前 GUIStyle 的名字信息
            if (GUILayout.Button("<color=#000000FF>复制到剪贴板</color>", tmp))
            {
        
                CommonUtil.CopyText(style.name);
            }
    
            GUILayout.Space(20);
    
            // 设置第二个按钮，点击后在控制台输出该 GUIStyle 的设置参数
            if (GUILayout.Button("<color=#FFFFFFFF>查看Style参数</color>", tmp))
            {
        
                ShowGUIStyleMsg(style.name);
            }
            GUILayout.Space(30);
    
            // 显示当前 GUIStyle 的名字
            EditorGUILayout.SelectableLabel(style.name);
    
            // 设置左右对称布局，以此为分界线，把前后的布局对称
            GUILayout.FlexibleSpace();
    
            // 设置文本居中显示
            style.alignment = TextAnchor.MiddleCenter;
            // 显示当前的样式及其名称
            EditorGUILayout.SelectableLabel(style.name, style);
    
            GUILayout.Space(100);
    
            // 单独显示样式
            EditorGUILayout.SelectableLabel("", style, 
            								GUILayout.Height(style.fixedHeight),
            							 	GUILayout.Width(style.fixedWidth));
            GUILayout.Space(100);
    
            GUILayout.EndHorizontal();
        }
    
        /// <summary>
        /// 创建一个按钮样式，用来作为本界面中的按钮基础
        /// </summary>
        /// <returns></returns>
        public static GUIStyle GetBtnStyle()
        {
        
            // 使用系统自带的 "AC Button" 样式作为原型，因为 "AC Button" 本身就具有点击效果了
            GUIStyle style = new GUIStyle("AC Button");
    
            // 将样式的点击时的效果图，替换为系统自带的 "flow node 4 on" 样式
            GUIStyle active = new GUIStyle("flow node 4 on");
            style.active.background = active.normal.background;
    
            // 将平时按钮的效果图，替换为系统自带的 "flow node 4" 样式
            GUIStyle normal = new GUIStyle("flow node 4");
            style.normal.background = normal.normal.background;
    
            // 参考 "flow node 4" 的内部参数，设置一些图片的参数。
            // 如果不设置的话，则图片会按照原 "AC Button" 的样式进行显示
            // 因为图片不一样，所以会有显示上的问题。
            style.stretchHeight = true;
            style.stretchWidth = true;
            style.border = new RectOffset(11, 11, 11, 15);
            style.margin = new RectOffset(0, 0, 0, 0);
            style.padding = new RectOffset(0, 0, 0, 0);
            style.overflow = new RectOffset(7, 7, 6, 9);
    
            // 进行文本方面的设置
            style.alignment = TextAnchor.MiddleCenter;
            style.fontSize = 30;
            style.richText = true;
    
            return style;
        }
    
        /// <summary>
        /// 展示指定的 GUI 样式的一些数值
        /// </summary>
        /// <param name="style"></param>
        public void ShowGUIStyleMsg(string style)
        {
        
            // 清空控制台信息，防止混淆
            EditorUtil.ClearConsole();
    
            GUIStyle tmp = new GUIStyle(style);
            Debug.Log("Style Name: " + tmp.name);
            Debug.Log("Style Normal: " + tmp.normal.background);
            Debug.Log("Style Normal Color: " + tmp.normal.textColor);
            Debug.Log("Style Active: " + tmp.active.background);
            Debug.Log("Style Active Color: " + tmp.active.textColor);
            Debug.Log("Style Hover: " + tmp.hover.background);
            Debug.Log("Style Hover Color: " + tmp.hover.textColor);
            Debug.Log("Style Focused: " + tmp.focused.background);
            Debug.Log("Style Focused Color: " + tmp.focused.textColor);
            Debug.Log("Style border: " + tmp.border);
            Debug.Log("Style margin: " + tmp.margin);
            Debug.Log("Style padding: " + tmp.padding);
            Debug.Log("Style overflow: " + tmp.overflow);
            Debug.Log("Style fixedWidth: " + tmp.fixedWidth);
            Debug.Log("Style fixedHeight: " + tmp.fixedHeight);
            Debug.Log("Style stretchWidth: " + tmp.stretchWidth);
            Debug.Log("Style stretchHeight: " + tmp.stretchHeight);
            Debug.Log("Style lineHeight: " + tmp.lineHeight);
            Debug.Log("Style Font: " + tmp.font);
            Debug.Log("Style Font Size: " + tmp.fontSize);
        }
    }

完成后的效果如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V2ZXJOZXNzMDEw_size_16_color_FFFFFF_t_70]

#### 注意： ####

需要注意的是自定义的按钮要完全使用新创建的 GUIStyle，可以通过 Unity 已有的样式作为模板创建，但是不要修改原有样式。

// 遍历并显示所有符合条件的 Unity 自带的 GUIStyle
    foreach (GUIStyle style in GUI.skin.customStyles)
    {
        
    	if (style.name.ToLower().Contains(mSearchStyle.ToLower()))
        {
        
        	GUILayout.Space(10);              
            GUIStyle tmp = new GUIStyle(style);
            DrawStyleItem(tmp);
        }
    }

由于我在后续代码中使用了文本居中的设置，所以此处必须创建新的 GUIStyle，否则就会修改系统自带的效果，最直观的影响就是控制台 Console 的输出结果也会全部居中显示。如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V2ZXJOZXNzMDEw_size_16_color_FFFFFF_t_70 1]  
最后还有一点需要注意的是`EditorUtil.ClearConsole();`这个方法是一个清空控制台输出的方法，目的是防止过多信息的混淆。定义如下：

/// <summary>
    /// 通过脚本清空 Unity 控制台日志信息
    /// </summary>
    public static void ClearConsole()
    {
                    
    	Assembly assembly = Assembly.GetAssembly(typeof(SceneView));
        Type logEntries = assembly.GetType("UnityEditor.LogEntries");
        MethodInfo clearConsoleMethod = logEntries.GetMethod("Clear");
        clearConsoleMethod.Invoke(new object(), null);
        Debug.Log("已清空控制台日志信息！");
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V2ZXJOZXNzMDEw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d733021fc2414220a617432b2dd957ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V2ZXJOZXNzMDEw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/3eba8d8dd24d4b49bb8eb272132f1249.png