CocosGameFrameWork/assets/Script/Game/MyApp/GameScene/TouchSkill.ts

import { _decorator, animation, Animation, Component, EventTouch, instantiate, Label, Node, Sprite, UITransform, Vec2, Vec3 } from 'cc';
import { GameInfo } from '../../../GameInfo';
import { resMgr } from '../../../Frames/ResourcesMgr';
const { ccclass, property } = _decorator;

@ccclass('TouchSkill')
export class TouchSkill extends Component {
    //skill放置范围
    private _skillRange: Node = null;
    private _dragNode: Node = null; // 拖拽节点  
    private _isDragging: boolean = false; // 拖拽状态   
    //高亮索引
    private _highLightIdx: number = 0;
    //高亮高度
    private _hight: number = 82;
    //skill名字
    private _skillName: string = null;
    //钻石拥有量
    private _ownDiamondCount: Node = null;

    protected onLoad(): void {
        this._skillRange = this.node.parent.parent.getChildByName("Skill_Range");
        this._ownDiamondCount = this.node.getChildByName("_ownNumber");
        this._hight = this._skillRange.getChildByName("Node").getComponent(UITransform).height;

        // 创建拖拽节点  
        this._dragNode = instantiate(resMgr.getPrefab("DragNode"));
        this._dragNode.active = false; // 初始状态隐藏  
        this._dragNode.parent = this._skillRange;
    }

    protected start(): void {
        this._skillName = GameInfo.Instance.getSkill();
        this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this); // 处理触摸取消事件  
    }

    private onTouchStart(event: EventTouch) {
        //拥有的钻石小于需要的，退出
        if (GameInfo.Instance.getOwnDiamondNum() < GameInfo.Instance.getNeedDiamondNum()) {
            return;
        }
        if (this._isDragging) return;

        const pos = event.getUILocation();
        this._dragNode.getComponent(Sprite).spriteFrame = resMgr.getSpriteFrame(this._skillName);
        this._dragNode.active = true;
        this._isDragging = true;
        this.setDragNodePosition(pos);
    }

    private onTouchMove(event: EventTouch) {
        if (!this._isDragging) return;
        if (this._isDragging) {
            this.setDragNodePosition(event.getUILocation());
        } else {
            return;
        }
        for (const element of this._skillRange.children) {
            const box = element.getComponent(UITransform).getBoundingBoxToWorld();
            if (box.contains(event.getUILocation())) {
                element.active = true;
            } else {
                element.active = false;
            }
        }
    }

    private onTouchEnd(event: EventTouch) {
        if (!this._isDragging) return;
        const pos: Vec3 = new Vec3(event.getUILocation().x, event.getUILocation().y, 0)
        this.stopDragging(pos);
    }

    //设置拖拽物体的坐标  
    private setDragNodePosition(pos: Vec2) {
        this._dragNode.setWorldPosition(pos.x, pos.y, 0);
    }

    private stopDragging(pos: Vec3) {
        this._isDragging = false;
        for (const element of this._skillRange.children) {
            if (element.name !== "Roles") {
                const box = element.getComponent(UITransform).getBoundingBoxToWorld();
                if (box.contains(new Vec2(pos.x, pos.y))) {
                    this._highLightIdx = element.getSiblingIndex();
                    if (this._highLightIdx >= 6) {
                        this._hideNode();
                        return;
                    }
                    break;
                }
            }
        }

        const skill = instantiate(resMgr.getPrefab("Skill"));
        skill.parent = this._skillRange.getChildByName("Roles");
        const y = 180 + (this._highLightIdx + 1) * this._hight - this._hight / 2;
        const skillPos: Vec3 = new Vec3(250, y, pos.z);
        skill.setWorldPosition(skillPos);
        skill.getComponent(Animation).play();
        skill.getComponent(Animation).once(Animation.EventType.FINISHED, () => {
            skill.destroy();
        })

        //使用了技能则消耗钻石
        this._onReduce();

        this._hideNode();
    }

    //减少拥有的钻石
    private _onReduce() {
        let own = GameInfo.Instance.getOwnDiamondNum();
        let need = GameInfo.Instance.getNeedDiamondNum();
        own -= need;
        GameInfo.Instance.setOwnDiamondNum(own);
        this._ownDiamondCount.getComponent(Label).string = String(own);
    }

    //相关节点隐藏
    private _hideNode() {
        this._dragNode.active = false;
        this._dragNode.getComponent(Sprite).spriteFrame = null;
        for (const element of this._skillRange.children) {
            if (element.name !== "Roles") {
                element.active = false;
            }
        }
    }

    protected onDestroy(): void {
        this.node.off(Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.node.off(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.node.off(Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.node.off(Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);
    }
}