新手引导模块导读 - sgtcloud/sgtcloud-ossgame-project-zero GitHub Wiki

本模块基本上复用了https://github.com/ShawnZhang2015/Guide 这个项目,更多详细的介绍请移步去项目主页。

个人总结的一些要点

  • 原理上就是在整个Scene最上面覆盖了一层GuideLayer,在这个layer里面实现Touch事件的监听和动画图形的渲染
  • 核心指令sz.GuideCommand.GC_FINGER_HINT的原理就是先查找到一个节点,然后通过对点击和这个节点选区的判断来触发后续的逻辑
  • 在MainScene.js的onEnter中添加如下代码完成集成
        var guideLayer = new sz.GuideLayer(this, guideConfig);
        this.addChild(guideLayer, 1000);
  • 新手引导的数据在guideConfig.js文件中,步骤数据(step)在Guide.js的_processStep中按照顺序被依次加载和初始化
  • 框架源码中的step这个对象就是guideConfig中task数组对应的序号对应的那个对象
  • 每个step的生命周期依次为onEnter,(delayTime),command,onExit
  • 扩展实现以上方法记得要调用一下第一个传进来的回调参数方法cb
  • sz.GuideCommand.GC_FINGER_HINT自带的节点查找对scrollview非常不友好,需要自己hack一个方法,见下文

一些扩展

  • 扩展了一个新指令sz.GuideCommand.GC_SHOW_MSG用来显示引导员和文案
  • 扩展了sz.GuideCommand.GC_FINGER_HINT指令的locator,支持rect绝对坐标的选区,来规避scrollview的坐标偏移问题
  • 扩展了原先手型图片sprite为支持ccs的动画