右上角的小地图的制作

本文详细介绍了如何在Unity中创建并实现小地图的功能。主要内容包括:设置小地图相机、使用RenderTexture获取场景图像、定制遮罩效果以形成圆形小地图、实现相机跟随玩家移动的效果以及添加缩放功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

现在开始说主场景的制作,主场景分战斗和NGUI,战斗时说英雄要跟怪物碰撞,掉血,死亡,这里涉及摇杆控制,技能发放以及技能冷却,英雄的生命值和经验的增长,以及怪物的思维逻辑,让怪物自己会跑,会追英雄,而不是傻傻的站在那里等你去打他,至于NGUI涉及到的是背包,设置,人物介绍,等这里写图片描述
这篇写小地图的制作,从上俯视地面,地图会随着英雄的移动而变换

首先创建一个相机,命名MinMap,把他的Audio Listener去掉,不然两个相机会冲突,我比较喜欢自己做一个地图的材料球,
首先把地图调整成俯视,点击MinMap,shift+common+f,调整小相机的视图,创建一个Render Texture文件,拖到相机的Target Texture处,这样这个图片就会储存到相机看到的数据,
这里写图片描述
再创建一个材料Material,属性改成Custom/Mask
Main Texture中放的是刚才获取好相机数据的Render Texture文件,Mask Texture放的是一个遮罩,因为小地图最后是圆的,不是方的,这样材料球就做好了

这里写图片描述
NGUI中创建一个Texture,Material中放上做好的材料球(或者Texture中放Render Texture文件也行),给它加上圆形的装饰框,

这里写图片描述

这里写图片描述

还有一个相机跟随,这样人动地图才会动,还有我设置了一个放大,缩小的按钮,+是放大,-是缩小

核心代码:

“`
public Transform target;
private Camera cam;
public Vector3 offset;
// Use this for initialization
void Start () {
cam = GameObject.Find (“minmap”).GetComponent();
offset=cam.transform.position-target.position;
}
void LateUpdate(){
cam.transform.position = target.position + new Vector3 (0,offset.y,0);
cam.transform.LookAt (transform);
}
public void ZoomIn(){
if((cam.fieldOfView>=10)&&(cam.fieldOfView<=90)){
cam.fieldOfView-=10;
}
}
public void ZoomOut(){
if((cam.fieldOfView>=10)&&(cam.fieldOfView<=90)){
cam.fieldOfView+=10;
}
}
// Update is called once per frame
void Update () {

}```
<think>嗯,用户想在Godot 4里用SubViewport做一个固定在右下角的小地图,宽度400,保持Tilemap的宽高比。首先,我得想清楚整个步骤。可能得先创建一个SubViewport节点作为小地图的视图,然后把Tilemap添加进去。不过Tilemap可能已经在主场景里了,怎么让SubViewport显示它呢?可能需要复制或者让Tilemap成为子节点,但直接复制的话可能会有同步问题,或许应该让SubViewport的相机来捕捉Tilemap的内容。 接下来,用户提到小地图要显示整个Tilemap,所以需要调整SubViewport的大小,使其和Tilemap的尺寸匹配。这里可能需要获取Tilemap的边界,可能通过Tilemap的used_rect属性来获取实际使用的区域,然后计算宽高比例。然后设置SubViewport的大小,保持和Tilemap相同的比例,这样显示的时候不会变形。 然后,SubViewportContainer作为容器,用来显示SubViewport的内容,需要设置它的位置在右下角,固定宽度400,高度根据宽高比计算。可能需要调整锚点和边距,让Container固定在右下角。这里要注意Godot的UI布局系统,可能需要使用Anchor Preset来设置右下角,然后调整尺寸。 另外,可能需要一个Camera2D节点在SubViewport里,用来控制显示的范围。设置Camera2D的缩放模式,让它显示整个Tilemap。可能需要将Camera的位置固定在Tilemap的中心,然后调整缩放比例,让整个Tilemap都能被拍摄到。这里可能需要脚本动态计算缩放比例,根据Tilemap的尺寸和SubViewport的尺寸比例。 还有,用户可能希望小地图实时更新,所以如果主场景的Tilemap有变化,或者玩家移动,小地图可能需要同步。但如果是静态的小地图,可能不需要跟踪玩家位置,只需要显示整个地图。不过用户没提到是否需要玩家标记,可能需要进一步询问,但当前问题只要求显示Tilemap,所以暂时不考虑。 另外,关于SubViewport的渲染,可能需要确保Tilemap在SubViewport中可见,可能需要调整图层或复制Tilemap到SubViewport的子节点中。或者,使用RemoteTransform2D来同步主场景中的节点到SubViewport,但这样可能更复杂。可能更简单的方法是将Tilemap复制到SubViewport中,但这样的话,如果主Tilemap有动态变化,小地图的Tilemap也需要更新,可能会有同步问题。或者,主Tilemap和SubViewport的Tilemap共享同一个数据源,比如使用同一个Tilemap节点,但可能Godot不允许同一个节点存在于多个场景树中。这时候可能需要实例化主Tilemap的场景,作为SubViewport的子节点,这样它们就是独立的实例,但需要同步数据,这可能比较复杂。 或者,使用远程相机的方式,让SubViewport的Camera2D跟随主场景的Tilemap,但可能需要在主场景中设置一个Camera2D,然后在SubViewport中使用另一个Camera2D来覆盖整个Tilemap。不过这样可能无法直接控制显示范围,可能需要调整缩放。 可能正确的做法是在SubViewport中添加一个Camera2D,并设置其缩放和位置,使其能够显示整个Tilemap。然后通过脚本获取Tilemap的尺寸,计算需要的缩放比例。例如,Tilemap的used_rect的尺寸是width和height,SubViewport的大小设置为width和height,然后Camera2D的缩放设置为SubViewport的尺寸除以Tilemap的尺寸,这样就能完整显示Tilemap。或者反过来,可能需要调整Camera的缩放,使得Tilemap适应SubViewport的视口大小。 另外,SubViewport的大小可能需要设置为Tilemap的尺寸,或者根据宽高比来设定。比如,用户希望小地图的宽度固定为400,高度根据Tilemap的宽高比计算,比如如果Tilemap是16:9,那么高度就是400*(9/16)=225。然后SubViewport的大小设置为Tilemap的尺寸,这样当SubViewportContainer显示时,按比例缩放,保持宽高比不变。 不过可能步骤应该是这样的: 1. 创建SubViewport节点,调整其大小匹配Tilemap的宽高比,比如根据Tilemap的used_rect计算实际尺寸,然后设置SubViewport的size为这些尺寸,这样Camera2D可以设置为显示整个区域。 2. 在SubViewport中添加Camera2D,调整其缩放,使得Tilemap完全显示在SubViewport中。可能需要将Camera的位置设为Tilemap的中心,缩放设置为合适的值。 3. 创建SubViewportContainer,作为UI层,放在右下角,固定宽度400,高度根据宽高比自动计算,保持比例正确。 4. 将SubViewport作为SubViewportContainer的子节点,确保渲染正确。 可能还需要处理UI的锚点,将SubViewportContainer的位置固定在右下角,并设置其尺寸。例如,设置Container的锚点右下角为(1,1),然后调整margin,留出边距。尺寸方面,设置宽度400,高度根据Tilemap的宽高比计算,比如在脚本中动态设置。 另外,Tilemap可能有多个图层,需要确保所有需要显示的图层都被包含在SubViewport中。可能需要将Tilemap节点复制到SubViewport中,或者使用远程的方式。但直接复制的话,数据同步会有问题,所以可能需要动态加载Tilemap的数据到SubViewport中的Tilemap实例中。或者,如果Tilemap是静态的,可能只需要复制一次即可。 总结步骤: - 创建SubViewport节点,设置其尺寸为Tilemap的实际尺寸(根据used_rect)。 - 在SubViewport中添加Camera2D,调整位置和缩放,确保整个Tilemap显示。 - 将Tilemap实例添加到SubViewport中,可能需要复制主场景的Tilemap。 - 创建SubViewportContainer,作为UI元素,设置其在右下角,宽度400,高度根据宽高比自动计算。 - 将SubViewport作为SubViewportContainer的子节点,调整Container的尺寸和缩放模式,保持比例正确。 可能的难点在于正确计算Camera的缩放和SubViewport的尺寸,以及确保Tilemap在SubViewport中正确显示。此外,处理UI布局和动态调整高度可能需要脚本支持。 现在需要将这些步骤转化为具体的节点结构和脚本代码,帮助用户一步步实现。</think>在Godot 4中实现小地图的完整步骤: 1. **场景结构搭建** ```gdscript - MainScene (你的主场景) - TileMap (主地图) - Player - SubViewportContainer (命名为MinimapContainer) - SubViewport (命名为MinimapViewport) - Camera2D (命名为MinimapCamera) - TileMap (必须与主场景中的TileMap使用相同TileSet和布局) ``` 2. **配置SubViewport** ```gdscript MinimapViewport设置: - Size → 设置为与主TileMap实际尺寸匹配(需通过脚本动态计算) - Render Target → Update Mode: Always - Transparent Bg: √ 启用透明背景 ``` 3. **Camera2D配置** ```gdscript MinimapCamera设置: - Anchor Mode: Drag Center - Zoom → 通过脚本控制 (示例见第6步) - Ignore Rotation: √ - Ignore Zoom: √ ``` 4. **SubViewportContainer设置** ```gdscript MinimapContainer设置: - Anchor → 右下角 - Offset Right = -20 (右边距) - Offset Bottom = -20 (下边距) - Stretch Shrink = 1 - 宽度固定400,高度通过脚本动态计算 ``` 5. **创建控制脚本** ```gdscript extends SubViewportContainer @export var main_tilemap: TileMap @export var map_camera: Camera2D func _ready(): # 计算Tilemap实际尺寸 var used_rect = main_tilemap.get_used_rect() var tile_size = main_tilemap.tile_set.tile_size var map_width = used_rect.size.x * tile_size.x var map_height = used_rect.size.y * tile_size.y # 设置SubViewport尺寸 $SubViewport.size = Vector2(map_width, map_height) # 计算宽高比 var aspect_ratio = map_height / map_width self.custom_minimum_size = Vector2(400, 400 * aspect_ratio) # 设置相机位置和缩放 map_camera.position = used_rect.get_center() * tile_size map_camera.zoom = Vector2(map_width / $SubViewport.size.x, map_height / $SubViewport.size.y) ``` 6. **同步处理(如果需要动态元素)** ```gdscript # 在主场景的Player脚本中添加: func _process(_delta): var minimap_tilemap = get_node("MinimapContainer/SubViewport/TileMap") minimap_tilemap.global_transform = $TileMap.global_transform ``` **补充说明:** 1. 如果希望显示玩家标记,可在SubViewport中添加一个与主场景Player同步的Sprite 2. 通过`CanvasLayer`可以确保小地图始终在屏幕最上层 3. 使用`mouse_filter: Ignore`可防止小地图遮挡主场景点击事件 4. 调整Camera2D的`Limit`属性可控制显示边界范围 最终效果:右下角显示固定宽度400的小地图,宽高比与主地图一致,完整显示Tilemap内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值