【工具分享】Photoshop PSD 一键转 Cocos Creator 2.4.x 预制体（开源免费）

Creator 2.x
#1

做 Cocos Creator 2.4.x 的 UI 时，反复对着 PSD 手动切图、建节点、摆位置太累了，
所以写了个开源工具，把这一步自动化，分享给大家。

▌它能做什么
把一个 Photoshop .psd 一键转成 Cocos 预制体：
· 自动导出 PNG + 生成带 spriteFrame 的 .meta
· 按图层命名规范自动建节点树，像素级对齐（锚点 0.5，按真实包围盒定位）
· 文字图层自动转 cc.Label（取文本/字号/颜色），btn_ 转 cc.Button，lay_ 转 Layout，sp_ 九宫格
· MD5 图片去重（相同图只导一张，跨预制体共用）
· 自动裁掉透明边、压平多余空容器
· 节点名全英文（中文转拼音）+ 类型前缀 + 同级名字唯一，getChildByName 直接能用

▌怎么用
扔进工程 packages/ 目录，菜单出现「PSD 工具 / PSD 转预制体」，选 PSD → 点转换。
也支持命令行脱离编辑器跑。
（适配 Cocos Creator 2.4.x，在 2.4.15 上开发验证）

▌开源地址（免费，MIT）
https://github.com/shiliyu1991-lang/cocos-psd-prefab-2x

配套还有个 Photoshop 插件，让美术按命名规范一键标注图层，见楼下/下个帖子。
有问题欢迎提 issue，觉得有用点个 star~

16赞
#2

很牛 用了一下感觉还不错

#3

收藏一波~

#4

能用就行，有什么建议也可以题，目标是减少动手

#5

能适配3.8就好了

#6

晚一点，今晚或者明天出

#7

【3.8】https://github.com/shiliyu1991-lang/cocos-psd-prefab-3x

2赞
#8

强 :+1: :+1: :+1: :+1:

#9

贴还在审核，不然在新贴里面，忙碌的一天

#10

有咩有示例的psd呀

#11

大佬，比如按钮这类的通用资源是不是还是需要自己去管理呢

#12

这个有，有个psd的namer工具，如果psd出来后改下名字前缀，导入可以自动添加Button组件。可以看下文档，有些没加，真正用起来的时候会慢慢优化，主要的做饭还是去psd严格命名规则，工具转prefab的时候会根据命名规则去加组件

#13

不是本身的组件，这个我测试了可以的。大佬牛逼，我想问的是按钮用到的精灵资源，那张按钮图片，可能会在很多界面都会用到，那么这张图片就是公用资源，在导出为预制体的时候，是每个预制体都会带上这张图片还是公用一张呢 ？如果是能够公用一张，那再psd上的命名的还需要公用资源的命名唯一哇

#14

只要美术用的一个资源的话就是一张，随便都可以命名

1赞
#15

大佬牛逼 :tada:

#16

实用性还有待考量

#17

随便找个就行

#18

既然可以转prefab那么也可以赚fgui吧？

#19

FairyGUI 编辑器本身就内置了 PSD 导入功能，没必要用第三方插件

#20

感谢告知，我去研究一下