introduction
Example of mid-point ground movement in Cocos.
In game development, we often encounter the need to control the player to move to a designated point by clicking on the ground .
This article will introduce how to achieve point and ground movement effects similar to LOL in Cocos .
The source project of this article is obtained at the end of the article, friends can go there on their own.
Click on the ground to move knowledge points
To achieve point ground movement effects similar to LOL in Cocos , there are the following two knowledge points:
1. Convert screen space coordinates to rays
In a game, when the player clicks on a point on the screen, you may want to know which point on the screen the ray emitted from the camera passes through , for further interaction or detection .
So we need to convert a screen space (the upper left corner is the origin) coordinates into a ray .
The API we need to use in Cocos is .Camera.screenPointToRay
2. Detect all collision boxes through rays
Ray detection is a commonly used technology, used to determine whether a ray intersects with objects in the game scene , thereby achieving functions such as click detection and ray casting .
Therefore we need to detect all collision boxes and record all detected results .
In Cocos we PhysicsSystem.instance.raycast(ray)perform detection and PhysicsSystem.instance.raycastResultsaccess the results.
Without further ado, let’s give an example.
Point ground movement example
Next, we will implement the point ground movement effect similar to LOL step by step .
1. Environment
Engine version : Cocos Creator 3.8.1
Programming language : TypeScript
2. Resource preparation
Let's just borrow the free resource " KylinsEasyController " from Kylinzi on the Cocos mall to create a project.
Then create a cone yourself to indicate the click location ( the program group is still buckled as always ).
Use the animation editor to create a simple up and down movement effect.
3. Write code
Create a new TouchMovecomponent and drag it to the Canvas .
@ccclass('TouchMove')
export class TouchMove extends Component {
@property(Node)
pointerNode: Node;
}
start()By this.node.onlistening to events in the method NodeEventType.MOUSE_DOWN.
start() {
this.node.on(NodeEventType.MOUSE_DOWN, (event: EventMouse) => {
}, this);
}
Then get the clicked object through the following method .
event.getLocation()Get the screen coordinates of the click.camera.screenPointToRay(uiPos.x, uiPos.y, ray)Generate rays via screen coordinates.PhysicsSystem.instance.raycast(ray)Perform ray collision detection and record the results.PhysicsSystem.instance.raycastResultsGet the ray detection results and get the desired object by name or other information.
var uiPos = event.getLocation();
var ray = new geometry.Ray();
camera.screenPointToRay(uiPos.x, uiPos.y, ray);
if (PhysicsSystem.instance.raycast(ray)) {
const raycastResults = PhysicsSystem.instance.raycastResults;
for (let i = 0; i < raycastResults.length; i++) {
const item = raycastResults[i];
if (item.collider.node.name == "Plane") {
}
}
} else {
console.log('raycast does not hit the target node !');
}
Finally, use the following method to make the indicator appear and the character move .
item.hitPointGet the coordinates of the click..active = trueand.setWorldPosition(item.hitPoint)display and set pointer coordinates.player.lookAtSet the character's orientation.skeletalAnimation.crossFade("anim_rig_run", 0.1)Play the animation throughskeletalAnimationthe component.tween(player)Realize character movement through tween animation.
this.pointerNode.active = true;
this.pointerNode.setWorldPosition(item.hitPoint);
player.lookAt(new Vec3(player.worldPosition.x * 2 - item.hitPoint.x, player.position.y, player.worldPosition.z * 2 - item.hitPoint.z));
skeletalAnimation.crossFade("anim_rig_run", 0.1);
let duration = Vec3.distance(player.worldPosition, item.hitPoint) * speed;
if (playerTween) {
playerTween.stop();
}
playerTween = tween(player);
playerTween.to(duration, {
worldPosition: item.hitPoint }).call(() => {
skeletalAnimation.crossFade("anim_rig_idle_1", 0.1);
this.pointerNode.active = false;
}).start();
4. Effect demonstration
That concludes today's program. Please help forward the article. get out of class is over!
Conclusion
The source project of this article can be obtained by sending TouchMove via private message .
For more practical source codes , you can scan the code or read the original text . Payment is not only the acquisition of knowledge , but also the support and recognition of the author . Thank you!
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