PSD2FairyGUI 工具

如何提高游戏界面开发效率，是业界不断探讨的一个问题。传统制作模式（美术出图，程序员在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

定制

https://github.com/fairygui/psd2fgui

美术实现功能

# coding=UTF-8
# @des: Batch FairyGUI
import os
import re
import string

curdir = os.getcwd()
# 递归获取某个目录下的所有文件的绝对路径 保存在传入的 cacheFileList 中
def getRecursionExtFileList(path, cacheFileList):
    files = os.listdir(path)
    for f in files:
        f = os.path.join(path, f)
        if os.path.isdir(f):
            getRecursionExtFileList(f, cacheFileList)
        elif os.path.isfile(f):
            cacheFileList.append(f)

# 获取某个目录下 所有后缀为psd的文件的绝对路径列表
def getCustomExtFileList(path, psd):
    cacheFileList = []
    getRecursionExtFileList(path, cacheFileList)
    newList = []
    for f in cacheFileList:
        if os.path.splitext(f)[1] == psd:
            newList.append(f)
    return newList

def main():
    path = "first"
    psd_path = getCustomExtFileList(path, ".psd")
    fairy_path = getCustomExtFileList(path, ".fairypackage")

    psd_path_filt = []
    for p in psd_path:
        temp = p.split('\\')
        p = temp[1].replace(".psd","")
        psd_path_filt.append(p)
        
    fairy_path_filt = []
    for p in fairy_path:
        temp = p.split('\\')
        p = temp[1].replace(".fairypackage","")
        fairy_path_filt.append(p)

    for p in psd_path_filt:
        if not(p in fairy_path_filt):
            cmd = "node convert " + path +"/" + p + ".psd"
            os.system(cmd)
    
main()