Cocos Creator 制作分步引导

638 阅读2分钟

本文已参与「新人创作礼亅活动,一起开启掘金创作之路。

之前我在写laya的时候发现他们官方有一个示例的新手引导还挺好用的,但是当我使用cocos的时候我发现好像并没有好的示例来用,大家一般都是采用mask的形式,然后再去解决适配等问题,但是我其实不太喜欢使用mask的,那样就会增加dc,虽然有人说一两个无所谓,但是能省为什么不省呢? 那下面我就自己采用相机分组渲染的方式实现吧!

1.添加一个新的分组,专门用来做引导

在这里插入图片描述

2.在主相机渲染是不勾选引导渲染这个组 在这里插入图片描述

3.做一个节点专门用来做引导,里面可以加上引导需要的一些手指引导动画,tip提示等,并把它隐藏。默认是不显示的吧,需要引导的是在显示

在这里插入图片描述

4.写一个引导管理类,把承载这个引导节点的整个父节点传过去,从里面在分别获取需要替换的节点和要扣出来高亮显示的节点 在这里插入图片描述

最后一个initGuideUI()的方法,是做的优化,避免下一个引导出现时,渲染还没完成,造成体验效果不好,主要就是在显示之前,先渲染。 在这里插入图片描述

5.核心逻辑 传入一个原始在UI上显示的节点即需要被扣出高亮的部分(originalNode),一个可能用到的需要替换的背景图路径(spriteName),一个位置(offset),和一个之前预加载渲染放入map中的key值(key),第一个参数为必传项,剩下的根据具体项目需求传入即可。 (1)把源节点放入当相机不会绘制的组中做隐藏,避免出现叠加显示的效果; (2)复制这个源节点,加入到这个引导节点上,并且同隐藏的节点位置一致,显示为扣出的效果; (3)把复制的节点归为相机绘制的组,显示出来并设置混合模式为 cc.macro.BlendFactor.ONE,在隐藏,在需要显示的地方显示即可;

在这里插入图片描述

6.点击做显示

在这里插入图片描述

7.效果