你知道LOL中点地面移动是怎么实现的吗？

在这里插入图片描述

引言

Cocos中点地面移动的实例。

在游戏开发中，我们经常会遇到通过点击地面控制玩家移动到指定点的需求。

本文将介绍一下如何在Cocos中实现类似LOL的点地面移动效果。

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

点地面移动知识点

在这里插入图片描述

要在Cocos中实现类似LOL的点地面移动效果，有以下2个知识点：

1.屏幕空间坐标转换为射线

在游戏中，当玩家点击屏幕上的某个点时，你可能希望知道从相机发射出的射线穿过屏幕上的那个点，以便进行进一步的交互或检测。

因此我们需要将一个屏幕空间（左上角为原点）坐标转换为射线。

在Cocos中我们需要用到的API为Camera.screenPointToRay。

查API文档能解决80%的问题

2.通过射线检测所有的碰撞盒

射线检测是一种常用的技术，用于判断一条射线与游戏场景中的物体是否相交，从而实现例如点击检测、射线投射等功能。

因此我们需要检测所有的碰撞盒，并记录所有被检测到的结果。

在Cocos中我们通过PhysicsSystem.instance.raycast(ray)进行检测和PhysicsSystem.instance.raycastResults 访问结果。

如果你查不到请告诉Cocos官方

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

点地面移动实例

接下来我们一步一步来实现类似LOL的点地面移动效果。

1.环境

引擎版本：Cocos Creator 3.8.1

编程语言：TypeScript

2.资源准备

我们还是直接借用一下Cocos商城上麒麟子的免费资源“KylinsEasyController”创建项目。

再次站在巨人的肩膀上

然后自己创建一个圆锥体用于指示点击地点(节目组还是一如既往地扣)。

一个字扣

通过动画编辑器做个简单的上下移动的效果。

上下上下左右左右BABA

3.编写代码

新建一个TouchMove组件，并且拖到Canvas上。

@ccclass('TouchMove')
export class TouchMove extends Component {
    
    
    @property(Node)
    pointerNode: Node;
}

在start()方法中通过this.node.on监听NodeEventType.MOUSE_DOWN事件。

start() {
    
    
    this.node.on(NodeEventType.MOUSE_DOWN, (event: EventMouse) => {
    
    
    }, this);
}

然后通过下面的方法得到点击的物体。

event.getLocation() 获取点击的屏幕坐标。
camera.screenPointToRay(uiPos.x, uiPos.y, ray) 通过屏幕坐标产生射线。
PhysicsSystem.instance.raycast(ray) 进行射线碰撞检测并记录结果。
PhysicsSystem.instance.raycastResults 获取射线检测结果，通过名字或者其他信息得到想要的物体。

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 !');
}

最后通过下面的方法让指标出现和角色移动。

item.hitPoint 获取点击的坐标。
.active = true和.setWorldPosition(item.hitPoint)显示并设置指针坐标。
player.lookAt 设置角色朝向。
skeletalAnimation.crossFade("anim_rig_run", 0.1) 通过skeletalAnimation组件播放动画。
tween(player) 通过tween动画实现角色移动。

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();