美文网首页
转化PSD为Unity3D 使用的 UI界面

转化PSD为Unity3D 使用的 UI界面

作者: 忆中异 | 来源:发表于2021-05-10 16:46 被阅读0次

操作顺序: PSD文件 -> psd2fgui转化为 .fairypackage 文件 -> FairyGUI进行二次更改 -> 导入进Unity之中 直接使用。

  1. FairyGUI官网

如何提高游戏界面开发效率,是业界不断探讨的一个问题。传统制作模式(美术出图,程序员在Unity里拼界面)需要占用大量的程序员时间用于简单的拼界面工作,所以程序员也开动脑筋制作了很多辅助工具,例如将美术的PSD源文件直接转化为UI界面的预制。我们可以在网上查找到不少针对NGUI或UGUI的PSD2UI方案,而今天我给大家介绍的是应用于另外一款越来越流行的UI引擎FairyGUI的PSD2UI方案。

事实上,如果你使用FairyGUI作为你的UI解决方案,得益于强大的FairyGUI编辑器,程序员已经不再需要在Unity里拼界面,取而代之的是,策划、美术也可以拼出质量高,直接能用的界面。所以对于FairyGUI来说,PSD2UI的方案反而有点繁琐。无论如何,需求总是复杂的,有总比没有好,而且用作第一次的自动生成,还是能提高一定效率的。

安装
这个工具的名称叫psd2fgui,它是一个nodejs的应用。所以安装方式很简单,在命令行模式下运行:

npm install -g psd2fgui
等待安装完成即可。如果你的系统里还没有node的环境,那需要先从Node.js官网下载安装。

安装完成后,我们就可以直接使用psd2fgui命令了。

准备PSD文件

这里写图片描述

如上图所示,使用图层名称或组名称来表达它的类型和用途。以下是约定的细节:

按钮 组(注意,一定是组)的名称以Button开始表示这个组是一个按钮。组内的层如果名称中含有下面定义的特殊字符串(注意是包含即可,不是相同。推荐作为后缀),表示这个图层的特别含义:

**@up **这个图层只在按钮的up状态显示
@over 这个图层只在按钮的over状态显示
**@down **这个图层只在按钮的down状态显示
**@selectedOver **这个图层只在按钮的selectedOver状态显示
**@title **文字用作按钮的标题
**@icon **图片用作按钮的图标
组件 组的名称以Com开始表示这个组是一个组件。组件可以嵌套。

执行转换
psd2fgui test.psd

如果成功转换,输出为:

test.psd->test.fairypackage
buildId: mlmjpf0dc7zp

使用FairyGUI编辑器,主菜单->资源->导入资源包,然后选择刚生成的test.fairypackage,显示如下界面:

这里写图片描述

在下方选择要导入的位置,可以导入到一个新包,也可以导入到当前的包指定的目录。
以下是导入的结果:

这里写图片描述

然后UI制作人员可以开始在FairyGUI编辑器进行界面的其它调整。

高级选项
psd2fgui还提供了一些开关调整转换的细节:

  • –nopack 不生成fairypackage。所有文件直接输出到一个文件夹中。
  • –ignore-font 不使用PSD源文件中文本指定的字体名称。文本的字体均保持空白,这样在编辑器中可以应用默认字体。
  • buildId buildId是一个不少于12位的仅包含数字和小写字母的字符串。用于标识每次转换过程。使用相同的buildId,则多次转换后相同名称的资源的id不变。

例如:
//使用上次转换结果的buildId重新转换
psd2fgui test.psd --ignore-font #mlmjpf0dc7zp

定制
目前对于PSD里结构的约定,未必能符合每个人项目的需求。遇到这种情况,可以自行修改psd2fgui的源码进行定制。源码托管在https://github.com/fairygui/psd2fgui
转载于:https://blog.csdn.net/kitok/article/details/80843994

相关文章

网友评论

      本文标题:转化PSD为Unity3D 使用的 UI界面

      本文链接:https://www.haomeiwen.com/subject/mjmidltx.html