diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index a16863d..df94bd6 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -78,6 +78,10 @@ export default defineConfig({ { text: '动画效果', link: '/guide/implements/animate' + }, + { + text: '选择框与确认框', + link: '/guide/implements/choice' } ] } diff --git a/docs/api/user-client-modules/functions.md b/docs/api/user-client-modules/functions.md index b2de6dd..1f758d2 100644 --- a/docs/api/user-client-modules/functions.md +++ b/docs/api/user-client-modules/functions.md @@ -10,10 +10,10 @@ function onOrientationChange(hook: OrientationHook): void; ``` -监听屏幕方向变化事件。 +监听屏幕方向变化事件。需要在组件内或 UI 内调用。 **参数** -- `hook`: 方向变化回调函数 +- `hook`: 方向变化回调函数 ```typescript type OrientationHook = ( @@ -28,6 +28,7 @@ type OrientationHook = ( ```typescript import { onOrientationChange, Orientation } from './use'; +// 组件内 onOrientationChange((orient, width) => { if (orient === Orientation.Portrait) { // 竖屏模式 @@ -173,8 +174,8 @@ function getConfirm( 返回 `Promise`： -- `true` 表示用户点击确认 -- `false` 表示用户取消或关闭 +- `true` 表示用户点击确认 +- `false` 表示用户取消或关闭 --- @@ -264,7 +265,7 @@ function getChoice( 返回 `Promise`： -- 解析为选中项的 `key` 值 +- 解析为选中项的 `key` 值 #### 使用示例 diff --git a/docs/guide/implements/choice.md b/docs/guide/implements/choice.md new file mode 100644 index 0000000..5bb9c53 --- /dev/null +++ b/docs/guide/implements/choice.md @@ -0,0 +1,189 @@ +# 选择框与确认框 + +2.B 提供的简单的确认框与选择框接口，允许你用几行代码就可以弹出一个确认框让用户确认，或是弹出选择框让用户选择，不再需要像 2.x 一样用非常不好用的 `myconfirm` 或 `insertAction` 事件流了。 + +## 确认框 + +假设我们需要在点击一个按钮后弹出应该确认框，让玩家确认操作，可以使用 `getConfirm` 或 `routedConfirm` 接口。假设我们在 `packages-user/client-modules/src/render/ui` 文件夹下的 UI 中实现这一需求，我们可以这么写： + +```tsx +// 从 components 文件夹引入接口，注意路径关系 +import { getConfirm } from '../components'; + +// UI 模板及如何编写 UI 参考 “新增 UI” 需求指南，这里只给出必要的修改部分，模板部分不再给出 +export const MyCom = defineComponent(props => { + /** 当鼠标点击时触发，由于 getConfirm 是异步函数，这里的 click 也需要异步 */ + const click = async () => { + // 调用接口，并等待执行完毕，获取异步返回值 + const confirm = await getConfirm( + props.controller, // 使用打开当前 UI 的控制器作为 UI 控制器 + '确认要 XXX 吗？', // 提示文字 + [240, 240, void 0, void 0, 0.5, 0.5], // 确认框所处的位置，这里使用居中对齐，中心点在 (240,240) 位置 + 240, // 确认框的宽度 + { + // 这一参数具体看后面的解释 + selFill: 'gold' // 选项文字使用金色 + } + ); + if (confirm) { + // 如果用户选择了确认，可以执行确认内容，例如显示一个提示 + core.drawTip('用户确认'); + } else { + // 如果用户选择了取消，可以执行取消内容 + core.drawTip('用户取消'); + } + }; + + return () => ( + + + + ); +}); +``` + +其中 `getConfirm` 的最后一个参数是一个对象，可以传入 `ConfirmBox` 组件的参数，具体可以参考[此文档](../../api/user-client-modules/组件%20ConfirmBox.md)。例如 `selFill` 是 `ConfirmBox` 控制选项填充样式的参数。 + +除此之外，还有一个 `routedConfirm` 接口，此接口与 `getConfirm` 引入方式相同，主要差别为 `routedConfirm` 会自动处理录像。但是这并不意味着用 `routedConfirm` 比 `getConfirm` 更好，因为我们一般会在客户端（渲染端）调用它，而客户端的内容在录像验证时是不会执行的，这就可能导致录像出错。一般情况下，我们只需要使用 `getConfirm` 接口，而需要使用 `routedConfirm` 的场景已经在样板中处理。 + +**总结成一句话就是**：一般情况下不要使用 `routedConfirm`，使用 `getConfirm` 即可。 + +## 选择框 + +选择框会给玩家提供一系列选项，让玩家选择某一项，并返回玩家选择的内容。使用 `getChoice` 接口，示例如下： + +```tsx +// 从 components 文件夹引入接口，注意路径关系 +import { getChoice } from '../components'; // [!code ++] + +// UI 模板及如何编写 UI 参考 “新增 UI” 需求指南，这里只给出必要的修改部分，模板部分不再给出 +export const MyCom = defineComponent(props => { + // 选项内容，第一项是 id，第二项是该选项的显示内容 + // 第一项 id 可以填字符串或者数字 + const choices: ChoiceItem[] = [ + ['key1', '选项1'], // 第一个选项 + ['key2', '选项2'] // 第二个选项 + ]; + + /** 同样，由于 getChoice 是异步函数，这里的 click 也需要异步 */ + const click = async () => { + // 调用接口，并等待执行完毕，获取异步返回值 + const choice = await getChoice( + props.controller, // 使用打开当前 UI 的控制器作为 UI 控制器 + choices, // 在这里传入选项内容 + [240, 240, void 0, void 0, 0.5, 0.5], // 选择框所处的位置 + 240, // 选择框的宽度 + { + // 可选参数，例如显示提示文字 + text: '请选择一项' + } + ); + // 使用 switch 判断 + switch (choice) { + case 'key1': + // 选择了第一个选项时 + core.drawTip('选择了第一项'); + break; + // ... 其他判断 + } + }; + + return () => ( + + + + ); +}); +``` + +同样，`getChoice` 也有一个对应的 `routedChoice`，依然建议一般情况下只使用 `getChoice`，不使用 `routedChoice`。 + +## 拓展-使用枚举定义选择框 + +如果使用字符串定义选择框的 `id`，一来没有严格的类型标注，二来字符串的性能也较差，因此我们推荐使用枚举定义选择框的 `id`。首先我们先编写一段枚举： + +```ts +// 定义选项枚举，可以写一些有意义的单词辅助记忆 +const enum MyChoice { + Choice1, // 第一个选项 + Choice2, // 第二个选项 + Choice3 // 第三个选项 +} +``` + +然后在选择框定义中使用枚举定义： + +```ts +const choices: Choices[] = [ + [MyChoice.Choice1, '选项1'], + [MyChoice.Choice2, '选项2'], + [MyChoice.Choice3, '选项3'] +]; + +// 这里不变 +const choice = await getChoice( + props.controller + choices + [240, 240, void 0, void 0, 0.5, 0.5] + 240 +); + +// 可以用 switch 判断 +switch (choice) { + case MyChoice.Choice1: + // 选择选项1时 + break; + // ... 其他内容 +} +``` + +## 拓展-等待框 + +等待框也是一种类似于确认框的东西，不过它用来等待一个操作执行完毕，同时给用户显示一个界面，可以是复杂逻辑运算，也可以是网络请求等。以等待网络请求为例： + +```tsx +// 从 components 文件夹引入接口，注意路径关系 +import { waitbox } from '../components'; + +// UI 模板及如何编写 UI 参考 “新增 UI” 需求指南，这里只给出必要的修改部分，模板部分不再给出 +export const MyCom = defineComponent(props => { + const click = async () => { + // 等待网络请求，同时展示一个等待框让玩家不孤单 + const response = await waitbox( + props.controller, // 控制器 + [240, 240, void 0, void 0, 0.5, 0.5], // 位置 + 240, // 宽度 + fetch('/api/example') // 一个 fetch 请求 + ); + // 之后就可以直接使用了 + const body = response.body; + }; + + return () => ( + + + + ); +}); +``` + +## 拓展-API参考 + +- [ConfirmBox](../../api/user-client-modules/组件%20ConfirmBox.md) +- [Choices](../../api/user-client-modules/组件%20Choices.md) +- [Waitbox](../../api/user-client-modules/组件%20Waitbox.md) +- [getConfirm](../../api/user-client-modules/functions.md#getconfirm) +- [getChoice](../../api/user-client-modules/functions.md#getchoice) +- [waitbox](../../api/user-client-modules/functions.md#waitbox) diff --git a/docs/guide/implements/index.md b/docs/guide/implements/index.md index 33c9fb6..2ff90c9 100644 --- a/docs/guide/implements/index.md +++ b/docs/guide/implements/index.md @@ -10,6 +10,8 @@ - [修改状态栏显示](./status-bar.md) - [编写新 UI](./new-ui.md) - [自定义按键](./hotkey.md) +- [动画效果](./animate.md) +- [选择框与确认框](./choice.md) ## 数据端内容 diff --git a/docs/guide/implements/status-bar.md b/docs/guide/implements/status-bar.md index b156c85..f4831e2 100644 --- a/docs/guide/implements/status-bar.md +++ b/docs/guide/implements/status-bar.md @@ -109,6 +109,78 @@ export const LeftStatusBar = defineComponent>( ); ``` +## 拓展-新增勇士属性 + +在上例中，展示了如何显示一个自定义的 `flag`，但有时候我们需要自定义一个勇士属性，例如攻速、减伤等，这些属性可能会受到全局 `buff` 的影响，这时候使用 `flag` 就不方便，我们推荐使用自定义属性的方式。 + +### 定义属性 + +我们打开编辑器的全塔属性界面，点击左侧上方的编辑表格按钮，向下滑动找到 `勇士攻击` 等勇士属性（约第 250 行）的位置，仿照这些属性增加一个新的属性，例如添加攻速，取属性名为 `atkSpeed`： + +```js +{ + "mana": { + "_leaf": true, + "_type": "textarea", + "_data": "初始魔力" + }, + "atkSpeed": { // [!code ++] + "_leaf": true, // [!code ++] + "_type": "textarea", // [!code ++] + "_data": "初始攻速" // [!code ++] + }, // [!code ++] + "atk": { + "_leaf": true, + "_type": "textarea", + "_data": "初始攻击" + }, +} +``` + +保存后刷新页面，再次进入全塔属性界面，可以看到在勇士属性部分多了一项 `初始攻速`，我们可以输入初始值，例如设为初始值 `1`，表示攻速为 `100%`。 + +接下来回到 `vscode`，打开文件 `src/types/declaration/status.d.ts`，按下 `ctrl+F` 搜索 `interface HeroStatus`，在其中新增一个属性值 `atkSpeed`： + +```ts +interface HeroStatus { + // ... 原有内容 + + /** 勇士攻速 */ + atkSpeed: number; // [!code ++] + + // ... 原有内容 +} +``` + +### 容错处理 + +为了保证属性添加前的存档还能正常加载，我们需要容错处理，打开编辑器，进入脚本编辑界面，编辑 `重置游戏` 这一脚本编辑项。我们在函数的最后进行容错处理： + +```js +function () { + // ... 原有内容 + + // 容错处理 + core.status.hero.atkSpeed ??= 1; // [!code ++] +} +``` + +由于样板编辑器的限制，上述代码会有语法报错，但实际上不会有任何问题，关闭语法检查再保存即可。 + +### 状态栏显示 + +与本文章最初的示例基本一致，只有传入属性值时需要略加变动，其他操作包括属性定义等不改变，将赋值行为改为 `getHeroStatusOn`： + +```ts +leftStatus.atk = getHeroStatusOn('atk'); +leftStatus.hp = getHeroStatusOn('hp'); +leftStatus.def = getHeroStatusOn('def'); +// ... 原有内容 + +// 改为 getHeroStatusOn +leftStatus.atkSpeed = getHeroStatusOn('atkSpeed'); +``` + ## 拓展-了解 UI 编写的基本逻辑 参考[此文档](./ui.md)，此文档将会教你如何从头开始编写一个 UI，并解释 UI 运行与渲染的基本逻辑。 diff --git a/docs/guide/quick-start.md b/docs/guide/quick-start.md index beb216b..1e95933 100644 --- a/docs/guide/quick-start.md +++ b/docs/guide/quick-start.md @@ -6,6 +6,26 @@ 参考[此文档](./implements.md) +## 启动游戏与编辑器 + +在造塔群中的群文件中找到 `启动服务->2.B+ 启动服务`，根据自己设备的系统下载对应的启动服务（此版本不支持移动端造塔），下载后运行安装到自己的设备，可以选择安装路径。 + +安装完毕后，打开软件，在左侧点击选择文件夹，然后打开 2.B 样板文件夹，即包含 `package.json` `packages` `packages-user` 这些目录的文件，打开错了会提示打开错误。 + +然后点击右侧的安装依赖，耐心等待一段时间，等待依赖安装完毕。 + +然后点击右侧的启动服务器，等待服务器启动，启动完毕后会自动使用默认浏览器打开游戏、编辑器和帮助文档。 + +当你**制作完游戏**后，点击构建游戏，即可自动构建游戏，构建结果在 `dist` 文件夹，会自动打包到 `dist.zip` 压缩包，发塔或更新上传此压缩包即可。 + +此帮助文档远比 2.x 的文档易读，也更容易理解，建议多阅读此文档来解决自己的问题，如果问题很复杂，或是短时间内解决不了，再去造塔群询问。 + +```mermaid +graph TD + A[下载安装包] --> B[安装启动服务] --> C[运行启动服务] --> D[选择样板文件夹] --> E[安装依赖] --> F[启动服务器]; + F -- 造完塔 --> G[构建游戏] --> H[发布或更新游戏] +``` + ## 编辑器 编辑器与 2.x 的编辑器差别不大，但 2.B 的编辑器多了一些功能： @@ -62,7 +82,7 @@ ### 协议问题 -2.B 样板换用了 `GPL3.0` 开源协议，这要求所有以此为基础开发的项目也必须完全开源，但考虑到很多作者不了解其中的细节，因此样板将会针对此问题进行处理，处理方案为：**将源码原封不动地打包为压缩包，放到构建完成的游戏中**，届时，只要在网站上下载游戏，就可以解压压缩包查看源码。 +2.B 样板换用了 `GPL3.0` 开源协议，这要求所有以此为基础开发的项目也必须完全开源，但考虑到很多作者不了解其中的细节，因此样板将会针对此问题自动处理，处理方案为：**将源码原封不动地打包为压缩包，放到构建完成的游戏中**，届时，只要在网站上下载游戏，就可以解压压缩包查看源码。 ## 学会查阅此文档 diff --git a/packages-user/client-modules/src/render/components/choices.tsx b/packages-user/client-modules/src/render/components/choices.tsx index 7ef24bb..29c92d8 100644 --- a/packages-user/client-modules/src/render/components/choices.tsx +++ b/packages-user/client-modules/src/render/components/choices.tsx @@ -194,7 +194,10 @@ export const ConfirmBox = defineComponent< }, confirmBoxProps); export type ChoiceKey = string | number; -export type ChoiceItem = [key: ChoiceKey, text: string]; +export type ChoiceItem = [ + key: T, + text: string +]; export interface ChoicesProps extends DefaultProps, TextContentProps { choices: ChoiceItem[]; @@ -614,11 +617,11 @@ export function getConfirm( */ export function getChoice( controller: IUIMountable, - choices: ChoiceItem[], + choices: ChoiceItem[], loc: ElementLocator, width: number, props?: Partial -) { +): Promise { return new Promise(res => { const instance = controller.open( ChoicesUI, @@ -681,6 +684,7 @@ export async function routedConfirm( if (core.isReplaying()) { const confirm = getChoiceRoute() === 1; const timeout = core.control.__replay_getTimeout(); + core.status.route.push(`choices:${confirm ? 1 : 0}`); if (timeout === 0) return confirm; const instance = controller.open(ConfirmBoxUI, { ...(props ?? {}), @@ -724,17 +728,18 @@ export async function routedConfirm( * @param width 选择框的宽度 * @param props 额外的 props，参考 {@link ChoicesProps} */ -export async function routedChoices( +export async function routedChoices( controller: IUIMountable, - choices: ChoiceItem[], + choices: ChoiceItem[], loc: ElementLocator, width: number, props?: Partial -) { +): Promise { if (core.isReplaying()) { const selected = getChoiceRoute(); const timeout = core.control.__replay_getTimeout(); - if (timeout === 0) return selected; + core.status.route.push(`choices:${selected}`); + if (timeout === 0) return choices[selected][0]; const instance = controller.open(ChoicesUI, { ...(props ?? {}), choices, @@ -744,7 +749,7 @@ export async function routedChoices( }); await sleep(core.control.__replay_getTimeout()); controller.close(instance); - return selected; + return choices[selected][0]; } else { const choice = await getChoice(controller, choices, loc, width, props); const index = choices.findIndex(v => v[1] === choice);