cocos creator教程：框架 - 引导

【muzzik 教程】：框架 - 引导

之前策划给了一个新手引导的需求，有 40 多步，再用之前那种随便写写的方式肯定不行了，所以我就写了一个初步的引导框架，搭建好之后，删除步骤，插入步骤都能很快的进行，大概日产量 8-10 步左右且没有太多 bug，不算搭建时间一周就搞完了

实现功能

• 断点恢复

• 步骤跳转

• 步骤插入

• 步骤视图自加载

• 单次步骤生命周期控制

管理接口

• 运行

执行当前步骤的生命周期

• 步骤获取/设置

运行前设置步骤：只更新步骤数据而不执行步骤的生命周期
运行后设置步骤：更新步骤数据且执行步骤的生命周期
每次步骤切换中途的时间需要添加一个输入锁定的透明遮罩到最上层，防止误触

• 注册步骤

注册步骤的下标，可选参数链接步骤（上一个步骤），用于插入步骤的操作单元管理

• 步骤更新回调

在每次执行步骤之前执行，里面可以更新同步至服务器当前步骤以及获取当前步骤奖励数据

引导操作单元

引导操作单元是什么？它可以是一个加载 UI 的操作，也可以是一次更新视图的操作，我们每个引导步骤都有一个自己的操作列表，在切换步骤时执行步骤生命周期前初始化

操作单元接口

class guide_operate {
	// 重置：操作单元同时存在于上下两个步骤时执行
	reset?: ()=> void;

	// 加载：操作单元不存在于上个步骤时执行
	load: ()=> void;

	// 卸载：操作单元不存在于下个步骤时执行
	unload?: ()=> void;
}

我们可以把所有操作单元放在一个对象中，方便使用，例如

const operate_tab = {
	说明弹窗: new guide_operate({
		load: ()=> {...}
	}),
	手指动画: new guide_operate({
		load: ()=> {...}
	}),
	...
};

引导步骤

伪代码

class step_base {
	// 当前步骤所属场景：bundle.scene
	protected: _scene_s: string;
	// 当前步骤拥有操作
	protected: _operate_ss: (keyof operate_tab)[] = [];

	// 在执行当前步骤引导的同时会执行下一步预加载操作
	pre_load(): void {...}

	// 加载操作
	load(): void {...}

	// 卸载操作
	unload(): void {...}
}

切换引导步骤流程

1. 添加输入锁定遮罩

2. 获取下一步引导步骤执行预加载

3. 执行步骤切换回调（更新服务器数据，获取步骤奖励数据）

4. 切换至当前引导步骤场景

5. 如果切换了场景，加载当前步骤全部操作，未切换场景则卸载上一步不存在于当前步骤的操作，加载当前步骤缺少操作

引导遮罩的实现

• 多边形遮罩实现：https://forum.cocos.org/t/topic/132988?u=1226085293

• 遮罩点击区域屏蔽可参考 cc.BlockInputEvents 组件实现

触摸回调函数

private _event_input(event: cc.EventTouch | cc.EventMouse): void {
	// 触摸穿透（3.4 之前换成 this.node.eventProcessor.touchListener.setSwallowTouches(穿透状态);）
	event.preventSwallow = cc.Intersection2D.pointInPolygon(event.getUILocation(), 多边形碰撞坐标数组);
	// 拦截事件
	event.propagationStopped = !event.preventSwallow;
}