【CocosCreator】倒计时弹窗及告警弹窗的实现

游戏中，杀手出现前会有一个读秒倒计时提示：

然后倒计时结束后，会在页面中间出现一个警示弹窗：

然后过2s之后，弹窗就会自动消失，接着杀手出现。

静态页面

倒计时

因为倒计时节点独立于其他节点（即和其他节点没啥大关系），所以将其创建在页面根节点下（页面根节点相对自己而言的，比如说我的页面根节点是自己创建的一个名为 play-page 的空节点，正常来说页面根节点是一个 canvas 节点），命名为 countdown，该节点是一个精灵图组件节点，创建好之后，直接将倒计时弹出框拉到节点的SpriteFrame属性上即可：

再然后，在countdown节点下创建两个文本节点，分别命名为 desc-text 和 second，一个"秒后杀手出现"这几个字，一个用于显示秒数，然后调整一下节点位置，字体样式之后，得到下图：

告警弹窗

创建一个与countdown节点同级的空节点，命名为warning，然后将其锚点改为 anchor(0,0)，尺寸改为页面尺寸，比如说我的页面尺寸为 390x844 ，然后在该节点下新建一个 warning-mask 单色精灵图节点，然后同样将其锚点改为 anchor(0,0)，然后位置改为 xy(0,0)，这样两个节点的左下角就重合在一起了，将 warning-mask 节点的尺寸也改为页面尺寸，颜色改为黑色，透明度改为60%左右，这样就完成了一个遮罩层：

为了防止遮罩层出现的时候，用户误操作点击到遮罩下面的元素，还需要给遮罩层添加一个组件 BlockInputEvents ，添加方法为：

1. 选中warning节点；
2. 点击右侧属性检查器面板下面的添加组件按钮；
3. 选中Event类型下的BlockInputEvents；

然后在warning节点下再新增一个精灵图节点 killer-appear ，将"杀手出现"的素材拖进去，调整位置：

然后将warning节点隐藏，至此，静态页面完成。

脚本组件

新建一个 countdown-control.ts 脚本组件，将其挂载到countdown节点。

在脚本中，我们需要定义3个属性：

1. second：倒计时的秒数；
2. secondNode：秒数文本节点，用来改变页面上显示的秒数；
3. warningNode：告警弹窗节点；

然后在start周期中获取上面两个用到的节点：

start() {
	this.secondNode = this.node.getChildByName('second')
	this.warningNode = this.node.parent.getChildByName('warning')
	this.schedule(this.countdown, 1)
}

这里还顺便开了一个一秒执行一次的计时器，其实实际应用中是不需要在start中开启的，这里是为了演示。

然后到countdown方法的实现，这个方法会判断second属性的值是否为0，也即是倒计时是否结束了，如果不为0，则自减，然后改变文本节点的值，如果为0了，则将当前节点隐藏，将warning节点显示出来，并且取消start中开启的定时器，然后再新开一个定时器，用来在若干秒后隐藏warning节点。

countdown() {
	if (this.second === 0) {
		this.node.active = false
		this.warningNode.active = true
		this.unschedule(this.countdown)
		setTimeout(() => {
			this.warningNode.active = false
		}, 1500)
	} else {
		this.second--
		const s = this.secondNode.getComponent(Label)
		s.string = this.second + ''
	}
}

最后效果如下：