introduction
The implementation principle of the bush hiding effect in Cocos.
In game development, we often use perspective or translucency effects to express the effect of models being occluded .
This article will introduce how to achieve the hiding in grass effect in Honor of Kings in Cocos .
The source project of this article is obtained at the end of the article, friends can go there on their own.
How to achieve the effect of hiding in the grass
To achieve the effect of hiding in the grass in Honor of Kings in Cocos , the following points are required:
1. Model translucency
To achieve the translucency effect of the model , the following two conditions are required:
- The rendering queue where the 3D object is located is the " transparent queue ";
alphaThe color value of the 3D object is changed to 127 (translucent);
2. Trigger
The model's translucency is triggered when entering the grass , and the model's translucency is restored when leaving the grass . The following 2 events are required :Collider
-
onTriggerEnter: Triggered when otherColliderenters mine .Collider -
onTriggerExit: Triggered when otherColliderleaves mine .Collider
Without further ado, let’s give an example.
King chicken hiding in the grass
Next, we will implement the effect of hiding in the grass step by step in King of Glory .
1. Environment
Engine version : Cocos Creator 3.8.1
Programming language : TypeScript
2. Resource preparation
First, go to the " vegetable market " and buy two handfuls of " vegetables ". Friends who like to make models can make one by themselves in 3dmax . Let's first take a look at the effect of grass in 3dmax :
Then export the model from 3dmaxFBX , including and TGA, and then add it to the project:
Drag the model into the scene and you can see the snow-white grass:
To turn your grass back to green , you need to do the following:
- To modify the material
Effect, we use itbuiltin-unlit. - Then
Techniqueselecttransparentthe channel. - Set the texture.
After the processing is completed, the effect is as follows:
Since the grass is not dense enough , we copy and paste a few more:
If you want grass to generate a trigger event , you need to add it Collider. It is used directly here BoxCollider, simple and fast:
Check Is Triggerit to make it a trigger , otherwise you will not be able to enter the grass:
3. Write code
Create a new Tussockcomponent and drag it to the King Chicken.
@ccclass('Tussock')
export class Tussock extends Component {
start() {
}
update(deltaTime: number) {
}
}
start()Get the component in the method and CapsuleColliderlisten for onTriggerEnterthe onTriggerExitevent.
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);
}
Finally, get the material of the King Chicken and material.setProperty('albedo');set its transparency :
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));
}
4. Effect demonstration
If you don't work hard for a day, your whole body will feel uncomfortable. Please help forward the article. get out of class is over!
Conclusion
The source project of this article can be obtained by sending Tussock via private message .
Recently, the author was invited by Qilinzi (who has been deeply engaged in game engine and game development for 15 years , and every drop of practical information comes from commercial project practice) to join the Knowledge Planet as a guest . The planet is mainly used for:
- Tutor teaching
- Communication on learning issues
- Getting Started and Advanced for Newcomers
- Recruitment and employment opportunity sharing
- Collection of interview questions
- Interview experience sharing
In general, Planet has only one goal : to provide high-quality content and engage in learning . Interested friends can scan the code to learn more and support, I will wait for you inside .
I am a "Billion Dollar Programmer", a programmer with 8 years of experience in the game industry. In game development, I hope to be able to help you, and I hope that through you I can help everyone.
AD: You can click and search for the author's online mini-games "Snake Handheld Classic", "Gravity Maze Ball" and "Coloring Journey" by yourself.
To be honest, I want to like and watch ! Please share this article with other friends who you think need it. Thanks!
Recommended columns:
Do you know how Honor of Kings implements the skill range indicator?
8 years of experience in building Cocos independent game development framework step by step