car-game/assets/script/game/checkpoint/view/CheckpointGuideViewComp.ts

import { Camera, Tween, Vec3, _decorator, director, tween } from "cc";
import { ecs } from "../../../../../extensions/oops-plugin-framework/assets/libs/ecs/ECS";
import { CCComp } from "../../../../../extensions/oops-plugin-framework/assets/module/common/CCComp";
import { smc } from "../../common/SingletonModuleComp";
import { Puppet } from "../../puppet/puppet";
import { oops } from "../../../../../extensions/oops-plugin-framework/assets/core/Oops";
import { UIID } from "../../common/config/GameUIConfig";
import { GameEvent } from "../../common/config/GameEvent";



const { ccclass, property } = _decorator;

/** 角色信息界面 */
@ccclass('CheckpointGuideViewComp')
@ecs.register('CheckpointGuideView', false)
export class CheckpointGuideViewComp extends CCComp {

    private btn_gesture
    private step = 0;

    @property(Camera)
    public mainCamera: Camera = null; // 主摄像机

    onAdded(args: any) {
        console.log(args);
        this.on(GameEvent.PuppetClick, this.CheckGuide, this)
        const cameras = director.getScene().getComponentsInChildren(Camera);
        this.mainCamera = cameras.find(camera => camera.node.name === 'MainCamera');
    }

    onLoad() {
        this.btn_gesture = this.node.getChildByPath("btn_gesture")
        this.btn_gesture.active = false
        this.step++
        this.showGuideStep(this.step)
    }

    runAnimation() {
        let startPosition = this.btn_gesture.position.clone(); // 初始位置
        let endPosition = new Vec3(startPosition.x, startPosition.y + 10, startPosition.z); // 目标位置，这里以向上移动100个单位为例

        Tween.stopAllByTarget(this.btn_gesture); // 停止该节点上的所有其他Tween
        // 创建一个循环的上下移动动画
        tween(this.btn_gesture)
            .to(1, { position: endPosition }, { easing: 'sineInOut' })
            .to(1, { position: startPosition }, { easing: 'sineInOut' })
            .union()
            .repeatForever()
            .start();
    }


    showGuideStep(index: number) {
        if (this.step <= 3) {
            const checkpoint = smc.initialize.account.checkpoint
            const grid = checkpoint.CheckpointModel.grids[0][index - 1]
            if (grid) {
                const puppet = checkpoint.CheckpointModel.cells[0][index - 1] as Puppet
                if (puppet) {
                    const pos = grid.GridView.node.position.clone()
                    this.showGesture(pos)
                } else {
                    this.step++
                    this.showGuideStep(this.step);
                }
            }
        } else {
            // 引导完成后隐藏引导层
            oops.gui.remove(UIID.Guide)
        }

    }

    CheckGuide(event: string, args: any): void {
        switch (event) {
            case GameEvent.PuppetClick:
                const [x, y] = args
                if (y + 1 === this.step) {
                    this.step++
                    this.showGuideStep(this.step)
                }
                break;

            default:
                break;
        }

    }

    showGesture(position: Vec3): void {
        this.btn_gesture.active = true
        const worldPosition = position; // 获取3D目标的世界坐标
        const screenPosition = new Vec3();
        this.mainCamera.convertToUINode(worldPosition, this.btn_gesture.parent, screenPosition); // 转换坐标
        this.btn_gesture.setPosition(screenPosition.x, screenPosition.y, 0); // 更新手势Sprite位置
        this.runAnimation()
    }


    reset() {
        this.off(GameEvent.PuppetClick)
        this.node.destroy();
    }
}