主相机绑定小地图

 

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 };// 缩放速度@propertyzoomSpeed: number = 0.02;// 移动速度因子@propertymoveSpeedFactor: 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));}
}