【广告】贡献一个还不错的新手引导模块插件,3天8折优惠中

本新手引导模块优势

  • 高度配置化,95%的工作在excel完成
  • 支持任意复杂度的单步引导提示UI(可选)
  • 模块独立,几乎不破坏业务逻辑代码
  • 事件驱动,便于使用,配置完成以后,只需编写少量代码

功能介绍

游戏开发中,新手引导部分经常需要插入到业务代码的方方面面,极难管理不说,还很容易出错。本新手模块解决了此问题。

本模块依赖固定格式的excel表格配置,以事件驱动,需要在业务逻辑中添加引导辅助类,用于声明或处理配置中使用的的事件。demo表格在线预览 表格格式如下:


-------我是分割线-------

表格中每一行代表一个引导步骤,解析引导步骤列表后,可以自动按步骤执行引导,原业务代码只需要插入极少量的事件代码

  • excel转成json使用到了一个开源工具,已经集成在demo中:excel2json

整体自动播放的大致流程图如下:

引导配置字段说明

excel表格的内容会解析成以下数据结构的数组,引导将按数组顺序连贯执行或等待相应事件触发后接续执行。其中单步引导数据结构如下(与Excel表格一致):

使用教程

  • 先将表格转成json
  • 然后需要解析引导配置,这个直接使用demo的config_guide就行,基本不用改:
  • 其次需要一个统一的引导辅助类,demo中是data_guide.ts,作用是声明事件,并处理一些引导系统自动emit的事件。事件与excel的事件对应。
    如,本demo中声明的事件如下:

其中,GuideEvents是由业务逻辑中触发,比如:

image.png

表示向引导系统发送onShow_test_1事件,由引导系统自动进行处理。这个也基本上是业务逻辑中唯一需要增加的代码!

  • 对事件的集中处理,也应放在data_guide辅助类中(声明事件以及对事件的处理,即可完美接续引导顺序,详细请查看demo):

定制引导提示

  • 如果需要定制指定步骤的引导提示UI,只需配置tipPrefab和tipParams即可,其中,tipPrefab是prefab所在的bundle和路径,tipParams是传给该UI的参数;tipPrefab根节点必须挂载继承自hyz.guide_tip_base的组件,并实现initGuideTip(params:any)方法,这个就是体现高自由度的地方,tipParams会作为参数经由initGuideTip传给tipPrefab,所以可以实现任意复杂度的提示UI。
    image.png
  • 开始进行引导步骤只需要调用checkPlayGuide即可

在线demo地址
在线demo地址2(github page)
商城地址

欢迎大佬们指正~

5赞

感觉很强,有原理简单介绍么

感谢大佬关注~

其实不涉及到复杂原理,主要就是将一些项目中的经验总结了一下。核心问题就是个自动播放,只有能自动播放了,那把引导配置成excel表格才有意义。

那么如何做到自动播放呢?

连贯的引导自不必说,就是步骤列表里已经存有多个无前置事件的步骤,上一个步骤关闭了,下一个步骤就接着进行了;
不连贯的引导,则是通过事件触发,比如我需要在 关闭某个弹窗或进入某个场景 以后,再执行下一步引导,则需要在excel里配置该引导的前置事件(waitForEvent),并且在弹窗的onDestroy或场景的onDestroy主动抛出相应事件,就会自动接续引导。其中,在业务逻辑中,抛出事件这一行代码,是仅有的需要侵入业务逻辑的代码。

关于自动播放,我整理了一个流程图,大致如下:

除了自动播放,还有涉及到需要修改业务逻辑或者UI的,也是通过事件,并在data_guide中统一处理,如某一步骤要求显示引导后立即暂停渲染,则需要在excel中配置eventAfterOpen字段,在data_guide里处理该事件:

在一个就是引导提示,这个的可能存在的UI千奇百怪,于是我决定把此UI完全交给外部实现,只要求使用统一的实现方式,方便配置就行。excel的相关字段是tipPrefab和tipParams,一个是提示UI的地址,一个是传给提示UI的参数,有这两个,即可实现任意复杂度的UI。

至于遮罩挖洞,这个就不多赘言了,大佬肯定都懂,sdf实现的矩形挖洞shader,同时支持圆形和正六边形洞口。后面有需要再加上节点轮廓的洞口支持

可以很强 :+1:,shader挖孔我觉得是做新手指导非常好,奈何我技术有限,我自己不会写,这下我可以直接抄了

自己顶一下,欢迎走过路过得大佬们~ :crazy_face:

太棒了,又有好货可以漂

大佬支持个2.4

已经提审了,估计快要审核通过了,请大佬静候佳音 :grinning:

2.4.x已经审核通过了,基于2.4.9版本

重大更新:1.2.0

  • 1.优化配置格式,去掉比较复杂的事件,简化配置工作
  • 2.处理一些bug,比如在某些安卓手机上遮罩不显示的问题
  • 3.优化引导接口,增加hyz.guide_manager.blockAllTouch(),用于在引导空隙之间屏蔽用户点击
  • 4.优化hyz.guide_tip_base,增加onStepWillAppear、onStepWillFinish、onStepAfterHide接口,使提示更加灵活
  • 5.丰富demo,加上支线2,支持Scrollview、checkBox、Slider、ToggleGroup、EditBox的引导提示

Excel在线预览
在线体验地址
cocos store 地址

方便告知一下如何操作重现吗?
大佬可以加下我qq

我知道了,是第9步引导的clickType==1,表示点击高亮区域自动goto下一步引导。这里如果迅速点击关闭按钮,或者点击伴随着滑动(即一个无效的按钮点击),就会出现这个bug。

这里clickType应该设置为2。表示引导不会自动关闭,必须手动关闭。凡对于按钮交互的引导,原则上都应该clickType==2。并在按钮回调里手动调用:hyz.guide_manager.closeCurStep()

image

image

感谢大佬指正,后续的demo我会将按钮引导的clickType全部改正为2。

demo已经更新了,大佬可以再试试

前几天我自己写的也有类似的问题 :joy: 有二级弹窗的时候我会暂停引导步骤,并添加二级弹窗关闭后的指令,功能和你这个几乎一样,只不过我的步骤配置是ts脚本

想问下这个tip框的坐标是计算的吗,还有假如引导的节点在最右边,那么这个框需要反向反向

这个tip框最好时要稍微计算一下,以适配不同的分辨率。可以参照demo的做法,以目标高亮节点为锚点,来显示相应引导步骤的提示:


卡的时候点击过快可能会出现

感谢反馈!确实是有这个问题,这是demo中引导还没加载出来就启用了跳转场景按钮导致,首次加载提示的prefab资源需要一点时间,下个版本我会加一个异步返回值,用于应对此类问题。