在王者荣耀中脸探草丛的正确姿势是什么？

在这里插入图片描述

引言

Cocos中躲草丛效果的实现原理。

在游戏开发中，我们经常用透视或者半透明效果去表现模型被遮挡的效果。

本文将介绍一下如何在Cocos中实现王者荣耀中的躲草丛效果。

本文源工程在文末获取，小伙伴们自行前往。

躲草丛效果的实现原理

在这里插入图片描述

要在Cocos中实现王者荣耀中的躲草丛效果，需要以下几个点：

1.模型半透明

要实现模型的半透明效果，需要下面2个条件：

3D物体所在的渲染队列为”透明队列”;
3D物体的颜色alpha值改成127(半透明);

好的收到

2.触发

进入草丛的时候触发模型半透明，离开草丛时恢复模型半透明。需要下面Collider的2个事件：

onTriggerEnter:当其他Collider进入我的Collider时触发。
onTriggerExit:当其他Collider离开我的Collider时触发。

好的好的

话不多说，一起来做个实例。

王者小鸡躲草丛

接下来我们一步一步来实现王者荣耀中的躲草丛效果。

1.环境

引擎版本：Cocos Creator 3.8.1

编程语言：TypeScript

2.资源准备

首先去“菜市场”买两把”菜”，有喜欢做模型的小伙伴可以自己在3dmax里面做一个，我们先看下草在3dmax中的效果：

节目组终于有点良心了

然后把模型从3dmax导出一下，包括FBX和TGA，然后添加到工程：

不懂没关系，拖就完了

把模型拖到场景里面去，可以看到雪白的草：

塑料一样

想要把草恢复成绿色需要以下处理：

修改材质的Effect，我们用builtin-unlit。
然后Technique选择transparent通道。
设置贴图。

我数123木头人

处理完成后效果如下：

简单展示，追求极致的小伙伴可以调一下

由于草不够茂密，我们复制粘贴多几个：

要是我的头发也能这么Ctrl+C+V那该多好

想要草可以产生触发事件，需要添加一下Collider，这里直接用BoxCollider，简单快捷：

你可以把这个理解成结界

勾选Is Trigger使其变成触发器，否者会进不去草丛：

划重点！！！

3.编写代码

新建一个Tussock组件，并且拖到王者小鸡身上。

@ccclass('Tussock')
export class Tussock extends Component {start() {}update(deltaTime: number) {}
}

在start()方法中获取CapsuleCollider组件并且监听onTriggerEnter和onTriggerExit事件。

start() {var collider = this.getComponent(CapsuleCollider);collider.on('onTriggerEnter', (event: ICollisionEvent) => {if (event.otherCollider.node.name == "tussock") {this.setModelTranslucency(true);}}, this);collider.on('onTriggerExit', (event: ICollisionEvent) => {if (event.otherCollider.node.name == "tussock") {this.setModelTranslucency(false);}}, this);
}

最后获取王者小鸡的材质，通过material.setProperty('albedo');设置一下他的透明度：

setModelTranslucency(flag: boolean) {const material = this.node.getChildByName("rooster_man").getComponent(RenderableComponent)?.sharedMaterials[0]; // 0 表示第一个材质，根据您的需求修改material.setProperty('albedo', new Color(255, 255, 255, flag ? 127 : 255));
}