docs(UI): 更新UI界面拼接设计指南
添加双向转换功能说明: - 正向转换:JSON配置 → UI预制体 - 反向转换:UI预制体 → JSON配置 新增支持的组件类型: - InputField、ScrollRect、GridLayoutGroup、VerticalLayoutGroup、HorizontalLayoutGroup 新增命令支持: - ExportPrefabToJson:从预制体反向导出JSON 更新使用示例: - 外部命令触发方式 - Unity编辑器菜单入口 - 代码调用示例
This commit is contained in:
@@ -167,13 +167,18 @@ Window
|
|||||||
|
|
||||||
### 8.1 概述
|
### 8.1 概述
|
||||||
|
|
||||||
本项目支持通过JSON配置文件自动生成Unity UI预制体,实现UI界面的快速构建和迭代。
|
本项目支持JSON配置与Unity预制体的双向转换:
|
||||||
|
- **正向转换**:JSON配置 → UI预制体
|
||||||
|
- **反向转换**:UI预制体 → JSON配置
|
||||||
|
|
||||||
|
实现UI界面的快速构建、迭代和版本控制。
|
||||||
|
|
||||||
### 8.2 核心组件
|
### 8.2 核心组件
|
||||||
|
|
||||||
| 组件 | 职责 | 文件路径 |
|
| 组件 | 职责 | 文件路径 |
|
||||||
|-----|------|---------|
|
|-----|------|---------|
|
||||||
| **UIPrefabGenerator** | 解析JSON并生成UI预制体 | `Assets/Editor/Command/UIPrefabGenerator.cs` |
|
| **UIPrefabGenerator** | 解析JSON并生成UI预制体 | `Assets/Editor/Command/UIPrefabGenerator.cs` |
|
||||||
|
| **UIPrefabToJson** | 从预制体反向导出JSON | `Assets/Editor/Command/UIPrefabToJson.cs` |
|
||||||
| **RemoteCommand** | 提供外部调用接口 | `Assets/Editor/Command/RemoteCommand.cs` |
|
| **RemoteCommand** | 提供外部调用接口 | `Assets/Editor/Command/RemoteCommand.cs` |
|
||||||
| **ExternalCommandListener** | 监听外部命令触发文件 | `Assets/Editor/Command/ExternalCommandListener.cs` |
|
| **ExternalCommandListener** | 监听外部命令触发文件 | `Assets/Editor/Command/ExternalCommandListener.cs` |
|
||||||
|
|
||||||
@@ -214,11 +219,16 @@ Window
|
|||||||
|
|
||||||
| 类型 | 对应Unity组件 | 关键属性 |
|
| 类型 | 对应Unity组件 | 关键属性 |
|
||||||
|-----|-------------|---------|
|
|-----|-------------|---------|
|
||||||
| **Image** | Image | sprite, color, type (Simple/Sliced/Tiled/Filled) |
|
| **Image** | Image | sprite, color, type, preserveAspect |
|
||||||
| **Text** | TextMeshProUGUI | text, font, fontSize, color |
|
| **TextMeshProUGUI** | TextMeshProUGUI | text, font, fontSize, color, alignment |
|
||||||
| **Button** | Button | onClick, targetGraphic, transition |
|
| **Button** | Button | interactable, transition, navigationMode |
|
||||||
| **Slider** | Slider | minValue, maxValue, value, fillRect |
|
| **Slider** | Slider | minValue, maxValue, value, wholeNumbers, direction |
|
||||||
| **Toggle** | Toggle | isOn, targetGraphic |
|
| **Toggle** | Toggle | isOn, toggleTransition, transition |
|
||||||
|
| **InputField** | InputField | text, placeholder, characterLimit, contentType |
|
||||||
|
| **ScrollRect** | ScrollRect | horizontal, vertical, movementType |
|
||||||
|
| **GridLayoutGroup** | GridLayoutGroup | cellSize, spacing, constraint, padding |
|
||||||
|
| **VerticalLayoutGroup** | VerticalLayoutGroup | spacing, childAlignment, padding |
|
||||||
|
| **HorizontalLayoutGroup** | HorizontalLayoutGroup | spacing, childAlignment, padding |
|
||||||
|
|
||||||
### 8.5 外部命令触发机制
|
### 8.5 外部命令触发机制
|
||||||
|
|
||||||
@@ -241,6 +251,7 @@ GenerateUIPrefab:Assets/Editor/UI/BagWindow.json
|
|||||||
| 命令 | 参数 | 说明 |
|
| 命令 | 参数 | 说明 |
|
||||||
|-----|------|------|
|
|-----|------|------|
|
||||||
| **GenerateUIPrefab** | `jsonPath` [, `prefabPath`] | 根据JSON生成UI预制体 |
|
| **GenerateUIPrefab** | `jsonPath` [, `prefabPath`] | 根据JSON生成UI预制体 |
|
||||||
|
| **ExportPrefabToJson** | `prefabPath` [, `jsonPath`] | 从预制体反向导出JSON |
|
||||||
| **ReadJson** | [参数列表] | 读取JSON配置(测试用) |
|
| **ReadJson** | [参数列表] | 读取JSON配置(测试用) |
|
||||||
|
|
||||||
#### 8.5.3 完整执行流程
|
#### 8.5.3 完整执行流程
|
||||||
@@ -282,32 +293,50 @@ GenerateUIPrefab:Assets/Editor/UI/BagWindow.json
|
|||||||
|
|
||||||
| 菜单路径 | 功能 |
|
| 菜单路径 | 功能 |
|
||||||
|---------|------|
|
|---------|------|
|
||||||
|
| `Tools > UI > Export Prefab to JSON` | 选择预制体导出JSON |
|
||||||
|
| `Tools > UI > Generate BagWindow Prefab` | 生成BagWindow预制体 |
|
||||||
| `Tools > External > Test ReadJson` | 测试ReadJson命令 |
|
| `Tools > External > Test ReadJson` | 测试ReadJson命令 |
|
||||||
| `Tools > External > Test GenerateUIPrefab` | 测试GenerateUIPrefab命令 |
|
| `Tools > External > Test GenerateUIPrefab` | 测试正向生成 |
|
||||||
|
| `Tools > External > Test ExportPrefabToJson` | 测试反向导出 |
|
||||||
|
|
||||||
### 8.7 使用示例
|
### 8.7 使用示例
|
||||||
|
|
||||||
#### 方式一:外部命令触发
|
#### 方式一:外部命令触发
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# 创建触发文件
|
# 正向:从JSON生成预制体
|
||||||
echo "GenerateUIPrefab:Assets/Editor/UI/BagWindow.json" > "F:\JMNet\CrystalBattle_Client\Trigger_Command.txt"
|
echo "GenerateUIPrefab:Assets/Editor/UI/BagWindow.json" > "F:\JMNet\CrystalBattle_Client\Trigger_Command.txt"
|
||||||
|
|
||||||
|
# 反向:从预制体导出JSON
|
||||||
|
echo "ExportPrefabToJson:Assets/Game/GameHFResource/CN/UIWindows/BagWindow/BagWindow.prefab" > "F:\JMNet\CrystalBattle_Client\Trigger_Command.txt"
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 方式二:Unity编辑器菜单
|
#### 方式二:Unity编辑器菜单
|
||||||
|
|
||||||
|
**正向生成**:
|
||||||
1. 打开Unity编辑器
|
1. 打开Unity编辑器
|
||||||
2. 点击菜单 `Tools > External > Test GenerateUIPrefab`
|
2. 点击菜单 `Tools > External > Test GenerateUIPrefab`
|
||||||
3. 查看Console窗口日志确认执行结果
|
3. 查看Console窗口日志确认执行结果
|
||||||
|
|
||||||
|
**反向导出**:
|
||||||
|
1. 打开Unity编辑器
|
||||||
|
2. 点击菜单 `Tools > UI > Export Prefab to JSON`
|
||||||
|
3. 选择要导出的预制体文件
|
||||||
|
|
||||||
#### 方式三:代码调用
|
#### 方式三:代码调用
|
||||||
|
|
||||||
```csharp
|
```csharp
|
||||||
// 直接调用生成方法
|
// 正向:从JSON生成预制体
|
||||||
UIPrefabGenerator.GeneratePrefabFromJson(
|
UIPrefabGenerator.GeneratePrefabFromJson(
|
||||||
"Assets/Editor/UI/BagWindow.json",
|
"Assets/Editor/UI/BagWindow.json",
|
||||||
"Assets/Game/GameHFResource/CN/UIWindows/BagWindow/BagWindow.prefab"
|
"Assets/Game/GameHFResource/CN/UIWindows/BagWindow/BagWindow.prefab"
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// 反向:从预制体导出JSON
|
||||||
|
UIPrefabToJson.ExportPrefabToJson(
|
||||||
|
"Assets/Game/GameHFResource/CN/UIWindows/BagWindow/BagWindow.prefab",
|
||||||
|
"Assets/Editor/UI/BagWindow.json"
|
||||||
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
### 8.8 注意事项
|
### 8.8 注意事项
|
||||||
|
|||||||
Reference in New Issue
Block a user