主相机绑定小地图

 

1. 资源初始化：在类中通过 @property 装饰器定义主相机、小地图相机、小地图精灵等资源属性，便于在编辑器中赋值。在 start 方法里，当确认这些资源存在后，创建渲染纹理并设置其大小，将渲染纹理与小地图相机关联，再创建精灵帧并把渲染纹理应用到精灵帧上，最后将精灵帧设置给小地图精灵，完成小地图显示的初始化配置。
2. 位置跟随：在 update 方法中，不断检查主相机和小地图相机是否存在，若存在则获取主相机位置，让小地图相机的 x、y 坐标跟随主相机，同时保持小地图相机的 z 轴坐标不变，以维持稳定视角，实现小地图相机对主相机位置的实时跟随。
3. 交互功能处理：定义 calculateAndSetOrthoHeight 方法，用于实现小地图的缩放功能。该方法先获取小地图相机当前的正交高度，依据鼠标滚轮滚动方向计算新的正交高度，并对新高度进行范围检查，保证其在合理区间内才更新小地图相机的正交高度。通过 onMouseWheel 方法监听鼠标滚轮事件，获取滚轮滚动值并调用 calculateAndSetOrthoHeight 方法，从而实现用户通过鼠标滚轮操作来缩放小地图的交互功能。

import { _decorator, Component, Camera, Node, RenderTexture, SpriteFrame, Sprite, Vec3, Canvas, EventMouse, Vec2 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('MainCameraBindMiniController')
export class MainCameraController extends Component {
    // 主摄像机
    @property(Camera)
    mainCamera: Camera | null = null;

    // 小地图摄像机
    @property(Camera)
    miniMapCamera: Camera | null = null;

    // 小地图展示的精灵
    @property(Sprite)
    miniMapSprite: Sprite | null = null;

    // 小地图的大小
    private miniMapSize = { width: 200, height: 200 };

    // 缩放速度
    @property
    zoomSpeed: number = 0.02;

    // 移动速度因子
    @property
    moveSpeedFactor: number = 1;

    // 小地图的渲染纹理
    private renderTexture: RenderTexture | null = null;

    start() {
        if (this.mainCamera && this.miniMapCamera && this.miniMapSprite) {
            // 创建一个渲染纹理
            this.renderTexture = new RenderTexture();
            this.renderTexture.reset({
                width: this.miniMapSize.width,
                height: this.miniMapSize.height
            });

            // 将渲染纹理设置给小地图摄像机
            this.miniMapCamera.targetTexture = this.renderTexture;

            // 创建一个精灵帧，并将渲染纹理应用到精灵帧
            const spriteFrame = new SpriteFrame();
            spriteFrame.texture = this.renderTexture;

            // 将精灵帧设置到小地图的精灵上
            this.miniMapSprite.spriteFrame = spriteFrame;

            // 小地图反转（如果需要）
            this.miniMapCamera.node.scale = new Vec3(1, 1, 1);
        }
    }

    update(deltaTime: number) {
        if (this.mainCamera && this.miniMapCamera) {
            // 获取主摄像机的位置
            const mainCameraPos = this.mainCamera.node.position;

            // 让小地图摄像机的位置跟随主摄像机
            // 小地图摄像机的 Z 轴保持不变，确保它的视角稳定
            this.miniMapCamera.node.setPosition(new Vec3(mainCameraPos.x, mainCameraPos.y, this.miniMapCamera.node.position.z));
        }
    }

    calculateAndSetOrthoHeight(move: Vec3) {
        if (this.miniMapCamera) {
            // 获取摄像机的正交高度
            let currentOrthoHeight = this.miniMapCamera.orthoHeight;
            // 计算新的正交高度
            let newOrthoHeight = currentOrthoHeight + (move.y < 0 ? -this.zoomSpeed : this.zoomSpeed);
            // 确保新的正交高度在合理范围内
            if (newOrthoHeight > 500 && newOrthoHeight < 1000000) {
                this.miniMapCamera.orthoHeight = newOrthoHeight;
            }
        }
    }

    onMouseWheel(event: EventMouse) {
        let scrollValueY = event.getScrollY();
        this.calculateAndSetOrthoHeight(new Vec3(0, scrollValueY, 0));
    }
}