新手引导

新手引导

介绍#

新手引导系统由以下部分构成，其中多边形遮罩可自由选择是否使用

新手引导管理器#

负责引导流程的启动、暂停、跳转等功能

• 多实例支持：可同时运行多个独立引导流程
• 灵活步骤管理：支持任意步骤的插入、删除、跳转
• 状态保持：支持暂停/恢复、步骤状态还原
• 组件化设计：引导步骤脚本与逻辑分离，支持组件式挂载
• 异步加载：支持步骤资源预加载，优化用户体验
• 事件驱动：完善的生命周期事件系统
• 场景支持：自动处理场景切换与资源加载

新手引导步骤#

负责用户的每个步骤的逻辑处理

多边形遮罩#

用于引导指定的点击位置

• 自动适配：遮罩孔洞在不同屏幕尺寸下都会在正确的位置
• 节点跟踪：遮罩孔洞可跟随引导节点移动
• 屏蔽触摸：可屏蔽遮罩孔洞外的触摸

概念（必读）#

如何减少重复代码及实现任意步骤的跳转？#

在引导过程中，经常需要写一些重复的代码，以及可能面对策划提出的重新登录后跳转到上次未完成的步骤，如何实现它？

框架提供了一个实现方式，使用操作表，示例如下

import * as cc from 'cc';

const tab: Record<string, mk.GuideManage_.OperateCell> = {
    清理界面: {
        load() { ... },
        unload() { ... },
        reset() { ... },
    },
    引导窗口: { ... },
    ...
};

const key: {
    [k in keyof typeof tab]: k;
} = new Proxy(Object.create(null), {
    get: (target, key) => key,
});

export default {
    tab,
    key,
};

其中的 tab 对象存放操作单元，每个操作单元有 load, unload, reset 三个回调函数

• load

  从上个步骤跳转到当前步骤时，若上个步骤不存在当前操作时，则执行 load

• unload

  从当前步骤跳转到下个步骤时，若下个步骤不存在当前操作时，则执行 unload

• reset

  从上个步骤跳转到当前步骤时，若上下步骤都存在当前操作时，则执行 reset

举例#

需求：存在步骤 1 和步骤 2，两个步骤都弹出一个引导窗口，并且可以从任意步骤跳转到这两个步骤

实现：只需要在两个步骤脚本中设置引导操作列表为 [清理界面, 引导窗口]，从任意步骤跳转时，引导管理器都会依次顺序执行