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

【CocosCreator】倒计时弹窗及告警弹窗的完成

然后倒计时完毕后，会在页面中间呈现一个警示弹窗：

【CocosCreator】倒计时弹窗及告警弹窗的完成

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

静态页面

倒计时

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

【CocosCreator】倒计时弹窗及告警弹窗的完成

再然后，在countdown节点下创立两个文本节点，别离命名为 desc-text 和 second，一个“秒后杀手呈现”这几个字，一个用于显现秒数，然后调整一下节点方位，字体样式之后，得到下图：

【CocosCreator】倒计时弹窗及告警弹窗的完成

告警弹窗

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

【CocosCreator】倒计时弹窗及告警弹窗的完成

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

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

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

【CocosCreator】倒计时弹窗及告警弹窗的完成

然后将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 + ''
	}
}

最终效果如下：

【CocosCreator】倒计时弹窗及告警弹窗的完成