小地图制作（UI 层）

🎯本节学习目标

• 理解小地图原理
• 实现玩家位置箭头
• 实现敌人标记

🚀课程导读

右上角的雷达小地图实时显示玩家与敌人位置。原理是“世界坐标→地图坐标”的映射。本课实现。

◆小地图原理

世界坐标“压”到小图。

1. 【思路】把世界 XZ 坐标映射到小地图的 UI 位置。
2. 【映射公式】地图位置 = 地图中心 + (世界坐标 - 世界中心) × 缩放比例。
3. 【缩放比例】小地图 UI 大小 / 实际地图大小。
4. 【中心】小地图中心对应世界中心（或玩家）。
5. 【方案1 简化】让地图固定中心在“玩家初始位置”，用玩家相对偏移。
6. 【方案2 相机法】用第二台正交相机渲染俯视图（性能高但复杂）。
7. 【本课用方案1 纯 UI 映射，最灵活。
8. 【坐标系】世界 X → UI 右（X），世界 Z → UI 上（Y，注意 UI 的 Y 向下为正需取反）。

◆实现小地图

玩家箭头 + 敌人红点。

1. 【小地图 UI】创建 Canvas 右下角圆形/方形 Image（半透明黑）作为雷达背景，锚点右上。
2. 【玩家箭头】建 Image 小箭头（▲），作为小地图的子物体，锚点中心。
3. 【映射脚本 Minimap】
4. public RectTransform mapRect; // 小地图 RectTransform
5. public Transform player;
6. public RectTransform playerArrow;
7. public float worldRadius = 50f; // 实际地图半径
8. void Update() {
9. Vector3 offset = player.position; // 相对世界中心（这里假设中心原点）
10. float uiRadius = mapRect.rect.width * 0.5f;
11. float scale = uiRadius / worldRadius;
12. playerArrow.anchoredPosition = new Vector2(offset.x * scale, offset.z * scale);
13. playerArrow.localRotation = Quaternion.Euler(0, 0, -player.eulerAngles.y); // 箭头旋转对应朝向
14. }
15. 【敌人红点】创建 List<RectTransform> 敌人箭头，遍历设置位置（同理映射）。
16. 【世界中心】若玩家从 (0,0) 出发，offset=player.position 即可。
17. 【边界】用 Clamp 限制红点在雷达圈内。
18. 【注意】UI Y 轴向下，世界 Z 映射到 UI Y 时取负或符号统一（按实际朝向调）。
19. 【完成】玩家箭头跟随、敌人红点显示。
20. 【进阶】小地图边框、缩放雷达、迷雾。

⚠常见错误与排查

★动手练习

✓本节小结

小地图已实现。下一课做屏幕提示与对话气泡。