Unity3d将PSD直接导出成UGUI界面（一）
发表于2018-07-28
制作游戏或者平面程序最枯燥且繁琐的一步可能就是制作UI了。对面美术人员给过来的PSD或者切图，对照一张布局图来一个一个UI的拼不仅会消耗很多时间，而且往往会有像素级的偏差，对于有强迫症的美工或者程序来说大概会有点抓狂。值得庆幸的是还是有现成的插件供我们使用，可是实现自动切图和一键生成界面。
之前在使用psd2ugui，可以在某宝直接买到但不支持中文图层名，不能设置anchor和pivot，生成的UI图片默认设置sliced且position的z轴会莫名有个非0值，可以自定义控件但是较繁琐，可以打包图集但是会和Unity的sprite package产生冲突导致经常性的Error log。
由于使用过程中对要求平面整理psd且不能使用他们习惯的中文命名，于是最后还是决定换个插件，所以找到了今天的主角，Psd 2 Unity uGUI Pro。这款插件目前可能只能通过Asset Store或者某宝代购买到，但是支持中文图层名（咨询过插件制作者表示所有语言都支持），可以很完美的生成UI界面且编辑简单。但是Unity5.5以后的版本会因为.Net版本的问题导致不可用。不过直接给插件制作者沟通后他表示可以发一个可用的版本过来。
首先导入unitpackage，将Photoshop Scripts文件夹下的Psd 2 Unity Pro - Digest.jsxbin文件拷贝到PhotoShop的插件目录下，Windows和Mac OS的目录如下：
• OSX: /Applications/Adobe Photoshop XXX/Presets/Scripts/ • Windows: [Adobe Photoshop Installation Path]\Presets\Scripts\
打开psd文档并对图层进行编辑，PSD的图层结构就是UI的层级结构。
可以使用tag来对导出和UI控件信息进行设置，可参考如下表格：
编辑好之后选择文件->脚本->Psd 2 Unity Pro - Digest(英文版File->Scripts->Psd 2 Unity Pro - Digest)一键导出图片和界面信息。导出后我们可以在psd文件的同级目录下找到一个assets文件夹和一个structure.json文件，前者为图片资源文件夹，后者为界面信息文件的json文件。
右击Project视图的空白处，选择Set as Psd 2 Unity Pro’s Target，可以打开界面生成设置：
其中Structure File为生成的structure.json文件，Assets Folder为生成的assets文件夹，Fonts Folder为使用的字体所在的文件夹，如果没有生成Text文件则不需要设置。Root为生成的UI界面的父级节点，Default Setting可以设置默认的anchor和pivot信息，当然psd文档中已经设置过的会单个控件会覆盖这一设置。设置完成之后点击Compse!按钮就可以生成界面啦！
当然我们也可以在生成界面后对控件进行设置，不过插件提供的快捷设置真的很好用。使用这个插件之后我们就可以专注在逻辑代码的设计编写上而不必跟psd文和手动搭建UI界面作斗争啦！