From 44bce05250aa4dd4cabbb017a72afdb0042047cb Mon Sep 17 00:00:00 2001 From: onvia <272493431@qq.com> Date: Thu, 20 Jul 2023 10:23:23 +0800 Subject: [PATCH] README.md --- README.md | 330 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 330 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..b6a5778 --- /dev/null +++ b/README.md @@ -0,0 +1,330 @@ + +# psd转预制体 +### 介绍 +将 psd 转为可以直接在 cocos 中使用的预制体,并导出图片资源。 +前提是需要在 Photoshop 中根据文档做好图层的处理。 +美术同学把效果做好,我们只需要调整一下图层就可以了。 +大大提升了预制体制作的效率 + +插件文件夹提供了一个能够正确导出为预制体的的 psd 文件可以作为参考 `extensions\psd2ui\test\demo.psd` + +支持的 CocosCreator 版本:`2.4.x`、 `3.4.+` ,截止到目前可以支持到 `3.7.x` + + +### 工具特性 +相同的图像只会导出一张图片 +如果是相同的图像但是大小不同,则可以使用 `bind` 功能进行绑定,具体使用可以字段说明和示例文件 +如果是相同的图像但是旋转角度不同,则会导出多张旋转角度不同的图片,需要手动去 Cocos 中处理旋转 + +工具在导出资源的时候会将图片的 MD5 值写入到缓存文件,当其他 psd 有相同 MD5 值的图片时,不再导出图片 +工具在首次使用时会自动执行一次缓存项目所有资源 MD5 值 +美术导出的图片 MD5 值可能与本工具导出的图片 MD5 值不一致,所以当出现相同的图片时请考虑这种情况 + +### 界面说明 + +![img5](../../readme-img/img6.png) + +1. 缓存资源按钮: 手动缓存资源MD5,当你不确定资源是否完全缓存的时候可以执行 +2. 强制导出图片选项: 勾选后,即使已经进行缓存的资源同样会导出图片 +3. 只导出图片选项: 可以把此工具只当做是切图工具,同时会将文本图层的字号及颜色输出到文件 +4. 输出路径输入框: 可以直接导出到指定路径,如果没有填写,默认为 psd 同级目录 +5. 红框区域:拖入 psd 文件夹或 psd 文件 + +## 属性 + + @Btn | @btn 按钮 + + @ProgressBar | @progressBar 进度条 + + @Toggle | @toggle 选项按钮 + + @.9 九宫格 + + @ar 锚点 + + @size 尺寸 + + @full 全屏 + + @scale 缩放 + + @ignore | @ig 忽略导出图片和节点 + + @ignorenode | @ignode 忽略导出节点 + + @ignoreimg | @igimg 忽略图片 + + @img 图片选项 + + @flip 翻转图像 + + @flipX 翻转图像 (flip 变种) + + @flipY 翻转图像 (flip 变种) + + + +### 组件 + + +``` +@Btn || @btn + +作用图层: 所有图层 +``` + + +``` +@ProgressBar || @progressBar +作用图层: 组图层 + +@bar + +bar 为 ProgressBar 的属性,类型为 Sprite +作用图层: 图像图层 +``` + + +``` +@Toggle || @toggle +作用图层: 组图层 + +@check + +check 为 Toggle 的属性,类型为 Sprite +作用图层: 图像图层 + + +``` + +### Field + + + +``` +@.9{l:0,r:0,b:0,t:0} + +九宫格 +作用图层: 图像图层 + +参数: + l = left + r = right + b = bottom + t = top + ps: + l r 只填写其中一项,则为对称 + b t 同上 + 不填写则默认为 0 +``` + +``` +@ar{x:0,y:0} + +锚点 +作用图层: 所有图层 + +参数: + 参数都为可选 + 不填写则默认为 0.5 + +``` + + +``` +@size{w:100,h:100} + +节点尺寸 非图片尺寸 +作用图层: 所有图层 + +参数: + w?: 宽 + h?: 高 + 只对填写的参数生效,未填写的则为计算到的值 + 无参数不生效 + +``` + + +``` +@full + +节点设置为全屏尺寸 +作用图层: 组图层 + +``` + + +``` +@scale{x:1,y:1} + +节点缩放 +作用图层: 所有图层 + +参数: + x?: x 方向 + y?: y 方向 + 只对填写的参数生效,未填写的则为 1 + +``` + + +``` +@ignore +@ig + +忽略导出图像和节点 +作用图层: 所有图层 +``` + + +``` +@ignorenode +@ignode + +忽略导出节点 +作用图层: 所有图层 +``` + + +``` +@ignoreimg +@igimg + +忽略导出图像 +作用图层: 图像图层 +``` + + +``` +@img{name: string,id: 0,bind: 0} + +定制图片 +作用图层:图像图层 + +参数: + id: number 可选 当前文档中图片唯一 id + name: string 可选 导出的图片名 + bind: number 可选 绑定 图像 id +``` + + +``` +@flip{bind: 0, x: 0, y: 0} + +镜像图像 +作用图层:图像图层 + +参数: + bind: number 必选 被绑定的图片 需要用 @img{id:number} 做标记 + x: 0 | 1, 可选, 1 为 进行 x 方向镜像 + y: 0 | 1, 可选, 1 为 进行 y 方向镜像 + x,y 都缺省时,默认 x 方向镜像 + +注意: + @flip 的图层不会导出图像 +``` + + +``` +@flipX{bind: 0} + +flip 的变种 x 方向镜像图像 +作用图层:图像图层 + +参数: + bind: number 必选 被绑定的图片 需要用 @img{id:number} 做标记 + +注意: + @flipX 的图层不会导出图像 +``` + + +``` +@flipY{bind: 0} + +flip 的变种 y 方向镜像图像vv +作用图层:图像图层 + +参数: + bind: number 必选 被绑定的图片 需要用 @img{id:number} 做标记 + +注意: + @flipY 的图层不会导出图像 +``` + + + +### 说明 + 多个字段可作用在同一个图层上,按需使用 + + + +### 例如 +``` +节点名@Btn@size{w:100,h:100} + +节点名@ar{x:1,y:1}@full@img{name:bg} +``` + + +## 注意事项 +### 美术 +- 智能图层 支持 +- 图层样式 + - 颜色叠加: 文本图层支持,图像图层不支持 + - 描边: 文本图层支持 + - 其他图层样式不支持 + +工具会把 画布外的图像也导出成图片,需要美术将 画布外 不需要导出的图像处理掉 +需要美术将多个碎图组合的图像合并成智能图层或栅格化后使用,除非它们是作为碎图使用 + + + +### 程序 配置 +如果想对指定组件进行统一定制,可以修改 `psd2ui/config/psd.config.json` 文件 +key 为组件名,val 为 预制体参数,你可以对任意组件的任意属性进行定制 + +例如当你想在导出时默认使用指定字体: +``` +cc2.4.x 可以配置为 +{ + "cc.Label": { + "_N$file":{ + "__uuid__": "7ecfa26a-27ec-4e2c-9815-d7c4c744d53f" + }, + "_isSystemFontUsed": false + } +} + +cc3.7.x 可以配置为 +"cc.Label": { + "_font": { + "__uuid__": "7ecfa26a-27ec-4e2c-9815-d7c4c744d53f", + "__expectedType__": "cc.TTFFont" + }, + "_isSystemFontUsed": false +} +// 以上这些配置会覆盖正常的属性数据,没有其他属性不受影响。 + + +// 特殊配置 +"textOffsetY":{ + "default": 0, + "36": 0 +}, +"textLineHeightOffset": 0 +``` + +// textOffsetY: Label节点 Y 偏移,当你使用了定制的字体的时候,可能在 PS 中与 CocosCreator 中表现不一致,可以使用这个参数进行处理,字号为 key,偏移量为值 + +// textLineHeightOffset: Label节点行高增量,默认没有增量,行高默认为字体大小,当你想将行高统一高n个像素的时候可以使用这个配置 + +以字号为 key ,偏移值 为 val +如果没有配置 某些字号,则 使用 default 默认偏移值,如果没有配置 default, 偏移为 0 + +``` + +## 已知bug +使用 强制导出图片选项时,输入为多个 psd 或含有多个 psd 文件的文件夹时,如果在不同 psd 含有相同 md5 的图像,则会在各自目录下生成相同 uuid 的图片 +