canvas 插件_UGUI自动化拼图插件探索

今天为大家带来一款可以在Unity商城里下载的UGUI插件，它就是Psd 2 UGUI Pro

现在让我们来详细的了解下这款插件的强大之处，对于刚刚接触Unity引擎的GUI视觉设计来说，在PS里绘制界面不是难事，但是让你在引擎内直接拼出界面可能会有一点头疼，所以这款插件是 小白福音。

以下是在正版的Unity官方商城搜索到的 插件下载页面，你点击购买就可以下载到这款插件了。

插件的安装和设置

我们下载完插件后，我们可以拿到一个插件包，直接双击解压包到引擎安装。

接下来我们在引擎内会看到有一个文件夹：

在Documentation文件夹内是一个PDF 内置了开发大神的使用方法。在Editor文件夹内是我们Unity需要使用到的插件，大家无需动它。在Photoshop Scripts文件夹内我们需要注意了，这个文件夹内的插件是需要把插件安装进PS的文件夹内哦。在Sample文件夹就是存放我们需要使用插件来切图拼凑的资源的文件夹了，里面还有开发者的2个案例，如果能下载的小伙伴可以自己去看看。

刚刚说到 在Photoshop Scripts 文件夹内存放着我们的插件Psd 2 Unity Pro - Digest我们复制它把它放到我们的PS里。

     

以上是笔者的目录位置，大家只需要寻找PS文件夹内的Presets/Scripts把插件复制进这个文件夹内就可以了，打开PSD在这个位置就可以看到插件咯。

根据界面规范PSD的分组名称

根据界面组件来建立相关文件夹，因为使用插件我们需要对PSD进行一些规范，那我们就举个实例吧.

以上是中文与英文正确命名双结合的界面，举例在这里的命名规范会最终变成你在引擎内部导出界面的命名规范，包括空层级。

标注=PNG为导出图层代码，在脚本内它识别你文件夹或者图层名字，后面加上此代码标志就视为被导出项。

在需要被切的图层后加入代码,代码为=PNG

重复的只需要一层，效果图中的ICON是我们要切同一尺寸为了方便之后替换图做准备。

文件夹作为一体时直接在文件背后加上=PNG ，不管有多少图层，最终合成出一张图。当我们把所有PSD的规范整理清楚加入=PNG代码后，保存PSD到Sample文件夹内以后点击PS内的脚本，就会自动开始切图整理了。

切图完成后在Unity引擎内我们会得到2个文件，一个是切图资源文件夹，一个是读取代码的文件:

这时候我们右键下面这个文件:

选中这个插件按钮就会有一个弹框弹出:

在红框位置把你在制作节目的Canvas放进去点击Copose！

这里我们就获得了一个完整的界面了，这个界面的层级也严格按照我们PSD的规范来的哦。

但是这里我们需要注意的是，这个界面是插件自动导出其中需要我们自行修改一些地方,例如按钮，文本等等。

这里再跟大家分享一下GUI的路径规范

插件有局限性以下是插件所自动建立的文件夹路径

因为插件的局限性，所以自动拆分后，我们需要根据实际路径规范，把图集分拆到各个文件夹内。

3.总结

优点：

加强PSD的规范性不仅仅是为了使用插件，而是为了今后修改做好准备，使用插件可以大大减少UI在切图和拼界面的时间。

缺点：

界面拼出后需要UI去确认贴图的规范性尺寸，还有需要在界面上自行添加格式控件，把图集分拆到正式文件夹，复用的资源要进行手动调整。

注：

导出界面后插件任务就完成了，后期修改都是在引擎内。

以上内容均为分享学习及工具探索和交流使用，不进行各种商业用途，如有雷同纯属巧合。

关于作者

金俊 · 游族UEDC

感谢观看，更多分享请关注公众号

添加管理员微信，加入专业沟通群与行业大神一起沟通学习

---

推荐阅读：

如何制作科技感转场动效？

告别程序！UI把控引擎落地

控件与光的结合，原来UI也可以走技术流

AdobeXD让设计规范执行起来变得简单