com.soviby.unity.ui.ugui-toolkit/README.md

# C1 Ugui拼接助手

## 简介

> 该工具主要作用是提高效果图还原度和提高拼接效率，以下是当前版本已经实现的功能：
> 1. psd 端自动切图，并处理九宫格
> 2. unity拼接时，对psd上所标记的像素图层进行吸附，设置位置和旋转、缩放
> 3. unity拼接时，对psd上所标记的文本图层进行吸附，设置位置和旋转、缩放，并设置字体、字体大小、字体颜色、描边等
> 4. unity拼接时，对公共组件预制体进行设置位置和旋转、缩放

## 展示

![GIF 2024-12-17 10-59-36](F:\c1workspace\svn\__workspace__dev__\client\PackagesSource\com.txcombo.c1.ugui-toolkit\.res\展示.gif)

## 工作流

![](./.res/流程图.png)
## 如何操作
### psd数据导出
#### 对图层名使用关键字标记
1. `$<图层名>` : 图片切图导出并吸附  例如：$img_tools ，参数：九宫格：`<图层名>@九宫格`
2. `%<图层名>` : 仅图片吸附用  例如：%img_tools，参数：九宫格：`<图层名>@九宫格`
3. `%<文本图层名>` : 仅文本吸附用  例如：%text_tools
5. `<图层名>@预制体=<资源唯一名称>` ： 引用通用组件预制体   例如：领取龙币@预制体=btn_common_yellow_large

#### 导出数据
运行指定脚本进行导出
![](./.res/ps导出入口.png)

选中项目中脚本
`client\toolchains\c1_ugui_toolkit\.PhotoshopScript\JSZXPsd2Unity\PSD导出Unity.js`
执行完毕后会自动弹出目录
![](./.res/弹出目录.png)

### unity中如何操作

#### 进入预制体场景
点击开启助手，设置如下路径后，点击`开启助手`

1. 目标图片信息文件夹:  填入导出psd数据的 ` yueka.layout.txt`

![img](F:\c1workspace\svn\__workspace__dev__\client\PackagesSource\com.txcombo.c1.ugui-toolkit\.res\开启助手.png)

#### 选中image和text、预制体后，自动吸附
##### 图片
![](./.res/吸附展示.gif)
##### 一键创建所有文本
![](./.res/创建text.png)
![](./.res/创建text后的结果.png)

##### 一键创建所有预制体
![img](F:\c1workspace\svn\__workspace__dev__\client\PackagesSource\com.txcombo.c1.ugui-toolkit\.res\创建预制体.png)

#### 进阶操作
##### 父节点应用子节点变换 

吸附完成后，选中父节点按下“空格” 

![GIF 2024-12-12 10-19-28](F:\c1workspace\svn\__workspace__dev__\client\PackagesSource\com.txcombo.c1.ugui-toolkit\.res\父节点应用子节点变换.gif)

##### 修改父节点边框后复原子节点位置

对父节点边框进行调整后，按下“Ctrl + 空格”

![GIF 2024-12-12 10-25-00](F:\c1workspace\svn\__workspace__dev__\client\PackagesSource\com.txcombo.c1.ugui-toolkit\.res\复原子节点位置.gif)