【CocosCreator】利用遮罩Mask实现单边开门效果

实现思路

首先新建一个新的遮罩节点(全部采用默认属性),将其大小设为门的大小,然后将其摆放到门所在的位置,如下图:

接下来,给该遮罩节点添加一个精灵图子节点,然后将门的精灵图放上去,调整大小和位置,使得锚点和遮罩节点的锚点重合,如下图:

此时,手动改变门精灵图节点 position.x 的值,就可以发现门在左右移动,而且超过了遮罩节点的边界部分被隐藏起来了,基本上是实现了开关门的效果了。

面板属性分析及定义

接下来要通过代码来控制门的开关,给遮罩节点添加一个脚本组件 door-control.ts ,然后思考,想要开关门,我们需要知道门关闭的时候的位置以及门开启的时候的位置,因此我们需要定义两个面板属性openPos和closePos,因为是保存的是门的坐标,所以这俩属性的类型应该是二维向量Vce2类型,然后就是我们要知道门此时的状态是开启还是关闭,因为我们可能会需要根据门的状态不同而执行不同的逻辑,所以还需要一个面板属性isClose,该属性为true的时候表示门处于关闭状态。

即我们需要在 door-control.ts 脚本中定义3个面板属性,如下:

ts 复制代码
@property({ type: CCBoolean, displayName: '是否已关门' })
private isClose: boolean = false

@property({ type: Vec2, displayName: '开门位置' })
private openPos: Vec2 = new Vec2(0, 0)

@property({ type: Vec2, displayName: '关门位置' })
private closePos: Vec2 = new Vec2(0, 0)

然后来到场景编辑器,点击选中遮罩节点,然后看向属性检查器,可以看到刚刚定义的面板属性出来了:

接下来,我们选中遮罩节点中的门精灵图,将其位置改成开门的状态,然后记录其位置,因为一开始我们是让遮罩和精灵图的锚点重合了,所以开门位置基本上都应该是 xy(0,0) 点,然后移动x轴,将其改变成关门状态,记录精灵图此时的位置,然后填写到遮罩节点的关门位置属性上,还是因为一开始的锚点重合,正常来说,关门也只有x轴的值改变,因此关门位置的值应该是 xy(x1,0) 点;

开关门逻辑

接下来回到脚本组件 door-control.ts 中,定义两个方法 closeDooropenDoor,分别控制关门和开门的逻辑。

当然,在此之前,我们还需要定义一个私有属性doorSprite,用来保存遮罩节点下的门精灵图节点,这一段逻辑写在组件的start生命周期中,如下:

ts 复制代码
start() {
	this.doorSprite = this.node.getComponentInChildren(Sprite)
}

注意,通过getComponentInChildren方法获取门精灵图节点的话,要求遮罩节点下只能存在一个门精灵图节点,如果是双开门的,需要其他获取逻辑,但是保存节点这一步是为了后面改变节点的位置,只要理解了这个就行了。

开关门的逻辑整体基本相同,都是通过cocosCreator内置的tween来改变节点的位置。

closeDoor

ts 复制代码
closeTheDoor() {
	tween(this.doorSprite.node)
		.to(0.5, { position: new Vec3(this.openPos.x, 0, 0) })
		.call(() => this.isClose = true)
		.start()
}

openDoor

ts 复制代码
openTheDoor() {
	tween(this.doorSprite.node)
		.to(0.5, { position: new Vec3(this.closePos.x, 0, 0) })
		.call(() => this.isClose = false)
		.start()
}

效果展示

为了看到效果,可以在start生命周期中,通过定时器根据当前门的开闭状态,每秒执行一次开门或者关门操作,如下:

ts 复制代码
this.schedule(() => {
	if (this.isClose) {
		this.openTheDoor()
	} else {
		this.closeTheDoor()
	}
}, 1)

实际效果如下:

扩展

上面实现的是单门往右边开(其实是左右开都行),然后还有一种门上下开的情况,这个时候我们要做的就是在tween中改变y轴的位置即可。

然后单门之后还有双门,单门就是获取一个门精灵图节点,然后改变其位置,双门就是获取两个,然后分别将其往左和往右移动即可,或者也可以看成是两个单门,方向不同即可。

相关推荐
爱分享的程序员16 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘21 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出23 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的23 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解26 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵29 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im29 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man30 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
浩浩测试一下1 小时前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构
西陵1 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构