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界面。