背景和历史版本在下面这篇博客中查看:
Unity & 蓝湖 关于UI工作流优化的思考
最新版本:
本文旨在让不会使用Unity的其他人员在简单了解该工具后,可以帮助研发人员搭建Unity中的UI预制体,研发人员稍作调整即可用,以减轻研发人员的工作压力。
一个UI视图的预制体的制作步骤如下:
1.在蓝湖中下载该视图的所有相关切图
2.将下载的切图资源包解压缩后,拖入到Unity中Project窗口的Assets目录中的任一文件夹内
3.选中所有切图,在Inspector窗口修改Texture Type为Sprite类型,并点击右下角的Apply
4.在顶部菜单栏SKFramework中找到LanHu,打开窗口
5.点击浏览按钮选择该视图的切图所在文件夹
6.点击创建,创建一个Canvas画布,也可以选择场景中已有的Canvas
7.添加
点击添加按钮,添加一项UI视图元素
在蓝湖中点击切图的样式信息中的内容即可复制
回到Unity,点击粘贴按钮,将从蓝湖中复制的内容粘贴到对应参数中
8.删除
点击”-“号按钮,可以将该项进行移除
点击清空按钮,可以清空当前所有的配置信息
9.收缩
配置信息过多时,点击收缩按钮,可以关闭所有折叠栏
10.展开
点击展开按钮,可以打开所有折叠栏
11.生成
点击生成后,工具会根据填写的配置信息,在切图所在文件夹中加载指定切图,并将其设置到指定位置、设置指定大小,最终将生成的UI视图创建为prefab预制体。
随着预制体的生成,工具还会将该视图的所有配置信息以资产的形式保存下来
12.导入
当想要修改一个UI视图的某一元素时,点击导入按钮,将该视图的配置资产文件进行导入,修改配置内容后重新生成即可。
13.预览生成的UI视图
打开Scene窗口中的2D选项
在Hierarchy窗口找到Canvas中的UI视图,双击聚焦查看
工具完整代码:
using System;
namespace SK.Framework
{
///
/// 蓝湖界面UI元素
///
[Serializable]
public class LanHuViewElement
{
///
/// 图层名称
///
public string name;
///
/// 位置x
///
public string x;
///
/// 位置y
///
public string y;
///
/// 宽度
///
public string width;
///
/// 高度
///
public string height;
///
/// 不透明度
///
public string opacity;
///
/// 像素倍数
///
public string pixel = "x1";
///
/// 构造函数
///
public LanHuViewElement(string name, string x, string y, string width, string height, string opacity, string pixel)
{
this.name = name;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.opacity = opacity;
this.pixel = pixel;
}
}
}
using UnityEngine;
using System.Collections.Generic;
namespace SK.Framework
{
public class LanHuView : ScriptableObject
{
///
/// 存放切图的文件夹路径
///
public string path;
public List elements = new List(0);
}
}
using System.IO;
using UnityEditor;
using UnityEngine;
using UnityEngine.UI;
using System.Collections.Generic;
namespace SK.Framework
{
///
/// 蓝湖UI界面搭建工具
///
public class LanHu : EditorWindow
{
[MenuItem("SKFramework/LanHu")]
private static void Open()
{
GetWindow("LanHu").Show();
}
private string path;
private List elements;
private Vector2 scroll;
private const float labelWidth = 70f;
private Dictionary foldoutDic;
private CanvasScaler canvasScaler;
private void OnEnable()
{
path = "Assets";
elements = new List();
foldoutDic = new Dictionary();
}
private void OnGUI()
{
OnTopGUI();
OnElementsGUI();
OnMenuGUI();
}
private void OnTopGUI()
{
GUILayout.BeginHorizontal();
GUILayout.Label("切图文件夹路径:", GUILayout.Width(100f));
EditorGUILayout.TextField(path);
if (GUILayout.Button("浏览", GUILayout.Width(40f)))
{
//Assets相对路径
path = EditorUtility.OpenFolderPanel("选择切图文件夹", "", "").Replace(Application.dataPath, "Assets");
}
GUILayout.EndHorizontal();
GUILayout.BeginHorizontal();
GUILayout.Label("Canvas Scaler", GUILayout.Width(100f));
canvasScaler = (CanvasScaler)EditorGUILayout.ObjectField(canvasScaler, typeof(CanvasScaler), true);
if (canvasScaler == null)
{
if (GUILayout.Button("创建", GUILayout.Width(40f)))
{
var canvas = new GameObject("Canvas").AddComponent