游戏系统

新手引导:在真实界面上的导览

iDos Games 现成新手引导的运作方式:能高亮游戏任意元素的引导流程、带“下一步”和“跳过”的提示、等待真实操作的步骤、奖励和漏斗,以及如何在后台中设置。

新手引导是在游戏真实界面上进行的引导流程:每一步高亮一个元素,其余部分变暗,并显示提示。 一步可以等待玩家的真实操作,每个展示过的步骤都会计入漏斗,所以你能看到新玩家在哪里流失。

玩家看到什么

  • 任意界面上被高亮的元素,其余部分变暗;布局变化时高亮会跟随元素。
  • 提示气泡:玩家自己关闭的步骤上有“下一步”,流程允许时有“跳过”。
  • 等待真实操作的步骤:提示会一直保留,直到玩家在游戏中完成该操作。
  • 流程结束时的奖励,以及用来重玩允许的流程的“新手引导”列表。
大厅
12 450
320
商店
排名
开始
第 3/5 步

点击“开始”,开始你的第一回合!

跳过
下一步
引导奖励:50 宝石
每一步可以高亮任意界面上的任意元素;其余部分变暗。
提示气泡,流程允许时带“下一步”和“跳过”。
结束时发放奖励;每个展示过的步骤都会计入漏斗。
示例. 大厅上的新手引导步骤:高亮的按钮和提示。

如何运作

  • 每一步通过锚点指向元素:任意模块任意元素上的 data-tutorial-anchor。
  • 游戏设置允许时,流程可以自动开始,例如在首次访问时。
  • 每个展示过的步骤都会上报,从而在后台分析中形成新手引导漏斗。

步骤 01把系统加入项目

告诉 AI 编程助手:“加一个大厅的新手导览”。它会安装现成的系统,附带一个五步的欢迎导览和宝石奖励。

步骤 02在后台中设置

打开后台,选择你的项目,进入 实时运营 → v2 → 教程。

  • 创建流程:它的步骤、每一步的锚点和提示文字。
  • 选择一步如何结束:由玩家关闭,或由游戏中的真实操作结束。
  • 设置流程何时开始、能否跳过或重玩,以及奖励。

页面上的 AI 按钮会打开助手:描述你的需求,它会提出修改,你检查后点击保存。

步骤 03测试并发布

在应用的测试版中检查系统。设置通过单独的操作发送到正式应用,请看发布与链接。

开发者须知

新手引导通过 @idosgames/core 中的 client.tutorial 工作;遮罩层通过锚点找到元素。

TypeScript
// 任意模块的任意元素都可以作为引导锚点
<button data-tutorial-anchor="play:start">Play</button>
// 大厅标签页是 tab:{featureID},个人资料按钮是 lobby:profile,
// 游戏的“开始”按钮是 play:{modeID}
  • 为流程指向的元素加上标记;没有对应元素的锚点会一直等待它出现。
  • 步骤通过 reportStepShown 上报、通过 completeStep 完成:遮罩层会替你处理。

每个字段都在技能 tutorial-system 中有说明,由 SDK 的 MCP 服务器提供。

常见问题

某一步可以等待真实操作吗?

可以。一步可以在游戏事件发生时结束,而不是点“下一步”,这样玩家在动手中学习。

能看到玩家在哪一步流失吗?

能。每个展示过的步骤都会上报,所以流程的漏斗会逐步显示流失情况。

另请参阅

制作你自己的游戏

用一句话描述你的想法,AI 编程助手会把它做出来,并以独立链接上线。