unity3D MiniMap等比例映射的实现(一) 通过Image做小地图背景,Player实时更新位置在小地图上

本次给大家分享的是unity等比例映射小地图实现的第一种方式-----通过Image进行等比例映射:最终达到的效果就是玩家映射到小地图上的图片这里用PlayerIcon代替,Player的移动带动PlayerIcon的移动而背景不动.

      一 UI准备部分:(需要注意的是场景Player居于地形正中心   画布下PlayerIcon的锚点要居中

       通过控制玩家的移动计算映射到Image上的位置. 其中Image的Sprite是小地图的背景(我们预先要将场景的地图调成Z--X Top模式适比截取场景的图片作为小地图的背景图)如图所示:



将截取好的背景minimapImage.sprite赋给Canvas下面的Image  再给miniImage的子物体添加PlayerIcon


调成Game模式呈现出来的效果图为



二 核心算法部分:

1.取人物在大地图里面的一个等比例(0.5,0.5)

WithRate = Pserson.pos.x / terrain.width;

HeigthRate = Pserson.pos.y / terrain.heigth;

2.通过大地图的比例,计算出在小地图的位置这样就达到了小地图位置的同步,怎么样是不是很简单

litMapPos.x = litMap.width * WithRate

litMapPos.y = litMap.heigth * HeigthRate

3.那么怎么控制人物的旋转也能显示再小地图上呢?很简单让Playericon的旋转角度=Player的旋转角度,这样就同步更新过来啦~还要注意一点如果你的旋转的方向别忘了取反哦~

tmpAngle = palyerIcon.localEulerAngles;

tmpAngle.z = 90 - player.localEulerAngles.y;

palyerIcon.localEulerAngles = tmpAngle;

以上就是核心算法的实现

由于位置在Update里,实时都要同步更新  但实战项目的地图都是非常大的,在场景中移动几步地图上是没有什么变化的  为了降低CPU的计算工作,我们这里用计时每隔5秒一更新就好啦  这里我做的Demo代码附在下面,挂到PlayerIcon上即可   场景中移动Player可以在小地图中看到PlayerIcon的同步

下一篇我将会为大家介绍RawImage实现地图的移动来实时更新玩家位置

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class LittleMap : MonoBehaviour {

public Transform player;
public Terrain myTerrain;
RectTransform litMap;
RectTransform palyerIcon;
float widthRate;
float heightRate;
Vector3 tmpAngle;
Vector2 tmpPos = Vector2.zero;
float timeCount = 0;
void Start () {
litMap = transform.parent.GetComponent<RectTransform>();
palyerIcon = transform.GetComponent<RectTransform>();
}
void Update () {
timeCount += Time.deltaTime;
if (timeCount > 0.5f)
{
timeCount = 0;
UpdatePos();
}
}
void UpdatePos() {
widthRate = player.transform.position.x / myTerrain.terrainData.size.x;
heightRate = player.transform.position.z / myTerrain.terrainData.size.z;
tmpPos.x = litMap.sizeDelta.x * widthRate;
tmpPos.y = litMap.sizeDelta.y * heightRate;

tmpAngle = palyerIcon.localEulerAngles;
tmpAngle.z = 90 - player.localEulerAngles.y;
palyerIcon.localEulerAngles = tmpAngle;
}
}