如何为Phaser小地图添加边框/背景图并固定相对位置

我在屏幕右上角设置了一个小地图，想给它加边框或背景图提升辨识度。试了用图片、Phaser内置图形实现，但所有元素都没法和小地图保持相对位置，会跟着场景地面移动；把滚动锁定到(0,0)时，元素又出现在主相机中心。相关代码如下：

this.cameras.main.startFollow(this.player);

//border image here maybe?

this.minimap = this.cameras.add(config.width-210, 10, 200, 200).setZoom(0.1).setName("minimap");
this.minimap.scrollY = 250;
this.minimap.scrollX = Phaser.Math.Clamp(this.player.x-100, 800, 2000);
this.minimap.setBackgroundColor("#000000");
this.minimap.startFollow(this.player);

核心原因 #

你添加的边框/背景图默认属于主相机管辖的场景元素，会随场景滚动逻辑移动；而小地图是独立相机，两者的坐标体系没有绑定，导致位置错位。

解决方法 #

方法1：用Graphics绘制固定边框（简单高效） #

创建Graphics对象后，直接基于小地图的屏幕坐标绘制边框，并设置scrollFactor(0)让它固定在屏幕上，不随场景滚动：

this.cameras.main.startFollow(this.player);

// 创建小地图
this.minimap = this.cameras.add(config.width-210, 10, 200, 200).setZoom(0.1).setName("minimap");
this.minimap.scrollY = 250;
this.minimap.scrollX = Phaser.Math.Clamp(this.player.x-100, 800, 2000);
this.minimap.setBackgroundColor("#000000");
this.minimap.startFollow(this.player);

// 绘制小地图边框
const minimapBorder = this.add.graphics();
minimapBorder.lineStyle(3, 0xff0000); // 线宽3，红色
minimapBorder.strokeRect(this.minimap.x, this.minimap.y, this.minimap.width, this.minimap.height);
minimapBorder.setScrollFactor(0); // 固定在屏幕位置

方法2：添加固定位置的背景图 #

提前在preload中加载背景图资源，然后把图片的滚动因子设为0，直接放在小地图的屏幕坐标上层/下层：

this.cameras.main.startFollow(this.player);

// 添加小地图背景图（假设预加载的资源key为'minimap-bg'）
const minimapBg = this.add.image(config.width-110, 110, 'minimap-bg').setDisplaySize(220, 220);
minimapBg.setScrollFactor(0); // 固定不滚动

// 创建小地图，放在背景图上方
this.minimap = this.cameras.add(config.width-210, 10, 200, 200).setZoom(0.1).setName("minimap");
this.minimap.scrollY = 250;
this.minimap.scrollX = Phaser.Math.Clamp(this.player.x-100, 800, 2000);
this.minimap.setBackgroundColor("rgba(0,0,0,0.6)"); // 设半透明，透出背景图
this.minimap.startFollow(this.player);

方法3：使用独立UI相机管理所有UI元素 #

如果需要多个UI元素和小地图绑定，可以创建专门的UI相机，让所有UI元素归这个相机管辖，彻底脱离场景滚动：

this.cameras.main.startFollow(this.player);

// 创建UI相机，覆盖整个屏幕，不跟随任何对象
const uiCam = this.cameras.add(0, 0, config.width, config.height).setName('uiCam');
uiCam.setScrollFactor(0);
uiCam.ignore(this.cameras.main); // 避免重复渲染主相机内容

// 在UI相机上绘制小地图边框
const minimapBorder = uiCam.add.graphics().lineStyle(3, 0xff0000).strokeRect(config.width-210, 10, 200, 200);

// 创建小地图
this.minimap = this.cameras.add(config.width-210, 10, 200, 200).setZoom(0.1).setName("minimap");
this.minimap.scrollY = 250;
this.minimap.scrollX = Phaser.Math.Clamp(this.player.x-100, 800, 2000);
this.minimap.setBackgroundColor("#000000");
this.minimap.startFollow(this.player);

内容的提问来源于stack exchange，提问作者LeftClickMage