Psd 2 Unity uGUI Pro 使用介绍

本文长期连接

对应工程文件及示例工程请在这里下载，里面包含所有需要的内容。

无意中看到Unity Hub上一篇关于如何制作精良UGUI UI的文章，如下图：

看到有个叫Psd 2 Unity uGUI Pro 的工具，说是可以直接从ps导图到Unity,并且使用。看上去很有意思的样子。于是决定试一下。

我的环境是：
windows10
Unity2018.4.9f1
PhotoShop6
下载了Psd 2 Unity uGUI Pro 后，顺利导入Unity,如图：

查看了一下包中的Documentation，里面有个Readme的文件，打开喵喵。

简单的看了下（英文的，差强人意了，这里就不翻译了，网上有，看不懂的肯定没过4级，面壁去）
大意是一些操作步骤，命名规范等等。。。

按照文档，打开Sample/Scene Store.psd这个文件（ps6打开），一顿提示，文字上还有感叹号，真恶心。

原来是字体没有放到系统，不得不佩服外国人的严谨，我做AsstorStore的时候从来没有把对应字体打包的（后来发现我错了，天下乌鸦 嘿嘿嘿）。

把这两个字体放到C:\Windows\Fonts下，如图：

结果，再次打开包范例的psd文件，还出现字体不足，我发现我刚夸完外国人，是不是被他们骗了？

又下载了一个字体，哭吧。

最后效果如图：

这些搞完了，按照文档需要执行如图操作：

文档原文是：Run File ▸ Scripts ▸ Psd 2 Unity Pro - Digest and follow the instructions. A *-assets folder
and a *-structure.json file will be exported besides your PSD file

看图说话：
首先给个提示，至于说没有保存哪些不值得截图。

然后ps就开始执行脚本，在那闪啊闪，哇咔咔，感觉程序员要逆天，哪里都能整段代码跑一跑的节奏。

执行完了，显示如图：

然后，打开psd文件所在的目录（我这里是另存为了一份，看下面图片，加了个后缀_copy）

接下来，按照文档是：
Open Unity, import the *-assets folder and *-structure file you got in step 3 into your project

我们是包自带的，所以，打开Unity这两个玩意就直接在包里面了。我们去看看：

接下来，按照文档所示：
In the Project panel, find and right click the -structure file you just imported. Select Set as
Psd 2 Unity Pro’s Target.（就是要你右键那个-structure的文件，选择Set as
Psd 2 Unity Pro’s Target.）如图：

接着打开一个Panel界面：

然后设置一下字体Fonts

注意，这个地方我把缺省的几个字体补上了。

In the Psd 2 Unity Pro panel which just showed up, set a Target Root to compose to.
Optionally, set Fonts Folder contains fonts used in your PSD.

然后我想不设置Root试试，看会不会有什么神奇的事情发生。结果，弹出提示框了。

所以，我的意思是告诉各位看官，我已经试过了，你们不用试了。

然后新建了一个空对象，附上RectTransform组件，其实这里我还贱贱的直接生成了UGUI的Panel,试了下，然后点Compose！

然后如图所示，一个界面就出来了：

这里特别注意，我特异标记了scroll，这里只有素材，没有脚本的哦。所以不要想多了。

最后放两张图片，你们自己对比，你分得清哪个是ps，哪个是生成后的Unity截图吗？

左边小的是Unity Game视图显示的内容，右边大的是PS的内容。

初步介绍就到这里了。

后续会有时间更新，这个算是入门级吧，比起腾讯那种高大上的傲娇感觉要平易近人些。毕竟，我也是一步步跟着做的。连雷都淌了，你还要我怎么做？

看文不留言，bug改不完，这是一个潜规则。程序员的规则，我们跟影视圈的规则不一样，我们不用脱裤子，嚎叫。我们要的就是——爽、用力、快、再快、再快一点，爱死你了。