mirror of
https://github.com/unanmed/HumanBreak.git
synced 2026-11-09 14:24:30 +08:00
chore: 样板内容整理
This commit is contained in:
AncTe committed
1 parent
f9ab9fb73d
commit
c339825f5e
78 files changed
+45
-109
No files matched your search
@@ -131,4 +131,4 @@ export const MyUI = defineComponent(() => {
|
||||
- 如果不允许交互，那么光标也不会显示
|
||||
- 同 `zIndex` 下，后插入的元素会在上层，但是这也意味着如果是动态插入的元素（例如由于响应式更改而插入了一个新元素），会显示在后面代码的元素之上
|
||||
4. **常见问题**
|
||||
- 参考 [指南](../../guide/ui-faq.md)
|
||||
- 参考 [指南](../../guide/ui/faq.md)
|
||||
@@ -32,10 +32,10 @@ interface SpriteProps extends BaseProps {
|
||||
|
||||
通过 `render` 函数实现 **动态绘制**，可结合：
|
||||
|
||||
- 基础定位/变换参数（继承 `BaseProps`）
|
||||
- 动画系统（`useAnimation`）
|
||||
- 帧回调（`onTick`）
|
||||
- 自定义图形绘制（路径/滤镜/混合模式）
|
||||
- 基础定位/变换参数（继承 `BaseProps`）
|
||||
- 动画系统（`useAnimation`）
|
||||
- 帧回调（`onTick`）
|
||||
- 自定义图形绘制（路径/滤镜/混合模式）
|
||||
|
||||
**注意**，这个标签虽然非常基础，但是应该并不常用，因为很多内容都有对应的标签可以实现（例如线可以使用 `g-line` 标签等），因此如果你在考虑使用此标签，请确认你必须使用它，或是你的场景对性能非常敏感。
|
||||
|
||||
@@ -43,7 +43,7 @@ interface SpriteProps extends BaseProps {
|
||||
|
||||
## 使用示例
|
||||
|
||||
以下的示例代码均应该在**组件内部**编写，哪里是组件内部请参考[指南](../../guide/ui.md)。
|
||||
以下的示例代码均应该在**组件内部**编写，哪里是组件内部请参考[指南](../../guide/ui/ui.md)。
|
||||
|
||||
### 示例 1：基础图形
|
||||
|
||||
@@ -67,9 +67,9 @@ const render = (canvas: MotaOffscreenCanvas2D) => {
|
||||
|
||||
**效果**：
|
||||
|
||||
- 100x100 红色方块，中心点位于 (200,200)
|
||||
- 45 度旋转，蓝色描边
|
||||
- 80% 不透明度
|
||||
- 100x100 红色方块，中心点位于 (200,200)
|
||||
- 45 度旋转，蓝色描边
|
||||
- 80% 不透明度
|
||||
|
||||
---
|
||||
|
||||
@@ -102,8 +102,8 @@ return () => <sprite loc={loc.value} scale={scale.value} render={render} />;
|
||||
|
||||
**效果**：
|
||||
|
||||
- 矩形横向放大 1.5 倍，横向位置移动 100px
|
||||
- 2 秒线性动画
|
||||
- 矩形横向放大 1.5 倍，横向位置移动 100px
|
||||
- 2 秒线性动画
|
||||
|
||||
---
|
||||
|
||||
@@ -137,8 +137,8 @@ return () => (
|
||||
|
||||
**效果**：
|
||||
|
||||
- 鼠标悬浮时添加模糊滤镜
|
||||
- 鼠标悬浮显示指针光标
|
||||
- 鼠标悬浮时添加模糊滤镜
|
||||
- 鼠标悬浮显示指针光标
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ graph LR
|
||||
|
||||
## 类描述
|
||||
|
||||
`UIController` 是 UI 控制系统的核心类，负责管理 UI 实例的显示栈、背景控制以及多种显示模式。继承自 `EventEmitter`，支持事件监听。想要编写 UI 请参考[深度指南](../../guide/ui.md)。
|
||||
`UIController` 是 UI 控制系统的核心类，负责管理 UI 实例的显示栈、背景控制以及多种显示模式。继承自 `EventEmitter`，支持事件监听。想要编写 UI 请参考[深度指南](../../guide/ui/ui.md)。
|
||||
|
||||
---
|
||||
|
||||
@@ -37,8 +37,8 @@ graph LR
|
||||
function constructor(id: string): UIController;
|
||||
```
|
||||
|
||||
- **参数**
|
||||
- `id`: 控制器的唯一标识符（若重复会触发警告日志）
|
||||
- **参数**
|
||||
- `id`: 控制器的唯一标识符（若重复会触发警告日志）
|
||||
|
||||
**示例**
|
||||
|
||||
@@ -84,9 +84,9 @@ function setBackground<T extends UIComponent>(
|
||||
|
||||
设置背景 UI 并初始化其实例。
|
||||
|
||||
- **参数**
|
||||
- `back`: 背景 UI 配置实例
|
||||
- `vBind`: 传递给背景组件的 Props 对象
|
||||
- **参数**
|
||||
- `back`: 背景 UI 配置实例
|
||||
- `vBind`: 传递给背景组件的 Props 对象
|
||||
|
||||
**示例**
|
||||
|
||||
@@ -156,12 +156,12 @@ function open<T extends UIComponent>(
|
||||
|
||||
打开一个新 UI 实例并加入栈中。
|
||||
|
||||
- **参数**
|
||||
- `ui`: UI 配置实例
|
||||
- `vBind`: 组件 Props
|
||||
- `alwaysShow`: 是否强制显示（默认 `false`）
|
||||
- **返回值**
|
||||
打开的 UI 实例，可以用于关闭等操作
|
||||
- **参数**
|
||||
- `ui`: UI 配置实例
|
||||
- `vBind`: 组件 Props
|
||||
- `alwaysShow`: 是否强制显示（默认 `false`）
|
||||
- **返回值**
|
||||
打开的 UI 实例，可以用于关闭等操作
|
||||
|
||||
**示例**
|
||||
|
||||
@@ -191,8 +191,8 @@ function closeAll(ui?: IGameUI): void;
|
||||
|
||||
关闭所有或指定类型的所有 UI 实例。
|
||||
|
||||
- **参数**
|
||||
- `ui`（可选）: 指定要关闭的 UI 类型，不填时表示关闭所有 UI
|
||||
- **参数**
|
||||
- `ui`（可选）: 指定要关闭的 UI 类型，不填时表示关闭所有 UI
|
||||
|
||||
---
|
||||
|
||||
@@ -222,7 +222,7 @@ function showAll(stack?: boolean): void;
|
||||
function showCustom(config: IUICustomConfig): void;
|
||||
```
|
||||
|
||||
切换显示模式：使用自定义模式（需实现 `IUICustomConfig`），参考[指南](../../guide/ui-system.md#自定义显示模式)
|
||||
切换显示模式：使用自定义模式（需实现 `IUICustomConfig`），参考[指南](../../guide/ui/system.md#自定义显示模式)
|
||||
|
||||
---
|
||||
|
||||
|
||||
+4
-4
@@ -28,7 +28,7 @@ lang: zh-CN
|
||||
|
||||
相比于 2.10.3 及 2.A，有如下改动：
|
||||
|
||||
- [系统说明](./system)
|
||||
- [UI 编写](./ui)
|
||||
- [UI 系统](./ui/system)
|
||||
- [音频系统](./audio)
|
||||
- [系统说明](./system.md)
|
||||
- [UI 编写](./ui/ui.md)
|
||||
- [UI 系统](./ui/system.md)
|
||||
- [音频系统](./audio.md)
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
## 定义动画属性
|
||||
|
||||
我们以一个自定义 UI 为例，来讲述如何编写一段动画。自定义 UI 参考[此指南](./new-ui.md)和[此教程](../../guide/ui.md)。
|
||||
我们以一个自定义 UI 为例，来讲述如何编写一段动画。自定义 UI 参考[此指南](./new-ui.md)和[此教程](../../guide/ui/ui.md)。
|
||||
|
||||
假设自定义 UI 在 `packages-user/client-modules/src/render/ui` 文件夹下，我们需要引入 `transitioned` 接口，并调用它定义动画属性：
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
- [新增勇士属性](./status-bar.md#拓展-新增勇士属性) （既包含客户端，也包含数据端）
|
||||
- [编写新 UI](./new-ui.md)
|
||||
- [UI 与组件的区别](./new-ui.md#拓展-ui-与组件的区别)
|
||||
- [UI 编写参考](../ui.md)
|
||||
- [UI 编写参考](../ui/ui.md)
|
||||
- [新增按键](./hotkey.md)
|
||||
- [添加辅助按键](./hotkey.md#拓展-添加辅助按键)
|
||||
- [在 UI 内实现按键](./hotkey.md#拓展-在-ui-内实现按键)
|
||||
|
||||
@@ -82,7 +82,7 @@ controller.close(ins);
|
||||
|
||||
## UI 编写参考
|
||||
|
||||
参考[此文档](../ui.md)，此文档将会教你如何从头开始编写一个 UI，并解释 UI 运行与渲染的基本逻辑。
|
||||
参考[此文档](../ui/ui.md)，此文档将会教你如何从头开始编写一个 UI，并解释 UI 运行与渲染的基本逻辑。
|
||||
|
||||
## 拓展-UI 与组件的区别
|
||||
|
||||
|
||||
@@ -224,4 +224,4 @@ export function calDamageWith(
|
||||
|
||||
## 拓展-了解 UI 编写的基本逻辑
|
||||
|
||||
参考[此文档](./ui.md)，此文档将会教你如何从头开始编写一个 UI，并解释 UI 运行与渲染的基本逻辑。
|
||||
参考[此文档](../ui/ui.md)，此文档将会教你如何从头开始编写一个 UI，并解释 UI 运行与渲染的基本逻辑。
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
## 常见需求实现指南
|
||||
|
||||
参考[此文档](./implements.md)
|
||||
参考[此文档](./implements/index.md)
|
||||
|
||||
## 热重载
|
||||
|
||||
|
||||
@@ -536,21 +536,21 @@ export const MyCom = defineComponent(() => {
|
||||
|
||||
- [ConfirmBox](../../api/user-client-modules/组件%20ConfirmBox.md)：确认框，一般使用 `getConfirm` 接口，不直接使用组件。
|
||||
- [Choices](../../api/user-client-modules/组件%20Choices.md)：选择框，一般使用 `getChoice` 接口，不直接使用组件。
|
||||
- [FloorSelector](../../api/user-client-modules/组件%20FloorSelector.md)：楼层选择组件，浏览地图左侧的楼层选择就是使用的本组件。
|
||||
<!-- - [FloorSelector](../../api/user-client-modules/组件%20FloorSelector.md)：楼层选择组件，浏览地图左侧的楼层选择就是使用的本组件。 -->
|
||||
- [图标组件](../../api/user-client-modules/图标组件.md)：一些常用图标。
|
||||
- [Input](../../api/user-client-modules/组件%20Input.md)：输入组件，可以放到组件内部，可以用于搜索栏等。
|
||||
- [InputBox](../../api/user-client-modules/组件%20InputBox.md)：输入框组件，类似于确认框，一般使用 `getInput` 或 `getInputNumber` 接口，不使用本组件。
|
||||
- [List](../../api/user-client-modules/组件%20List.md)：列表组件，可以用于展示一列内容。
|
||||
- [ListPage](../../api/user-client-modules/组件%20ListPage.md)：左侧是列表，右侧是当前选项对应的详情页，可以用于游戏机制说明等。
|
||||
<!-- - [Input](../../api/user-client-modules/组件%20Input.md)：输入组件，可以放到组件内部，可以用于搜索栏等。
|
||||
[InputBox](../../api/user-client-modules/组件%20InputBox.md)：输入框组件，类似于确认框，一般使用 `getInput` 或 `getInputNumber` 接口，不使用本组件。 -->
|
||||
<!-- - [List](../../api/user-client-modules/组件%20List.md)：列表组件，可以用于展示一列内容。
|
||||
[ListPage](../../api/user-client-modules/组件%20ListPage.md)：左侧是列表，右侧是当前选项对应的详情页，可以用于游戏机制说明等。 -->
|
||||
- [Progress](../../api/user-client-modules/组件%20Progress.md)：进度条组件，播放录像时右下角的进度条就是本组件。
|
||||
- [Arrow](../../api/user-client-modules/组件%20Arrow.md)：箭头组件，画一个箭头。
|
||||
- [ScrollText](../../api/user-client-modules/组件%20ScrollText.md)：滚动文本组件，可以用于长剧情或是 staff 表等。
|
||||
- [Selection](../../api/user-client-modules/组件%20Selection.md)：选择光标，列表组件的选择光标就是使用的本组件。
|
||||
- [Background](../../api/user-client-modules/组件%20Background.md)：背景组件，可以设置为纯色或 `winskin`。
|
||||
- [WaitBox](../../api/user-client-modules/组件%20WaitBox.md)：等待框，一般使用 `waitbox` 接口，不直接使用组件。
|
||||
<!-- - [WaitBox](../../api/user-client-modules/组件%20WaitBox.md)：等待框，一般使用 `waitbox` 接口，不直接使用组件。 -->
|
||||
- [Page](../../api/user-client-modules/组件%20Page.md)：分页组件，本文已经详细讲解。
|
||||
- [Scroll](../../api/user-client-modules/组件%20Scroll.md)：滚动条组件，本文已经详细讲解。
|
||||
- [TextContent](../../api/user-client-modules/组件%20TextContent.md)：多行文本组件，本文已经详细讲解。
|
||||
- [Textbox](../../api/user-client-modules/组件%20Textbox.md)：文本框组件，就是事件的显示文字，一般不会直接用。
|
||||
- [Thumbnail](../../api/user-client-modules/组件%20Thumbnail.md)：缩略图组件，用于展示某个地图的缩略图。
|
||||
<!-- - [Thumbnail](../../api/user-client-modules/组件%20Thumbnail.md)：缩略图组件，用于展示某个地图的缩略图。 -->
|
||||
- [Tip](../../api/user-client-modules/组件%20Tip.md)：提示组件，就是左上角的提示，一般不会直接使用。
|
||||
@@ -27,7 +27,7 @@ type ElementLocator = [
|
||||
- `w` `h`: 元素的长宽，描述了在没有缩放时元素的矩形长宽，默认是没有放缩的。
|
||||
- `ax` `ay`: 元素的锚点位置，描述了元素参考点的位置，所有位置变换等将以此点作为参考点。0 表示元素最左侧或最上侧，1 表示最右侧或最下侧，可以填不在 0-1 范围内的值，例如 `[-1, 1]` 表示锚点横坐标在元素左侧一个元素宽度的位置，纵坐标在元素下边缘的位置。
|
||||
|
||||
|
||||
|
||||
|
||||
示例如下：
|
||||
|
||||
|
||||
Reference in new issue
Block a user