# psd2ui
**Repository Path**: themoonbear/psd2ui
## Basic Information
- **Project Name**: psd2ui
- **Description**: Cocos Creator 3.8.x PSD文件转UI
- **Primary Language**: TypeScript
- **License**: Artistic-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 7
- **Created**: 2024-12-06
- **Last Updated**: 2024-12-06
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## PSD 转 UI 说明
>PSD 文件转 prefab 工具
>硬性要求：DPI 72，颜色 RGB 8位通道，图片图层必须转为智能对象
>适用引擎：Cocos Creator
>版本： >= 3.8.0
>使用方法：图层@标识（标识不分顺序先后，可多个嵌套）
>参数：带 * 不可缺少，标识：带 - 不常用
>符号：$ = { ：，} 支持中英文
[本墨绪圆字体 下载](https://gitee.com/Jason-Huang/psd2ui/raw/master/benmoxuyuan.ttf)
[PSD 示例下载](https://gitee.com/Jason-Huang/psd2ui/raw/master/base.psd)
### PSD 参考图
### Prefab 参考图
### 基础类型
#### ***忽略导出***
>| 标识 | 参数 | 作用 | 简写 | 类型 |
>| :----- | :-----: | :----: | :----: | :----: |
>| ***@ig*** | 无 | 忽略导出 | 无 | 不可缺省 |
>-- 导出：PSD 图层隐藏时，依然会被导出
>| 示例 | 说明 |
>| :----- | :-----: |
>| 按钮@btn@ig | 组件忽略 |
>| 图片@ig | 图片忽略 |
>| 文本@ig | 文本忽略 |
>|  | 
#### ***文本相关***
>| 标识 | 参数 | 作用 | 简写 | 类型 |
>| :----- | :-----: | :----: | :----: | :----: |
>| ***@richText*** | 无 | 富文本 | @text | 不可缺省 |
>| *- @shadow* | { c, x, y, b } | 文本阴影 | @sd | 不可缺省 |
>| | *c | 阴影颜色 | | 颜色码 |
>| | x | x 轴偏移 | | 数字 |
>| | y | y 轴偏移| | 数字 |
>| | b | 模糊程度| | 数字 |
>| *- @maxWidth* | 数字 | 最大宽度 | @mw | 不可缺省 |
>| *- @maxHeight* | 数字 | 最大高度 | @mh | 不可缺省 |
>| -- @richText：含有多种颜色或图文混合时，可标注为富文本，如聊天内容
>| -- @shadow：使用 Cocos 引擎自带的文本阴影效果，x y b 默认 2
>| -- @maxWidth @maxHeight：当文本超过宽高度时，自动缩放字体大小
>| -- @maxWidth：当文本超过宽度时，自动换行
>| -- @maxHeight：不能单独使用
>| -- 图层样式支持：1.加粗 2.倾斜 3.下划线 4.描边
>| -- 颜色码：如：#1b262e
>| 示例 | 说明 |
>| :----- | :-----: |
>| 自动缩放@mw=100@mh=60 | 宽度100，高度60，文本自动缩放 |
>| 自动换行@maxWidth=100 | 宽度100，文本自动换行 |
>| 阴影@shadow={c:#000000,b:4} | cocos 阴影效果 |
>| 描边 | cocos 描边效果 |
>| 粗体斜体下划线 | 粗体 + 斜体 + 下划线 效果 |
>| 富文本@richText | 富文本 |
>| 文本 | 普通文本 |
>|  | 
#### ***图片相关***
>导出规则：根据图片所在的图层名，进行导出。同名时，采用第一次出现的图片作为原图，建议命名唯一。
>公共图片：在图层名后面添加 \$ 或 \$ + 数字（区分文件夹），如：icon\$，icon\$2。
>缩放翻转：图片进行缩放翻转时，需要原图做对比（原图层名字一致，隐藏即可），否则会直接导出。
>中文转拼音：图层名为中文时，支持中文转拼音，如：按钮底图 => an_niu_di_tu
>| 标识 | 参数 | 作用 | 简写 | 类型 |
>| :----- | :-----: | :----: | :----: | :----: |
>| ***@9*** | { l, r, t, b, w, h } | 九宫图片 | 无 | 不可缺省 |
>| | l | 左边距 | | 数字 |
>| | r | 右边距 | | 数字 |
>| | t | 上边距 | | 数字 |
>| | b | 下边距 | | 数字 |
>| | w | 像素宽 | | 数字 |
>| | h | 像素高 | | 数字 |
>| *@scale* | 无 | 缩放 | @sc | 不可缺省 |
>| *- @rotate* | 数字 | 旋转 | @rot | 不可缺省 |
>| *- @color* | 颜色码 | 修改颜色 | @clr | 不可缺省 |
>| *- @filpX* | 无 | 左右翻转 | @fx | 不可缺省 |
>| *- @filpY* | 无 | 上下翻转 | @fy | 不可缺省 |
>| *- @gray* | 无 | 置灰效果 | @gy | 不可缺省 |
>| -- @9：l r，只填一项，对称，t b 同样；w h 默认 2 个像素
>| -- @scale：通过对比，自动计算缩放比例，需要原图，否则直接导出
>| -- @rotate：在预制体中顺时针旋转，需要原图，否则直接导出
>| -- @color：使用 Cocos 引擎自带的颜色叠加效果
>| -- @filpX：在预制体中左右翻转，需要原图，否则直接导出
>| -- @filpY：在预制体中上下翻转，需要原图，否则直接导出
>| -- @gray：使用 Cocos 引擎自带的置灰效果
>| 示例 | 说明 |
>| :----- | :-----: |
>| 九宫@9={l:30,t:30} | 导出九宫格图片 jiu_gong.png |
>| 公共按钮3$ | 导出公共图片，gong_gong_an_niu_3.png（common文件夹） |
>| 公共按钮2$ | 导出公共图片，gong_gong_an_niu_2.png（common文件夹） |
>| 公共按钮1$ | 导出公共图片，gong_gong_an_niu_1.png（common文件夹） |
>| 钻石@rotate=30 | zhuan_shi.png 顺时针现在30度 |
>| 钻石@color=#ff1f00 | zhuan_shi.png 改变颜色 |
>| 钻石@scale | zhuan_shi.png 缩放 |
>| 钻石@gray | zhuan_shi.png 置灰 |
>| 钻石@fy | zhuan_shi.png 上下翻转 |
>| 钻石@filpX | zhuan_shi.png 左右翻转 |
>| 砖石 | 导出，zhuan_shi.png |
>|  | 
#### ***程序导出***
>程序使用，微调上传好的 PSD 文件（分组和节点名），避免 UI 再次更新时，需要大幅度去修改 prefab。
>| 标识 | 参数 | 作用 | 简写 | 类型 |
>| :----- | :-----: | :----: | :----: | :----: |
>| ***@exp*** | 字符串 | 导出绑定节点 | 无 | 不可缺省 |
>| -- 参数：预制体节点名，配合快速绑定属性插件使用
>| -- 如：@exp=node 导出 $Node
#### ***组件相关***
>利用 PS 分组，设定图层结构，来定义各种功能的组件
#### ***按钮组件***
>| 标识 | 参数 | 作用 | 简写 | 类型 |
>| :----- | :-----: | :----: | :----: | :----: |
>| ***@button*** | 无 | 按钮 | @btn | 不可缺省 |
>| | *@normal | 常态贴图 | @nrm | 图片图层 |
>| | @pressed | 按下贴图 | @press| 图片图层 |
>| | @disabled | 不可选贴图 | @dis | 图片图层 |
>| | @hover | 鼠标经过贴图 | | 图片图层 |
>| *- @transition* | 数字 | 点击效果 | @tra | 不可缺省 |
>| *- @effect* | { n, p, d, h } | 颜色效果 | @eff | 不可缺省 |
>| | *n | 常态颜色 | | 颜色码 |
>| | *p | 按下颜色 | | 颜色码 |
>| | *d | 不可选颜色 | | 颜色码 |
>| | h | 鼠标经过颜色 | | 颜色码 |
>| -- @transition：0 无效果，1 颜色变化，2 切换图片 3 缩放，默认：自动推断
>| -- 自动推断：只有 @normal 图层，缩放
>| -- 自动推断：拥有 @normal @pressed @disabled 图层，切换图片
>| -- 自动推断：添加 @effect 时，颜色变化
>| -- 图片按钮：没有分组，只支持除切换图片外的所有效果
>| 示例 | 说明 |
>| :----- | :-----: |
>| 按钮九宫格@button | 使用九宫格图片按钮 |
>| 按钮颜色@btn@effect={n:#ffffff,p:#ff0000,d:#787878} | 按钮点击切换颜色效果 |
>| 按钮换图@button | 按钮点击切换图片效果 |
>| 按钮置灰缩放@btn | 按钮点击缩放置灰效果 |
>| 公共按钮3$@button | 图片按钮 |
>|  | 
#### ***进度条组件***
>| 标识 | 参数 | 作用 | 简写 | 类型 |
>| :----- | :-----: | :----: | :----: | :----: |
>| ***@progressBar*** | 无 | 进度条 | @prg | 不可缺省 |
>| | *@bar | 进度图 | 无 | 图片图层 |
>| | *@background | 背景图 | @bg | 图片图层 |
>| *@mode* | 数字 | 显示模式 | 无 | 不可缺省 |
>| *- @reverse* | 无 | 反向显示 | @rvs | 不可缺省 |
>| *- @progress*| 数字 | 当前进度 | @prog | 不可缺省 |
>| -- @mode：0 水平方向 ，1 垂直方向 ，2 环形，默认 0
>| -- @progress：进度的百分比，默认 0
>| -- 建议：@background @bar，采用九宫格模式（环形除外）
>| 示例 | 说明 |
>| :----- | :-----: |
>| 环形进度条@prg@mode=2@prog=30 | 环形进度条，进度为 30% |
>| 垂直进度条@prg@mode=1@progress=20 | 垂直进度条，进度为 20% |
>| 水平进度条@progressBar | 水平进度条，进度为 0% |
>|  | 
#### ***滑动器组件***
>| 标识 | 参数 | 作用 | 简写 | 类型 |
>| :----- | :-----: | :----: | :----: | :----: |
>| ***@slider*** | 无 | 滑动器 | @sli | 不可缺省 |
>| | *@handle | 拖拽按钮 | @hdl| 图片图层 \| 按钮组件 |
>| | *@background | 背景图 | @bg | 图片图层 |
>| | @bar | 进度图 | 无 | 图片图层 |
>| *- @direction* | 数字 | 滑动方向 | @dir | 不可缺省 |
>| *- @progress* | 数字 | 当前进度 | @prog | 不可缺省 |
>| -- @handle：类型为普通图片图层，或者按钮组件（具有按钮效果）
>| -- @direction：0 水平方向 ，1 垂直方向 ，默认 0
>| -- @progress：进度百分比，默认 0
>| -- 建议：@background @bar，采用九宫格模式
>| 示例 | 说明 |
>| :----- | :-----: |
>| 垂直进度滑动器@sli@dir=1@prog=80 | 垂直进度滑动器，进度为 80% |
>| 垂直滑动器@sli@direction=1 | 垂直滑动器，进度为 0% |
>| 水平进度滑动器@slider | 水平进度滑动器，进度为 0% |
>| 水平滑动器@slider@progress=20 | 水平进度滑动器，进度为 20% |
>|  | 
#### ***复选按钮组件***
>| 标识 | 参数 | 作用 | 简写 | 类型 |
>| :----- | :-----: | :----: | :----: | :----: |
>| ***@toggle*** | 无 | 复选按钮 | @tog | 不可缺省 |
>| | *@normal | 常态贴图 | @nrm | 图片图层 |
>| | *@background | 背景图 | @bg | 图片图层 |
>| | @pressed | 按下贴图 | @press| 图片图层 |
>| | @disabled | 不可选贴图 | @dis | 图片图层 |
>| | @hover | 鼠标经过贴图 | | 图片图层 |
>| *-@transition* | 数字 | 点击效果 | @tra | 不可缺省 |
>| *-@effect* | { n, p, d, h } | 颜色效果 | @eff | 不可缺省 |
>| | *n | 常态颜色 | | 颜色码 |
>| | *p | 按下颜色 | | 颜色码 |
>| | *d | 不可选颜色 | | 颜色码 |
>| | h | 鼠标经过颜色 | | 颜色码 |
>| -- @transition：0 无效果，1 颜色变化，2 切换图片 3 缩放，默认：自动推断
>| -- 自动推断：只有 @normal 图层，无效果
>| -- 自动推断：拥有 @normal @pressed @disabled 图层，切换图片
>| -- 自动推断：添加 @effect 时，颜色变化
>| 示例 | 说明 |
>| :----- | :-----: |
>| 复选按钮@toggle | 复选按钮 |
>|  | 
#### ***单选按钮组件***
>| 标识 | 参数 | 作用 | 简写 | 类型 |
>| :----- | :-----: | :----: | :----: | :----: |
>| ***@toggleGroup*** | 无 | 单选按钮 | @togs | 不可缺省 |
>| | *@toggle | 分组 | @tog | 复选按钮组件 |
>| -- 注释： 单选按钮，是有由多个复选按钮组合而成的组件
>| 示例 | 说明 |
>| :----- | :-----: |
>| 单选按钮@toggleGroup | 单选按钮 |
>|  | 