introduction
Simple example of Tween in Cocos.
In game development, we often use Tween to implement some simple animations , such as rotation, displacement, etc.
This article will introduce how to achieve the effect of Draven 's skills flying and catching axes in LOL .
The source project of this article is obtained at the end of the article, friends can go there on their own.
Basic concepts of Tween
Tween (interpolated animation) is a mechanism for creating smooth animation effects .
It allows you to interpolate between two numerical values , thereby creating a transition effect between them .
Tween provides a simple and flexible way to ease targets.
Without further ado, let’s give an example.
Draven takes the ax
Next, we will implement step by step the effects of Draven 's skills of flying axes and catching axes in LOL .
1. Environment
Engine version : Cocos Creator 3.8.1
Programming language : TypeScript
2. Resource preparation
First create 2 Cubes and press them into long strips . Let's use them as the two axes of Chicken Draven (this program team is too poor ).
Then create two nodes, left and right , for the Draven Chicken , and then hang the Cube on it. Be careful to add a node in the middle so that the rotation of the Cube , which is the axe, is not affected.
Add our Draven script and drag up the two nodes axe1 and axe2 we need to control .
3. Write code
First by tween().bymaking the angle of the ax increase by 360, then by repeatForever()implementing the loop increase, and finally by start()starting the animation.
for (let i = 0; i < this.axes.length; i++) {
tween(this.axes[i].children[0]).by(0.25, {
angle: 360 }).repeatForever().start();
}
This creates the effect of the ax rotating .
Then by input.on(Input.EventType.KEY_DOWN, event => {})listening to the keyboard events , the ax will fly when the space is pressed.
input.on(Input.EventType.KEY_DOWN, event => {
if (event.keyCode == KeyCode.SPACE) {
}
}
Then simply calculate a few coordinates:
- position1 : Fixed the coordinates in front of the chicken. In fact, the game will be the position of the target enemy . Since there are no enemies in the example, those who are interested can implement it by themselves .
- position2 : The high point where the ax rebounds , that is, the highest point of the parabolic effect.
- position3 : The final landing point where the ax bounces back , here is a random protagonist position or fixed positions on the left and right sides.
let position1 = this.player.forward.normalize().multiplyScalar(-2).add3f(0, 0.5, 0).add(this.player.worldPosition);
let position2 = this.player.forward.normalize().multiplyScalar(-1).add3f(0, 4, 0).add(this.player.worldPosition);
let rand = Math.floor(Math.random() * 3) - 1;
let position3 = this.player.right.normalize().multiplyScalar(rand).add(this.player.worldPosition);
let parent = this.axes[0].parent;
let position = this.axes[0].worldPosition.clone();
this.axes[0].parent = this.player.parent;
this.axes[0].worldPosition = position;
this.axes[0].lookAt(position1);
this.axes[0].rotate(Quat.fromEuler(new Quat(), 0, 90, 0));
Animation 1 , let the ax fly worldPositionfrom the current position to the target position in 0.3 seconds by modifying the world coordinates position1.
tween(this.axes[0])
.to(0.3, {
worldPosition: position1
})
Animation 2 : Calculate the coordinates of the ax through the callback moments of 贝塞尔曲线坐标函数and , and set them to form a parabolic animation.tweenonUpdate
//计算贝塞尔曲线坐标函数
let twoBezier = (t: number, p1: Vec3, cp: Vec3, p2: Vec3) => {
let x = (1 - t) * (1 - t) * p1.x + 2 * t * (1 - t) * cp.x + t * t * p2.x;
let y = (1 - t) * (1 - t) * p1.y + 2 * t * (1 - t) * cp.y + t * t * p2.y;
let z = (1 - t) * (1 - t) * p1.z + 2 * t * (1 - t) * cp.z + t * t * p2.z;
return new Vec3(x, y, z);
};
tween(this.axes[0].worldPosition)
.to(1, position3, {
onUpdate: (target: Vec3, ratio: number) => {
this.axes[0].worldPosition = twoBezier(ratio, position1, position2, position3);
}
})
Let the ax reset by .call()adding a play completion callback before the pass starts the animation..start()
.call(() => {
this.axes[0].parent = parent;
this.axes[0].position = v3();
this.axes[0].setRotationFromEuler(new Vec3(0, 90, 0));
this.hideSkillRangeIndicator();
})
.start();
For the implementation of the indicator circle for the ax landing, you can read my recommended article " Skill Range Indicator ". There is a link at the end of the article, so I won't go into too much explanation here.
4.Result presentation
Conclusion
The source project of this article can be obtained by sending Draven a 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 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