Unity & 蓝湖 关于UI工作流优化的思考

举报
CoderZ1010 发表于 2022/09/25 05:37:11 2022/09/25
【摘要】         我们Unity项目关于UI界面制作的工作流是这样的,UI设计人员将设计好的UI界面在Adobe XD中上传至蓝湖,Unity程序猿从蓝湖中下载切图资源包导入项目工程中,根据蓝湖中的效果图、样式信息进行界面的搭建: 例如这张首页UI中的第...

        我们Unity项目关于UI界面制作的工作流是这样的,UI设计人员将设计好的UI界面在Adobe XD中上传至蓝湖,Unity程序猿从蓝湖中下载切图资源包导入项目工程中,根据蓝湖中的效果图、样式信息进行界面的搭建:

例如这张首页UI中的第一个按钮,其图层名称为"组646",位置为(209px,605px),大小为(225px,76px)

        首先可以看到位置信息中的685px是指这个图层到顶部的像素大小,可以判断其位置信息是在以左上角为原点的坐标系中的,而且在Unity中RectTransform组件以(0.5,0.5)为默认的轴心点,因此在考虑横坐标时需要计算上该图层宽度的一半,考虑纵坐标时需要计算上该图层高度的一半:

        以这个按钮图层为例,在Unity中我们将其RectTransform组件中的锚点设为左上角,Pivot轴心点使用默认的(0.5,0.5),则其横坐标则是209+225 * 0.5,纵坐标则是-(685 + 76 * 0.5),计算出结果为(321.5,-723):

        有了这样的换算关系后,基于能偷懒则偷懒的原则,我开始思考将其转化为自动化的过程,于是写了这样一个工具,只需要在工具中输入蓝湖中该图层的位置及大小信息,点击确定即可将该按钮设置正确的位置及大小: 

代码如下:


  
  1. using UnityEngine;
  2. using UnityEditor;
  3. using UnityEngine.UI;
  4. namespace SK.Framework
  5. {
  6. public class LanHu : EditorWindow
  7. {
  8. [MenuItem("SKFramework/Tools/Lan Hu")]
  9. private static void Open()
  10. {
  11. GetWindow<LanHu>("蓝湖").Show();
  12. }
  13. private const float labelWidth = 60f;
  14. private float x;
  15. private float y;
  16. private float width;
  17. private float height;
  18. private void OnGUI()
  19. {
  20. //如果未选中任何物体 return
  21. if (Selection.activeTransform == null) return;
  22. RectTransform rt = Selection.activeTransform.GetComponent<RectTransform>();
  23. //如果选中的物体不是UI元素 return
  24. if (rt == null) return;
  25. GUILayout.Label("分辨率: 1920*1080");
  26. EditorGUILayout.Space();
  27. GUILayout.Label("样式信息", "BoldLabel");
  28. GUILayout.BeginHorizontal();
  29. GUILayout.Label("图层", GUILayout.Width(labelWidth));
  30. var image = rt.GetComponent<Image>();
  31. if (image != null && image.sprite != null) EditorGUILayout.TextField(image.sprite.name);
  32. else EditorGUILayout.HelpBox("未发现任何图层", MessageType.Warning);
  33. GUILayout.EndHorizontal();
  34. GUILayout.BeginHorizontal();
  35. GUILayout.Label("位置", GUILayout.Width(labelWidth));
  36. x = EditorGUILayout.FloatField(x);
  37. GUILayout.Label("px");
  38. y = EditorGUILayout.FloatField(y);
  39. GUILayout.Label("px");
  40. GUILayout.EndHorizontal();
  41. GUILayout.BeginHorizontal();
  42. GUILayout.Label("大小", GUILayout.Width(labelWidth));
  43. width = EditorGUILayout.FloatField(width);
  44. GUILayout.Label("px");
  45. height = EditorGUILayout.FloatField(height);
  46. GUILayout.Label("px");
  47. GUILayout.EndHorizontal();
  48. GUILayout.FlexibleSpace();
  49. if (GUILayout.Button("确定"))
  50. {
  51. //调整位置及大小
  52. rt.anchorMin = new Vector2(0, 1);
  53. rt.anchorMax = new Vector2(0, 1);
  54. rt.pivot = Vector2.one * .5f;
  55. rt.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, width);
  56. rt.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, height);
  57. rt.anchoredPosition = new Vector2(x + width / 2f, -(y + height / 2f));
  58. //调整完成后自动设置锚点
  59. RectTransform prt = rt.parent as RectTransform;
  60. Vector2 anchorMin = new Vector2(
  61. rt.anchorMin.x + rt.offsetMin.x / prt.rect.width,
  62. rt.anchorMin.y + rt.offsetMin.y / prt.rect.height);
  63. Vector2 anchorMax = new Vector2(
  64. rt.anchorMax.x + rt.offsetMax.x / prt.rect.width,
  65. rt.anchorMax.y + rt.offsetMax.y / prt.rect.height);
  66. rt.anchorMin = anchorMin;
  67. rt.anchorMax = anchorMax;
  68. rt.offsetMin = rt.offsetMax = Vector2.zero;
  69. EditorUtility.SetDirty(rt);
  70. }
  71. }
  72. private void OnSelectionChange()
  73. {
  74. Repaint();
  75. }
  76. }
  77. }

        以上是在这条偷懒路上的第一个产物,它依然需要手动输入图层的位置、大小信息,随后发现了蓝湖中的这些样式信息是可以点击复制的:

        于是我开始思考将float类型的输入框改为string类型的输入框,将复制来的信息直接粘贴到输入框中,只需要将字符串的最后两个字符px移除,再将其转化为float类型即可,于是有了第二个产物:

代码如下:


  
  1. using UnityEngine;
  2. using UnityEditor;
  3. using UnityEngine.UI;
  4. namespace SK.Framework
  5. {
  6. public class LanHu : EditorWindow
  7. {
  8. [MenuItem("SKFramework/Tools/Lan Hu")]
  9. private static void Open()
  10. {
  11. GetWindow<LanHu>("蓝湖").Show();
  12. }
  13. private const float labelWidth = 60f;
  14. private string x;
  15. private string y;
  16. private string w;
  17. private string h;
  18. private void OnGUI()
  19. {
  20. //如果未选中任何物体 return
  21. if (Selection.activeTransform == null) return;
  22. RectTransform rt = Selection.activeTransform.GetComponent<RectTransform>();
  23. //如果选中的物体不是UI元素 return
  24. if (rt == null) return;
  25. GUILayout.Label("分辨率: 1920*1080");
  26. EditorGUILayout.Space();
  27. GUILayout.Label("样式信息", "BoldLabel");
  28. GUILayout.BeginHorizontal();
  29. GUILayout.Label("图层", GUILayout.Width(labelWidth));
  30. var image = rt.GetComponent<Image>();
  31. if (image != null && image.sprite != null) EditorGUILayout.TextField(image.sprite.name);
  32. else EditorGUILayout.HelpBox("未发现任何图层", MessageType.Warning);
  33. GUILayout.EndHorizontal();
  34. GUILayout.BeginHorizontal();
  35. GUILayout.Label("位置", GUILayout.Width(labelWidth));
  36. x = EditorGUILayout.TextField(x);
  37. y = EditorGUILayout.TextField(y);
  38. GUILayout.EndHorizontal();
  39. GUILayout.BeginHorizontal();
  40. GUILayout.Label("大小", GUILayout.Width(labelWidth));
  41. w = EditorGUILayout.TextField(w);
  42. h = EditorGUILayout.TextField(h);
  43. GUILayout.EndHorizontal();
  44. GUILayout.FlexibleSpace();
  45. if (GUILayout.Button("确定"))
  46. {
  47. float.TryParse(x.Replace(x.Substring(x.Length - 2, 2), string.Empty), out float xValue);
  48. float.TryParse(y.Replace(y.Substring(y.Length - 2, 2), string.Empty), out float yValue);
  49. float.TryParse(w.Replace(w.Substring(w.Length - 2, 2), string.Empty), out float wValue);
  50. float.TryParse(h.Replace(h.Substring(h.Length - 2, 2), string.Empty), out float hValue);
  51. //调整位置及大小
  52. rt.anchorMin = new Vector2(0, 1);
  53. rt.anchorMax = new Vector2(0, 1);
  54. rt.pivot = Vector2.one * .5f;
  55. rt.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, wValue);
  56. rt.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, hValue);
  57. rt.anchoredPosition = new Vector2(xValue + wValue / 2f, -(yValue + hValue / 2f));
  58. //调整完成后自动设置锚点
  59. RectTransform prt = rt.parent as RectTransform;
  60. Vector2 anchorMin = new Vector2(
  61. rt.anchorMin.x + rt.offsetMin.x / prt.rect.width,
  62. rt.anchorMin.y + rt.offsetMin.y / prt.rect.height);
  63. Vector2 anchorMax = new Vector2(
  64. rt.anchorMax.x + rt.offsetMax.x / prt.rect.width,
  65. rt.anchorMax.y + rt.offsetMax.y / prt.rect.height);
  66. rt.anchorMin = anchorMin;
  67. rt.anchorMax = anchorMax;
  68. rt.offsetMin = rt.offsetMax = Vector2.zero;
  69. EditorUtility.SetDirty(rt);
  70. }
  71. }
  72. private void OnSelectionChange()
  73. {
  74. Repaint();
  75. }
  76. }
  77. }

        有了上面的工具后,我又开始了这样的思考,如果我们可以直接拿到一个界面中所有图层的样式信息,包括图层名称、位置信息、大小信息,这些信息形成一个Json数据或其他序列化数据文件,那么便可以通过编写工具一键生成这个界面的Prefab预制体。那么我们只需要定义这样一个数据结构,通过数据反序列化得到这些信息:


  
  1. public class Element
  2. {
  3. //图层名称
  4. public string name;
  5. //横坐标
  6. public string x;
  7. //纵坐标
  8. public string y;
  9. //宽度
  10. public string width;
  11. //高度
  12. public string height;
  13. //不透明度
  14. public string alpha;
  15. }

        于是我开始向UI设计的同事咨询,他们从设计到上传蓝湖有没有中间产物生成,能不能从中间产物中获取一些有用的信息,但是同事回应说是通过插件直接从Adobe XD上传至蓝湖,因此这条路便行不通了。但是后来我觉得既然能有上传蓝湖这样的插件,那么编写一个生成数据文件的插件完全有可能吧,只不过没人去做这件事,所以我还是觉得这个想法是行得通的,奈何自己做不来。随后我又从前端着手,咨询了一些朋友,能否在蓝湖页面中获取这些信息,最后也是不了了之。

        最终只能在Unity中去着手,将更多的工作量通过自动化去完成,于是又有了这样的思路:记录切图所在的文件夹的路径,从蓝湖中复制粘贴界面中所有图层的样式信息,点击生成,通过图层的名称在切图所在的文件夹中加载该切图,创建一个Image物体,通过图层的位置、大小信息去设置该物体的Rect Transform组件属性,最终生成prefab预制体:  

代码如下:


  
  1. using System;
  2. using UnityEngine;
  3. using UnityEditor;
  4. using UnityEngine.UI;
  5. using System.Collections.Generic;
  6. namespace SK.Framework
  7. {
  8. public class LanHu : EditorWindow
  9. {
  10. [MenuItem("SKFramework/Tools/Lan Hu")]
  11. private static void Open()
  12. {
  13. GetWindow<LanHu>("蓝湖").Show();
  14. }
  15. private class Element
  16. {
  17. public string name;
  18. public string x;
  19. public string y;
  20. public string width;
  21. public string height;
  22. public string alpha;
  23. }
  24. private string path;
  25. private List<Element> elements;
  26. private const float labelWidth = 60f;
  27. private Vector2 scroll;
  28. private void OnEnable()
  29. {
  30. elements = new List<Element>();
  31. scroll = Vector2.zero;
  32. }
  33. private void OnDisable()
  34. {
  35. elements.Clear();
  36. elements = null;
  37. }
  38. private void OnGUI()
  39. {
  40. GUILayout.BeginHorizontal();
  41. GUILayout.Label("切图文件夹路径:", GUILayout.Width(100f));
  42. EditorGUILayout.TextField(path);
  43. if(GUILayout.Button("浏览", GUILayout.Width(40f)))
  44. {
  45. //Assets相对路径
  46. path = EditorUtility.OpenFolderPanel("选择切图文件夹", "", "").Replace(Application.dataPath, "Assets");
  47. }
  48. GUILayout.EndHorizontal();
  49. scroll = EditorGUILayout.BeginScrollView(scroll);
  50. for (int i = 0; i < elements.Count; i++)
  51. {
  52. var element = elements[i];
  53. GUILayout.BeginVertical("Box");
  54. GUILayout.BeginHorizontal();
  55. GUILayout.Label("图层", GUILayout.Width(labelWidth));
  56. element.name = EditorGUILayout.TextField(element.name);
  57. if (GUILayout.Button("-", GUILayout.Width(20f)))
  58. {
  59. elements.RemoveAt(i);
  60. Repaint();
  61. }
  62. GUILayout.EndHorizontal();
  63. GUILayout.BeginHorizontal();
  64. GUILayout.Label("位置", GUILayout.Width(labelWidth));
  65. element.x = EditorGUILayout.TextField(element.x);
  66. element.y = EditorGUILayout.TextField(element.y);
  67. GUILayout.EndHorizontal();
  68. GUILayout.BeginHorizontal();
  69. GUILayout.Label("大小", GUILayout.Width(labelWidth));
  70. element.width = EditorGUILayout.TextField(element.width);
  71. element.height = EditorGUILayout.TextField(element.height);
  72. GUILayout.EndHorizontal();
  73. GUILayout.BeginHorizontal();
  74. GUILayout.Label("透明", GUILayout.Width(labelWidth));
  75. element.alpha = EditorGUILayout.TextField(element.alpha);
  76. GUILayout.EndHorizontal();
  77. GUILayout.EndVertical();
  78. }
  79. EditorGUILayout.EndScrollView();
  80. GUILayout.FlexibleSpace();
  81. GUILayout.BeginHorizontal();
  82. if (GUILayout.Button("添加"))
  83. {
  84. elements.Add(new Element());
  85. }
  86. if (GUILayout.Button("生成"))
  87. {
  88. //Canvas
  89. var array = path.Split('/');
  90. var canvas = new GameObject(array[array.Length - 1]).AddComponent<Canvas>();
  91. canvas.renderMode = RenderMode.ScreenSpaceCamera;
  92. var canvasScaler = canvas.gameObject.AddComponent<CanvasScaler>();
  93. canvasScaler.uiScaleMode = CanvasScaler.ScaleMode.ScaleWithScreenSize;
  94. canvasScaler.referenceResolution = new Vector2(1920f, 1080f);
  95. for (int i = 0; i < elements.Count; i++)
  96. {
  97. var element = elements[i];
  98. string spritePath = path + "/" + element.name + "@2x.png";
  99. var obj = AssetDatabase.LoadAssetAtPath<Sprite>(spritePath);
  100. if (obj != null)
  101. {
  102. var image = new GameObject(obj.name).AddComponent<Image>();
  103. image.transform.SetParent(canvas.transform, false);
  104. image.sprite = obj;
  105. RectTransform rt = image.transform as RectTransform;
  106. float.TryParse(element.x.Replace(element.x.Substring(element.x.Length - 2, 2), string.Empty), out float xValue);
  107. float.TryParse(element.y.Replace(element.y.Substring(element.y.Length - 2, 2), string.Empty), out float yValue);
  108. float.TryParse(element.width.Replace(element.width.Substring(element.width.Length - 2, 2), string.Empty), out float wValue);
  109. float.TryParse(element.height.Replace(element.height.Substring(element.height.Length - 2, 2), string.Empty), out float hValue);
  110. //调整位置及大小
  111. rt.anchorMin = new Vector2(0, 1);
  112. rt.anchorMax = new Vector2(0, 1);
  113. rt.pivot = Vector2.one * .5f;
  114. rt.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, wValue);
  115. rt.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, hValue);
  116. rt.anchoredPosition = new Vector2(xValue + wValue / 2f, -(yValue + hValue / 2f));
  117. //调整完成后自动设置锚点
  118. RectTransform prt = rt.parent as RectTransform;
  119. Vector2 anchorMin = new Vector2(
  120. rt.anchorMin.x + rt.offsetMin.x / prt.rect.width,
  121. rt.anchorMin.y + rt.offsetMin.y / prt.rect.height);
  122. Vector2 anchorMax = new Vector2(
  123. rt.anchorMax.x + rt.offsetMax.x / prt.rect.width,
  124. rt.anchorMax.y + rt.offsetMax.y / prt.rect.height);
  125. rt.anchorMin = anchorMin;
  126. rt.anchorMax = anchorMax;
  127. rt.offsetMin = rt.offsetMax = Vector2.zero;
  128. }
  129. else
  130. {
  131. Debug.Log($"<color=yellow>加载切图失败 {spritePath}</color>");
  132. }
  133. }
  134. var prefab = PrefabUtility.SaveAsPrefabAsset(canvas.gameObject, $"Assets/{canvas.name}.prefab", out bool result);
  135. if (!result)
  136. {
  137. Debug.Log($"<color=yellow>生成预制体失败 {canvas.name}</color>");
  138. }
  139. else
  140. {
  141. EditorGUIUtility.PingObject(prefab);
  142. }
  143. }
  144. GUILayout.EndHorizontal();
  145. }
  146. }
  147. }

文章来源: coderz.blog.csdn.net,作者:CoderZ1010,版权归原作者所有,如需转载,请联系作者。

原文链接:coderz.blog.csdn.net/article/details/123074060

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。