【ココス100例】指して打つゲーム、まだ覚えていますか？

どこを指してもヒットします

導入

Cocos でのハースストーンのターゲット選択矢印効果の簡単な実装

2023 年 1 月 24 日午前 0:00 、 NetEase を代表とするBlizzard シリーズのゲームは中国での運営を正式に終了しました。

ハースストーンは筆者が4 年間プレイしてきたゲームで、その伝説とアリーナでの 12 回の勝利は私の心の中に鮮明に残っています。

サーバー停止からあっという間に1年が経ちましたが、近々ハースストーンが全国サーバーに復帰するという噂もあり、色々な思い出が甦ります。

私たちは技術者なので自分のことをどう表現したらよいかわかりませんが、同様の単純なターゲット選択を行って効果を確認してみましょう。

この記事では、ハースストーンのターゲット選択矢印エフェクトを Cocos に簡単に実装する方法を紹介します。

この記事のソースプロジェクトは、記事の最後にある原文を読むことで入手でき、友人が自分でそこに行くこともできます。

1. ターゲット選択効果

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

通常、ゲーム開発や戦闘などの場面では、プレイヤーが攻撃対象や移動先を操作・選択する必要があります。

効果をより明確に示すために、矢印の形式を使用します。

矢印は通常、開始点から始まり、終了点を指します。効果をより鮮やかにするために、この期間中にアニメーションを実行することもできます。

どのような知識ポイントがあるのでしょうか？

2. 要件分析

オリジナル版では矢印の変形をモデルで実現していますが、今回は簡易版を作成し、時間があれば3D版を実装する予定です。

ハースストーンのターゲット選択の矢印効果をココスで簡単に実装するには、次の知識ポイントが必要になる場合があります。

マウスのクリック位置を取得し、リアルタイムでマウスの位置を取得します。
矢印が追いかけて指す。
矢印の長さの制御。
矢印の本体部分に簡単なアニメーションを作成します。

ハースストーンのターゲット選択の矢印エフェクトを簡単に実装してみましょう。

3.ハースストーンのターゲット選択の矢印効果を簡単に実装

1. 環境

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

プログラミング言語: TypeScript

2. リソースの準備

インターネットから馴染みのあるリソースを検索します。単純に繋ぎ合わせるだけですが、矢印の長さは調節できるので2つに分けます。

矢印部分
体の部分

明確な構造

本体の各ボックスを並べるために、縦方向のレイアウトを追加します。

矢印の長さの制御に関しては、MaskコンポーネントとUITransformコンポーネントを使用して実装します。

長さから高さまでを変更します

一緒にコードを書きましょう。

3. コードを書く

まずコンポーネントを作成しHeartStoneArrow、ノードに追加します。

import {
    
     _decorator, Component, EventMouse, find, misc, Node, NodeEventType, UI, UITransform, v2, v3, Vec2, Vec3 } from 'cc';
const {
    
     ccclass, property } = _decorator;

@ccclass('HeartStoneArrow')
export class HeartStoneArrow extends Component {
    
    
    arrow: Node;
    body: Node;
    bodyTrans: UITransform;
    criticalValue: number;
}

次に、start()メソッド内で初期化します。

start() {
    
    
    const canvas = find("Canvas");
    this.arrow = canvas.getChildByPath("HeartStoneArrow/arrow");
    this.arrow.active = false;
    this.body = canvas.getChildByPath("HeartStoneArrow/body");
    this.bodyTrans = this.body.getComponent(UITransform);
    const len = this.body.children[0].children.length;
    const lastChildren = this.body.children[0].children[len - 1];
    this.criticalValue = lastChildren.position.y + lastChildren.getComponent(UITransform).height;
    let startPos = null;
}

マウスのクリック位置はNodeEventType.MOUSE_DOWNイベントを通じて取得されますgetUILocation()。

canvas.on(NodeEventType.MOUSE_DOWN, (event: EventMouse) => {
    
    
    const pos = event.getUILocation();
    startPos = v3(pos.x, pos.y, 0);
    this.body.worldPosition = startPos;
    this.arrow.worldPosition = startPos;
}, this);

効果は次のとおりです。

クリックした場所に移動します

次に、イベント内の矢印の位置と方向NodeEventType.MOUSE_DOWNを更新し、本体の長さと方向を更新します。

canvas.on(NodeEventType.MOUSE_MOVE, (event: EventMouse) => {
    
    
    if (startPos != null) {
    
    
        if (!this.arrow.active) {
    
    
            this.arrow.active = true;
        }
        const pos = event.getUILocation();
        this.arrow.worldPosition = v3(pos.x, pos.y, 0);
        this.body.angle = this.calculateAngle(v2(0, 1), v2(pos.x - startPos.x, pos.y - startPos.y))
        this.arrow.angle = this.body.angle;
        this.bodyTrans.height = (Vec3.distance(this.arrow.worldPosition, startPos) - 50) / this.node.scale.y;
    }
}, this);

方向の計算には、2 つのベクトルの間の角度を見つけることが含まれます。

calculateAngle(vectorA: Vec2, vectorB: Vec2) {
    
    
    // 使用 Math.atan2 获取带方向的角度（弧度）
    const angleRad = Math.atan2(vectorB.y, vectorB.x) - Math.atan2(vectorA.y, vectorA.x);
    // 将弧度转换为角度
    const degrees = misc.radiansToDegrees(angleRad);
    // 确保角度在 [0, 360) 范围内
    return (degrees + 360) % 360;
}

矢印の長さは、Maskコンポーネントが配置されているノードのコンポーネントの高さを変更することによって変更されUITransform、長さはVec3.distance計算を使用して計算されます。

this.bodyTrans.height = (Vec3.distance(this.arrow.worldPosition, startPos) - 50) / this.node.scale.y;

効果は次のとおりです。

回転、望遠鏡

最後に、の矢印の単純なアニメーション効果updateを実装し、常にy 座標を更新してループします。

protected update(dt: number): void {
    
    
    for (let i = 0; i < this.body.children[0].children.length; i++) {
    
    
        this.body.children[0].children[i].position = this.body.children[0].children[i].position.add3f(0, 10, 0);
        if (this.body.children[0].children[i].position.y >= this.criticalValue) {
    
    
            this.body.children[0].children[i].position = v3();
        }
    }
}