【亲测免费】 FairyGUI PSD2FGUI 教程

1. 项目目录结构及介绍

psd2fgui 的目录结构如下：

• tsProject: 该目录包含了用于生成 psd2fgui.js 的 TypeScript 源代码。
• DemoFguiProject: 这是一个示例项目，展示了如何调用 psd2fgui.js 插件。它包括了一个 plugins 子目录，其中存放着 psd2fgui 插件。
• /build/: 构建脚本和生成的可执行文件位于此目录。
• /test/: 测试文件或样例PSD文件可能放在此处。

2. 项目的启动文件介绍

psd2fgui 的主要执行脚本是通过命令行工具运行的，具体操作如下：

• 对于命令行转换，您可以使用以下命令：

  node /build/psd2fgui /path/to/your/psd /output/path package_name component_name
  

  其中：
  • 参数1 指定要转换的PSD文件路径。
  • 参数2 指定输出的目录位置。
  • 参数3 (可选) 包名，用于生成的Fairypackage。
  • 参数4 (可选) 组件名，如果没有指定，所有转换的组件都将放入同一个根组件中。

3. 项目的配置文件介绍

psd2fgui 并没有特定的配置文件，它的行为主要由命令行参数控制。然而，您可以通过修改源代码来自定义处理规则，以适应您的项目需求。例如，如果您想改变图层或组的解析规则，可以在 tsProject 中查找并修改对应的处理逻辑。

此外，虽然没有全局的配置文件，但在 DemoFguiProject 中，您可以设置 plugins/psd2fgui 内的 package.json 文件来管理插件的依赖。例如，您可能会在这里执行 npm install 来安装必要的依赖包。

请注意，为了更好地理解和使用 psd2fgui，建议您熟悉FairyGUI编辑器的工作流程以及PSD文件的命名约定，这有助于高效地将PSD设计转化为可交互的UI界面。