对于游戏前端开发的同学应该多多少少都遇到了蛋疼的UI和美术的沟通问题，至少我是如此。目前来说前端UI制作尚分为两派：1.手动UGUI类型；2.PSD转UGUI类型。我自然也都经历过两种给我带来的体验，那各有各的酸爽，等会细说。我还遇到一个比较舒服的是策划摆UI，程序只负责添加引用，哇。。这感觉难以忘怀，但是有几个厂能有这种工作流呢？所以还是回归现实，来说一下最常见（本人工作经验不长，所以可能见到的有局限，见谅）的两种工作方式的痛点。
1.手码UGUI
这无非是最简单粗暴的制作流程，优势自然是0学习成本，上手就会。同时带来的问题就异常的多：摆放位置有异议、字体颜色有差异、找图片引用很蛋疼等。当然后两种问题来说，项目和美术沟通好，如何有规律的整理好资源就理论上能解决（就我之前项目经验来说并没有找到有效的解决方案）。市场上比较流行的FGUI、unity官方的UIElement似乎都逃不过这些问题。
2.PSD转UGUI
这种方法看似是很美好的方案，由美术提供PSD直接解决了位置和元素大小问题，就我所经历的项目以及我看过的这种方案的都是在PSD的层级中命名来实现组件添加（如@Image=xxx来表明这是一个有Image组件的实体），这种做法很美好，只需要有一个很规范的目录来指明某个关键词对应什么功能，但是维护一个好的目录说明这也是一个问题。就我项目来说，这个工具经过几代人的迭代，已经变得混乱不堪（当然你不指望每一个人都有一个好习惯，每个人有自己的想法，最后导致的一个功能的代码有多种不同的表现，反正我遇到的是如此）。代码维护困难这是其一，其二是对美术和程序来说有很大的学习成本，当组件越来越多时，美术就需要关注层级问题也越来越多，但是这本身是美术不应该关注的问题。而当美术做好的PSD给到程序，理想化的是程序只需要点一下“生成”就可以得到自己想要的预制体，但是，“理想”终究是理想，美术总会出一些错误，比如“image”写成“imgae”，当然这些都是小问题，但是当把所有的组件都在层级名称上定义时，就会出现名字很长，很难检查的问题（如图1）。如果把所有的组件数据都交由层级名称上，就会存在一个数据格式问题，如设置锚点，本来UGUI上点一下就能将锚点设置到左上角，而在PSD中就要变成0x1x0x1（如图2）。
图1
图二
3.痛点整理
那么如上两种方案，方案二解决了方案一的位置大小问题，带来了美术负担，且增加了美术程序的学习成本，且考虑有命名出错的风险，并不能给程序节约很多的时间，反而如果工具难以维护，那更增加了程序的查错成本（我为了设置一个锚点需要翻文档很多遍，还要查程序赋值顺序等问题）。那么，我取两者的优点，用PSD生成UGUI主体（具有位置、大小、文本、图片引用等），用UGUI添加组件，是否就能同时减小美术负担，也不增加程序工作量呢？接下来开始实践这个想法。
4.过程
解析PSD。PSD层级分类三类：图片、文件夹、文字。对于任意层级，他们共有的属性都是大小和位置。对于图片层级我们只需要额外知道其引用的图片名称，所以规定美术对图片层级以其导出的图片命名。对于文件夹层级就只有一个名称。文本层级就需要获取Size、Color、Value还有字体信息，由于字体是独立包，所以我们用Font=xxx来标记这个字体。效果如图3。所以最终生成出来的预制体只有Image、Text组件，其余组件以及属性值都是在UGUI上进行添加和修改。
图三
5.数据保留
只有上述几个功能肯定是不够的，考虑到经常会有换UI的需求，必然涉及到数据保留的问题。那保留数据就要在PSD层级和预制体层级之间找到一个映射关系。在没有额外的数据文件的情况下，只有“层级”和“名称”的组合能有效地对应各层级的关系。所以我规定，美术提供的PSD同一层级下，不允许重名。那么美术想在同一层级下复用多张一样的图片怎么办？所以我要给图片层级取个别名（如图4）。所以在有对应关系的情况下，每次重新生成时，会根据PSD的层级来增删改预制体层级，对于已存在的层级，只会改变RectTransform中的Pos和Size两个属性，根据该PSD层级是Image还是Text，来修改组件特有的属性，如Image会修改Sprite和ImageType，Text会修改Color，Text，Font，FontSize属性。
有些数据是美术提供给程序的，所以需要为PSD层级添加少量的标签，让美术告诉程序某些数据，比如一个表中元素间距，则用标签grid=10x10来让程序知道间距是多少。根据层级类型，为美术提供不同的标签，以减少美术和程序的沟通问题。
编辑
图四
6.进一步优化
上面几个步骤已经基本完成了本篇内容所需，但是程序依旧需要打开PhotoShop调整美术没有调整好的层级，然后添加标签等一系列操作，并不是每个人都会PSD，有人说“可以学啊”，是！确实得学，但是我就是不想让他学，所以我提供了在Unity里修改PSD的工具（图5）。工具里可以修改、添加、调整PSD层级，修改层级名称，基本满足了90%的操作需求。修改能直接保存至PSD。同时可以对比已有的预设，查看增删问题，还有映射关系。
图5
5.写在最后
目前项目流程反馈良好，组员有新的想法也在积极的优化和修改中。
写于2022.4.8