当前位置: 首页 > news >正文

主相机绑定小地图

 

  1. 资源初始化:在类中通过 @property 装饰器定义主相机、小地图相机、小地图精灵等资源属性,便于在编辑器中赋值。在 start 方法里,当确认这些资源存在后,创建渲染纹理并设置其大小,将渲染纹理与小地图相机关联,再创建精灵帧并把渲染纹理应用到精灵帧上,最后将精灵帧设置给小地图精灵,完成小地图显示的初始化配置。
  2. 位置跟随:在 update 方法中,不断检查主相机和小地图相机是否存在,若存在则获取主相机位置,让小地图相机的 xy 坐标跟随主相机,同时保持小地图相机的 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));
    }
}
    

http://www.dtcms.com/a/105900.html

相关文章:

  • C# FileStream 使用详解
  • 什么是大数据?
  • 从【抖音安全与信任中心】观察企业如何做算法透明
  • 【Nova UI】一、探秘 Vue 组件库搭建:从技术选型到持续迭代
  • 北京南文观点:后糖酒会营销,以战略传播重构品牌信心坐标
  • 前端主流技术现状与未来趋势分析
  • 数据结构之二叉树Python版
  • 基于Huggingface的lerobot项目在so-arm100机械臂上的复现全过程记录
  • DM数据迁移工具
  • 2025.3.24-2025.3.30学习周报
  • C# System.Net.IPEndPoint 使用详解
  • 实战打靶集锦-34-midnight
  • MTK Camera 照片切视频Systrace拆解分析
  • leetcode138.随机链表的复制
  • 通配符(Wildcard)
  • 很简单 的 将字幕生成视频的 方法
  • Ansible playbook-ansible剧本
  • Linux中的系统管理和优化
  • 人工智能在生物医药领域的应用地图:AIBC2025将于6月在上海召开!
  • AISEO (GEO )中的知识图谱
  • List中多个数据相同,保留最新日期数据
  • 设计模式 三、结构型设计模式
  • 【夜话系列】DelayQueue延迟队列(下):实战应用与面试精讲
  • 51. “闲转易”交易平台小程序(基于springbootvue)
  • 两个有序序列的合并-手摇算法
  • 【深度学习新浪潮】Grok过去两周的进展一览(2025.04.01)
  • [学成在线]09-课程预览
  • 论文阅读笔记:Denoising Diffusion Implicit Models (2)
  • Spring Boot 快速入手
  • node.js、npm相关知识