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

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

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

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

静态页面

倒计时

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

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

告警弹窗

创建一个与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周期中获取上面两个用到的节点:

ts 复制代码
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节点。

ts 复制代码
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 + ''
	}
}

最后效果如下:

相关推荐
圈圈的熊7 分钟前
vue2 和 vue3的区别
前端·javascript·vue.js
Kika写代码10 分钟前
【基于轻量型架构的WEB开发】课程 作业4 AOP
java·前端·架构
前端与小赵3 小时前
关于 AJAX 与 Promise
前端·ajax·okhttp·promise
啊·贤4 小时前
展开运算符 (...):这是 JavaScript 中的一个语法,用于将数组或对象展开到另一个数组或对象中。
前端·javascript·vue.js
硬汉嵌入式4 小时前
《安富莱嵌入式周报》第345期:开源蓝牙游戏手柄,USB3.0 HUB带电压电流测量,LCR电桥前端模拟,开源微型赛车,RF信号扫描仪,开源无线电收发器
前端·游戏·开源
NiNg_1_2344 小时前
前端 Flex 布局语法详解
前端·css·html
吉吉安4 小时前
前端实现选项多选效果(三层结构)
前端·vue.js·html5
青少儿编程课堂7 小时前
2024年3月电子学会Python等级考试试卷(四级)真题,包含答案
前端·javascript·python·电子学会·电子学会2024年3月真题·电子学会真题
始终奔跑在路上7 小时前
软件测试—HTML
前端·功能测试·html·集成测试·软件工程
Moment7 小时前
在 NodeJs 中如何通过子进程与 Golang 进行 IPC 通信 🙄🙄🙄
前端·后端·go