LOL で中間点の地面の動きがどのように実現されるかご存知ですか?

ここに画像の説明を挿入します

導入

ココスにおける中間点の地面の動きの例。

ゲーム開発では、地面をクリックして指定された点に移動するようにプレーヤーを制御する必要があることがよくあります。

この記事では、ココスでLOLと同様のポイントおよび地面の動きの効果を実現する方法を紹介します。

この記事のソースプロジェクトは記事の最後で入手できます。友達は自分でそこに行くことができます。

地面をクリックして知識ポイントを移動します

ここに画像の説明を挿入します

CocosでLOLと同様のポイント地面移動効果を実現するには、次の2 つの知識ポイントがあります。

1. スクリーン空間座標をレイに変換する

ゲームで、プレーヤーが画面上の点をクリックしたとき、さらなるインタラクションや検出のために、カメラから放射された光線が画面上のどの点を通過するかを知りたい場合があります。

したがって、画面空間 (左上隅が原点) の座標をray に変換する必要があります。

Cocosで使用する必要があるAPI はですCamera.screenPointToRay。

API ドキュメントを確認すると問題の 80% が解決できます

2. レイを通してすべてのコリジョンボックスを検出する

光線検出は一般的に使用されるテクノロジであり、光線がゲームシーン内のオブジェクトと交差するかどうかを判断するために使用され、それによってクリック検出やレイキャスティングなどの機能が実現されます。

したがって、すべての衝突ボックスを検出し、検出されたすべての結果を記録する必要があります。

Cocosでは検出を実行しPhysicsSystem.instance.raycast(ray)、PhysicsSystem.instance.raycastResults結果にアクセスします。

見つからない場合はココス公式にご連絡ください

早速、例を挙げてみましょう。

点地盤の動きの例

次に、LOLと同様のポイント地面移動エフェクトを段階的に実装していきます。

1. 環境

エンジンバージョン：Cocos Creator 3.8.1

プログラミング言語: TypeScript

2. リソースの準備

ココスモールのKylinziから無料リソース「KylinsEasyController 」を借りてプロジェクトを作成してみましょう。

再び巨人の肩の上に立つ

次に、クリック位置を示す円錐を自分で作成します(プログラムグループはいつものように座屈したままです)。

一言バックル

アニメーションエディタを使用して、単純な上下の動きのエフェクトを作成します。

上、下、上、下、左、右、左、右、ババ

3. コードを書く

新しいTouchMoveコンポーネントを作成し、それをCanvasにドラッグします。

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

メソッド内のイベントをリッスンするstart()ことによって。this.node.onNodeEventType.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)トゥイーンアニメーションによるキャラクターの動きを実現します。

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