README.md

This commit is contained in:
onvia 2023-07-21 10:08:52 +08:00
parent 1d04792b25
commit 7aeacc0549
5 changed files with 112 additions and 42 deletions

View File

@ -6,7 +6,7 @@
美术同学把效果做好,我们只需要调整一下图层就可以了。 美术同学把效果做好,我们只需要调整一下图层就可以了。
大大提升了预制体制作的效率 大大提升了预制体制作的效率
插件文件夹提供了一个能够正确导出为预制体的的 psd 文件可以作为参考 `extensions\psd2ui\test\demo.psd` 插件文件夹提供了一个能够正确导出为预制体的的 psd 文件可以作为参考 `test\demo.psd`
支持的 CocosCreator 版本:`2.4.x`、 `3.4.+` ,截止到目前可以支持到 `3.7.x` 支持的 CocosCreator 版本:`2.4.x`、 `3.4.+` ,截止到目前可以支持到 `3.7.x`
如果无法拖放 psd 文件或文件夹,可能是 CocosCreator 的权限不够,尝试使用管理员方式打开 CocosCreator 或者使用 打开文件 功能 如果无法拖放 psd 文件或文件夹,可能是 CocosCreator 的权限不够,尝试使用管理员方式打开 CocosCreator 或者使用 打开文件 功能
@ -23,26 +23,12 @@
### 特别注意 ### 特别注意
工具只适用于新界面的首次导出,如果界面已经开发到一定程度,但是因需求变化,界面结构发生变化,想重新导出,需要谨慎使用。 工具只适用于新界面的首次导出,如果界面已经开发到一定程度,但是因需求变化,界面结构发生变化,想重新导出,需要谨慎使用。
如果导出之后缺少某些图片,请确认是否写入了缓存,写入缓存的 如果导出之后缺少某些图片,请确认是否写入了缓存,写入缓存的不会重新导出。
如果出现资源丢失的情况,请确认在项目中是否被手动删除了。 如果出现资源丢失的情况,请确认在项目中是否被手动删除了。
不建议将输出目录设置为 项目的 `assets` 文件夹下,可能由于编辑器的权限导致不可预期的错误。 不建议将输出目录设置为 项目的 `assets` 文件夹下,可能由于编辑器的权限导致不可预期的错误。
### PS脚本
这里提供了一个图层重命名的 PS 脚本,可以批量对图层进行命名
使用方式有两种:
1. 将脚本放入 PhotoShop文件夹中的 `\Presets\Scripts` 文件夹下,然后在 `Photoshop左上角-> 文件 -> 脚本-> PS脚本-图层重命名` 就行看到
2. 脚本放在任意位置,然后在 `Photoshop左上角-> 文件 -> 脚本-> 浏览` 在打开的选择文件弹窗选择找到我们的脚本
然后根据需求填入参数就行了 #### 界面说明
隐藏功能:
> 【替换】 选项可以实现批量替换
> 例如有5个图层 头,身体,手臂,手掌,大腿
> 则界面上填入
> 把:头,身体,手臂,手掌,大腿
> 替换为head,body,arm,palm,thigh
### 界面说明
![img1](./readme-img/img1.png) ![img1](./readme-img/img1.png)
@ -52,7 +38,7 @@
4. 输出路径输入框: 可以直接导出到指定路径,如果没有填写,默认为 psd 同级目录 4. 输出路径输入框: 可以直接导出到指定路径,如果没有填写,默认为 psd 同级目录
5. 红框区域:拖入 psd 文件夹或 psd 文件,也可以点击红框区域使用选择文件功能 5. 红框区域:拖入 psd 文件夹或 psd 文件,也可以点击红框区域使用选择文件功能
## 属性 ### 属性
<a href="#Btn"> @Btn | @btn 按钮</a> <a href="#Btn"> @Btn | @btn 按钮</a>
@ -282,7 +268,7 @@ flip 的变种 y 方向镜像图像vv
### 例如 #### 例如
``` ```
节点名@Btn@size{w:100,h:100} 节点名@Btn@size{w:100,h:100}
@ -293,17 +279,17 @@ flip 的变种 y 方向镜像图像vv
## 注意事项 ## 注意事项
### 美术 ### 美术
- 智能图层 支持 - 智能图层 支持
- 蒙版,形状这些图层需要栅格化,或转为智能图层使用
- 图层样式 - 图层样式
- 颜色叠加: 文本图层支持,图像图层不支持 - 颜色叠加: 文本图层支持,图像图层不支持
- 描边: 文本图层支持 - 描边: 文本图层支持
- 其他图层样式不支持 - 其他图层样式不支持
工具会把 画布外的图像也导出成图片,需要美术将 画布外 不需要导出的图像处理掉 工具会把 画布外的图像也导出成图片,需要美术将 画布外 不需要导出的图像处理掉
需要美术将多个碎图组合的图像合并成智能图层或栅格化后使用,除非它们是作为碎图使用
### 程序 配置 ### 程序配置
如果想对指定组件进行统一定制,可以修改 `psd2ui/config/psd.config.json` 文件 如果想对指定组件进行统一定制,可以修改 `psd2ui/config/psd.config.json` 文件
key 为组件名val 为 预制体参数,你可以对任意组件的任意属性进行定制 key 为组件名val 为 预制体参数,你可以对任意组件的任意属性进行定制
@ -336,7 +322,6 @@ cc3.7.x 可以配置为
"36": 0 "36": 0
}, },
"textLineHeightOffset": 0 "textLineHeightOffset": 0
```
// textOffsetY: Label节点 Y 偏移,当你使用了定制的字体的时候,可能在 PS 中与 CocosCreator 中表现不一致,可以使用这个参数进行处理,字号为 key偏移量为值 // textOffsetY: Label节点 Y 偏移,当你使用了定制的字体的时候,可能在 PS 中与 CocosCreator 中表现不一致,可以使用这个参数进行处理,字号为 key偏移量为值
@ -350,3 +335,28 @@ cc3.7.x 可以配置为
## 已知bug ## 已知bug
使用 强制导出图片选项时,输入为多个 psd 或含有多个 psd 文件的文件夹时,如果在不同 psd 含有相同 md5 的图像,则会在各自目录下生成相同 uuid 的图片 使用 强制导出图片选项时,输入为多个 psd 或含有多个 psd 文件的文件夹时,如果在不同 psd 含有相同 md5 的图像,则会在各自目录下生成相同 uuid 的图片
## PS脚本
这里提供了一个图层重命名的 PS 脚本,可以批量对图层进行命名
使用方式有两种:
1. 将脚本放入 PhotoShop文件夹中的 `\Presets\Scripts` 文件夹下,然后在 `Photoshop左上角-> 文件 -> 脚本-> PS脚本-图层重命名` 就行看到
2. 脚本放在任意位置,然后在 `Photoshop左上角-> 文件 -> 脚本-> 浏览` 在打开的选择文件弹窗选择找到我们的脚本
然后根据需求填入参数就行了
隐藏功能:
> 【替换】 选项可以实现批量替换
> 例如有5个图层 头,身体,手臂,手掌,大腿
> 则界面上填入
> 把:头,身体,手臂,手掌,大腿
> 替换为head,body,arm,palm,thigh
<font size=5 ><b>
不要跟我说在 PS 里调整图层!!<br>
批量重命名!!<br>
强制导出!!<br>
一把梭哈!!<br>
我只要位置信息!!!<br>
</br></font>

View File

@ -6,13 +6,12 @@
美术同学把效果做好,我们只需要调整一下图层就可以了。 美术同学把效果做好,我们只需要调整一下图层就可以了。
大大提升了预制体制作的效率 大大提升了预制体制作的效率
插件文件夹提供了一个能够正确导出为预制体的的 psd 文件可以作为参考 `extensions\psd2ui\test\demo.psd` 插件文件夹提供了一个能够正确导出为预制体的的 psd 文件可以作为参考 `test\demo.psd`
支持的 CocosCreator 版本:`2.4.x` 支持的 CocosCreator 版本:`2.4.x`
如果无法拖放 psd 文件或文件夹,可能是 CocosCreator 的权限不够,尝试使用管理员方式打开 CocosCreator 或者使用 打开文件 功能 如果无法拖放 psd 文件或文件夹,可能是 CocosCreator 的权限不够,尝试使用管理员方式打开 CocosCreator 或者使用 打开文件 功能
### 工具特性 ### 工具特性
相同的图像只会导出一张图片 相同的图像只会导出一张图片
如果是相同的图像但是大小不同,则可以使用 `bind` 功能进行绑定,具体使用可以字段说明和示例文件 如果是相同的图像但是大小不同,则可以使用 `bind` 功能进行绑定,具体使用可以字段说明和示例文件
@ -22,7 +21,14 @@
工具在首次使用时会自动执行一次缓存项目所有资源 MD5 值 工具在首次使用时会自动执行一次缓存项目所有资源 MD5 值
美术导出的图片 MD5 值可能与本工具导出的图片 MD5 值不一致,所以当出现相同的图片时请考虑这种情况 美术导出的图片 MD5 值可能与本工具导出的图片 MD5 值不一致,所以当出现相同的图片时请考虑这种情况
### 界面说明 ### 特别注意
工具只适用于新界面的首次导出,如果界面已经开发到一定程度,但是因需求变化,界面结构发生变化,想重新导出,需要谨慎使用。
如果导出之后缺少某些图片,请确认是否写入了缓存,写入缓存的不会重新导出。
如果出现资源丢失的情况,请确认在项目中是否被手动删除了。
不建议将输出目录设置为 项目的 `assets` 文件夹下,可能由于编辑器的权限导致不可预期的错误。
#### 界面说明
![img1](./readme-img/img1.png) ![img1](./readme-img/img1.png)
@ -32,7 +38,7 @@
4. 输出路径输入框: 可以直接导出到指定路径,如果没有填写,默认为 psd 同级目录 4. 输出路径输入框: 可以直接导出到指定路径,如果没有填写,默认为 psd 同级目录
5. 红框区域:拖入 psd 文件夹或 psd 文件,也可以点击红框区域使用选择文件功能 5. 红框区域:拖入 psd 文件夹或 psd 文件,也可以点击红框区域使用选择文件功能
## 属性 ### 属性
<a href="#Btn"> @Btn | @btn 按钮</a> <a href="#Btn"> @Btn | @btn 按钮</a>
@ -262,7 +268,7 @@ flip 的变种 y 方向镜像图像vv
### 例如 #### 例如
``` ```
节点名@Btn@size{w:100,h:100} 节点名@Btn@size{w:100,h:100}
@ -273,17 +279,17 @@ flip 的变种 y 方向镜像图像vv
## 注意事项 ## 注意事项
### 美术 ### 美术
- 智能图层 支持 - 智能图层 支持
- 蒙版,形状这些图层需要栅格化,或转为智能图层使用
- 图层样式 - 图层样式
- 颜色叠加: 文本图层支持,图像图层不支持 - 颜色叠加: 文本图层支持,图像图层不支持
- 描边: 文本图层支持 - 描边: 文本图层支持
- 其他图层样式不支持 - 其他图层样式不支持
工具会把 画布外的图像也导出成图片,需要美术将 画布外 不需要导出的图像处理掉 工具会把 画布外的图像也导出成图片,需要美术将 画布外 不需要导出的图像处理掉
需要美术将多个碎图组合的图像合并成智能图层或栅格化后使用,除非它们是作为碎图使用
### 程序 配置 ### 程序配置
如果想对指定组件进行统一定制,可以修改 `psd2ui/config/psd.config.json` 文件 如果想对指定组件进行统一定制,可以修改 `psd2ui/config/psd.config.json` 文件
key 为组件名val 为 预制体参数,你可以对任意组件的任意属性进行定制 key 为组件名val 为 预制体参数,你可以对任意组件的任意属性进行定制
@ -316,7 +322,6 @@ cc3.7.x 可以配置为
"36": 0 "36": 0
}, },
"textLineHeightOffset": 0 "textLineHeightOffset": 0
```
// textOffsetY: Label节点 Y 偏移,当你使用了定制的字体的时候,可能在 PS 中与 CocosCreator 中表现不一致,可以使用这个参数进行处理,字号为 key偏移量为值 // textOffsetY: Label节点 Y 偏移,当你使用了定制的字体的时候,可能在 PS 中与 CocosCreator 中表现不一致,可以使用这个参数进行处理,字号为 key偏移量为值
@ -330,3 +335,28 @@ cc3.7.x 可以配置为
## 已知bug ## 已知bug
使用 强制导出图片选项时,输入为多个 psd 或含有多个 psd 文件的文件夹时,如果在不同 psd 含有相同 md5 的图像,则会在各自目录下生成相同 uuid 的图片 使用 强制导出图片选项时,输入为多个 psd 或含有多个 psd 文件的文件夹时,如果在不同 psd 含有相同 md5 的图像,则会在各自目录下生成相同 uuid 的图片
## PS脚本
这里提供了一个图层重命名的 PS 脚本,可以批量对图层进行命名
使用方式有两种:
1. 将脚本放入 PhotoShop文件夹中的 `\Presets\Scripts` 文件夹下,然后在 `Photoshop左上角-> 文件 -> 脚本-> PS脚本-图层重命名` 就行看到
2. 脚本放在任意位置,然后在 `Photoshop左上角-> 文件 -> 脚本-> 浏览` 在打开的选择文件弹窗选择找到我们的脚本
然后根据需求填入参数就行了
隐藏功能:
> 【替换】 选项可以实现批量替换
> 例如有5个图层 头,身体,手臂,手掌,大腿
> 则界面上填入
> 把:头,身体,手臂,手掌,大腿
> 替换为head,body,arm,palm,thigh
<font size=5 ><b>
不要跟我说在 PS 里调整图层!!<br>
批量重命名!!<br>
强制导出!!<br>
一把梭哈!!<br>
我只要位置信息!!!<br>
</br></font>

View File

@ -6,13 +6,12 @@
美术同学把效果做好,我们只需要调整一下图层就可以了。 美术同学把效果做好,我们只需要调整一下图层就可以了。
大大提升了预制体制作的效率 大大提升了预制体制作的效率
插件文件夹提供了一个能够正确导出为预制体的的 psd 文件可以作为参考 `extensions\psd2ui\test\demo.psd` 插件文件夹提供了一个能够正确导出为预制体的的 psd 文件可以作为参考 `test\demo.psd`
支持的 CocosCreator 版本:`3.4.+` ,截止到目前可以支持到 `3.7.x` 支持的 CocosCreator 版本:`3.4.+` ,截止到目前可以支持到 `3.7.x`
如果无法拖放 psd 文件或文件夹,可能是 CocosCreator 的权限不够,尝试使用管理员方式打开 CocosCreator 或者使用 打开文件 功能 如果无法拖放 psd 文件或文件夹,可能是 CocosCreator 的权限不够,尝试使用管理员方式打开 CocosCreator 或者使用 打开文件 功能
### 工具特性 ### 工具特性
相同的图像只会导出一张图片 相同的图像只会导出一张图片
如果是相同的图像但是大小不同,则可以使用 `bind` 功能进行绑定,具体使用可以字段说明和示例文件 如果是相同的图像但是大小不同,则可以使用 `bind` 功能进行绑定,具体使用可以字段说明和示例文件
@ -22,7 +21,14 @@
工具在首次使用时会自动执行一次缓存项目所有资源 MD5 值 工具在首次使用时会自动执行一次缓存项目所有资源 MD5 值
美术导出的图片 MD5 值可能与本工具导出的图片 MD5 值不一致,所以当出现相同的图片时请考虑这种情况 美术导出的图片 MD5 值可能与本工具导出的图片 MD5 值不一致,所以当出现相同的图片时请考虑这种情况
### 界面说明 ### 特别注意
工具只适用于新界面的首次导出,如果界面已经开发到一定程度,但是因需求变化,界面结构发生变化,想重新导出,需要谨慎使用。
如果导出之后缺少某些图片,请确认是否写入了缓存,写入缓存的不会重新导出。
如果出现资源丢失的情况,请确认在项目中是否被手动删除了。
不建议将输出目录设置为 项目的 `assets` 文件夹下,可能由于编辑器的权限导致不可预期的错误。
#### 界面说明
![img1](./readme-img/img1.png) ![img1](./readme-img/img1.png)
@ -32,7 +38,7 @@
4. 输出路径输入框: 可以直接导出到指定路径,如果没有填写,默认为 psd 同级目录 4. 输出路径输入框: 可以直接导出到指定路径,如果没有填写,默认为 psd 同级目录
5. 红框区域:拖入 psd 文件夹或 psd 文件,也可以点击红框区域使用选择文件功能 5. 红框区域:拖入 psd 文件夹或 psd 文件,也可以点击红框区域使用选择文件功能
## 属性 ### 属性
<a href="#Btn"> @Btn | @btn 按钮</a> <a href="#Btn"> @Btn | @btn 按钮</a>
@ -262,7 +268,7 @@ flip 的变种 y 方向镜像图像vv
### 例如 #### 例如
``` ```
节点名@Btn@size{w:100,h:100} 节点名@Btn@size{w:100,h:100}
@ -273,17 +279,17 @@ flip 的变种 y 方向镜像图像vv
## 注意事项 ## 注意事项
### 美术 ### 美术
- 智能图层 支持 - 智能图层 支持
- 蒙版,形状这些图层需要栅格化,或转为智能图层使用
- 图层样式 - 图层样式
- 颜色叠加: 文本图层支持,图像图层不支持 - 颜色叠加: 文本图层支持,图像图层不支持
- 描边: 文本图层支持 - 描边: 文本图层支持
- 其他图层样式不支持 - 其他图层样式不支持
工具会把 画布外的图像也导出成图片,需要美术将 画布外 不需要导出的图像处理掉 工具会把 画布外的图像也导出成图片,需要美术将 画布外 不需要导出的图像处理掉
需要美术将多个碎图组合的图像合并成智能图层或栅格化后使用,除非它们是作为碎图使用
### 程序 配置 ### 程序配置
如果想对指定组件进行统一定制,可以修改 `psd2ui/config/psd.config.json` 文件 如果想对指定组件进行统一定制,可以修改 `psd2ui/config/psd.config.json` 文件
key 为组件名val 为 预制体参数,你可以对任意组件的任意属性进行定制 key 为组件名val 为 预制体参数,你可以对任意组件的任意属性进行定制
@ -316,7 +322,6 @@ cc3.7.x 可以配置为
"36": 0 "36": 0
}, },
"textLineHeightOffset": 0 "textLineHeightOffset": 0
```
// textOffsetY: Label节点 Y 偏移,当你使用了定制的字体的时候,可能在 PS 中与 CocosCreator 中表现不一致,可以使用这个参数进行处理,字号为 key偏移量为值 // textOffsetY: Label节点 Y 偏移,当你使用了定制的字体的时候,可能在 PS 中与 CocosCreator 中表现不一致,可以使用这个参数进行处理,字号为 key偏移量为值
@ -330,3 +335,28 @@ cc3.7.x 可以配置为
## 已知bug ## 已知bug
使用 强制导出图片选项时,输入为多个 psd 或含有多个 psd 文件的文件夹时,如果在不同 psd 含有相同 md5 的图像,则会在各自目录下生成相同 uuid 的图片 使用 强制导出图片选项时,输入为多个 psd 或含有多个 psd 文件的文件夹时,如果在不同 psd 含有相同 md5 的图像,则会在各自目录下生成相同 uuid 的图片
## PS脚本
这里提供了一个图层重命名的 PS 脚本,可以批量对图层进行命名
使用方式有两种:
1. 将脚本放入 PhotoShop文件夹中的 `\Presets\Scripts` 文件夹下,然后在 `Photoshop左上角-> 文件 -> 脚本-> PS脚本-图层重命名` 就行看到
2. 脚本放在任意位置,然后在 `Photoshop左上角-> 文件 -> 脚本-> 浏览` 在打开的选择文件弹窗选择找到我们的脚本
然后根据需求填入参数就行了
隐藏功能:
> 【替换】 选项可以实现批量替换
> 例如有5个图层 头,身体,手臂,手掌,大腿
> 则界面上填入
> 把:头,身体,手臂,手掌,大腿
> 替换为head,body,arm,palm,thigh
<font size=5 ><b>
不要跟我说在 PS 里调整图层!!<br>
批量重命名!!<br>
强制导出!!<br>
一把梭哈!!<br>
我只要位置信息!!!<br>
</br></font>

Binary file not shown.

Binary file not shown.