UE4蓝图制作场景小地图

教程使用版本 4.16，工程文件请戳我。

提示

本教程参考于风之神韵，想要了解更多的UE4教程，请百度风之神韵。

内容

制作一个用于显示当前位置的小地图，使用的并不是摄像机，而是在二维图上进行移动。所以需要事先准备好一个和场景相差无几的图片。由于是移动二维图片，所以需要涉及到部分计算。

1. 准备

1. 首先，先将工程文件中BPTUTAD复制到自己的工程中的content文件夹下。
   
2. 可以将做好的那一部分先行删除
   
   

2. 开始

1. 首先先创建一个材质球，因为既然是小地图，第一步肯定是要将地图绘制出来。将材质球取名为M_MiniMap，打开材质球，将图片拖入场景连接 Emissive Color，要不然渲染到屏幕上将会是黑色的。
   
2. 将材质球的 Material 的 Blend Mode属性更改为 Translucent。
   
3. 来到BluePrints文件夹下，创建一个HUD类。
   、
4. 打开HUD，创建一个事件 Event Receive Draw HUD ，该事件是每一帧调用一次，然后再创建一个 Draw Material 节点，该节点是绘画材质的节点。
   #### 参数
   
   1. Target HUD的引用
   2. Material 材质球
   3. Screen X 相对于屏幕的X点开始
   4. Screen Y 相对于屏幕的Y点开始
   5. Screen W 图片容器的宽度
   6. Screen H 图片容器的高度
   7. Texture U 图片从U开始画，取值范围0-1。
   8. Texture V 图片从V开始画，取值范围0-1。
   9. Texture UWidth 图片占容器比例，宽度，取值范围0-1。
   10. Texture VHeight 图片占容器比例，高度，取值范围0-1。
   11. Tint Color 图片的颜色
   12. Blend Mode 混合模式 控制如何将这个四轴飞行器与场景半透明的混合。
   13. Scale 缩放比例，会失帧。
   14. Scale Position 缩放是否扩大这个绘图的位置
   15. Rotation 旋转多少度
   16. Rot Pivot 旋转中心点。
       
5. 将Metarial属性换成刚刚创建的M_MiniMap，ScreenX，ScreenY,ScreenW,ScreenH,MaterialU,MaterialV,MaterialUWidth,MaterialVHeight 分别设置成 100,100,256,256,0,0,1,1，运行一下就会看到如下画面。
   
6. 材质已经可以绘画了，我们只需要根据某些数据来绘画就行了。现在，创建一个Actor类，命名为BP_MiniMap。
   该类用于存放用户自定义的数值，分别给上默认的值20000，20000，256，10，M_MiniMap，T_MiniMapArrow01，然后拖动到场景中。
   
   
   1. WorldSize 类型为 Float 用于存放当前场景的大小。
   2. Map View Size 类型为 Float 用于存放可视区域，就是当前一个绘画区域内绘画多少地图内容。
   3. Map Ui Size 类型为 Float 绘画区域大小。
   4. Map Padding 类型为 Vector2D 和右下角之间的边距。
   5. Texture 类型为 Texture 用于存放当前地图的背景。
   6. PlayerTexture 类型为 Texture 用于存放代表角色的标志。
7. 我们需要将材质球某些值更改一下，使其能够缩放和位移，这样就能够形成可视区域和移动的效果了，首先实现移动。通过将材质的UV进行改变从而形成位移效果。
   
8. 为了更方便的进行效果观看，创建一个M_MiniMap的实例复制。命名为M_Map01。
   
9. 打开M_Map01后调整R,G的值就可以发生位移。
   
10. 现在来添加缩放，调整MapScale就可以缩放图片了。
    
11. 打开HUD，创建如下变量，用来获取用户自定义的一些值。创建一个函数，命名为InitGame，用来初始化游戏。
    
    #### 创建变量的类型(由上至下)
    
    1. Float 存放地图UI大小的值
    2. BP_Mini_Map 存放BP_Mini_Map类
    3. Float 存放缩放比
    4. Vector 2D 存放间距
    5. Material Instance 存放材质节点
    6. Float 存放场景大小
    7. Vector 2D 存放场景中心
    8. Texture 存放玩家图标
    9. Float 存放绘制点的X
    10. Float 存放绘制点的Y
    11. Float 存放可视区域
12. 打开InitGame写下如下蓝图节点。首先需要获取到先创建好的BP_MiniMap类里面的值，所以先获取BP_Minimap。因为代码片段有点长，所以使用队列来分隔方便观看。首先创建 Get All Actors Of Class 节点获取到用户自定义的值。
    
13. 给创建的变量赋值。首先将MiniMap引用，然后获取到Get Map Ui Size 赋予给Ui Size变量，WorldSize也是如此。
    Map Sclae的值先用可视区域除以世界大小，然后减去1。因为当缩放比为0的时候，材质图片刚刚好铺满整个面。当值为20000是就是1比1的比例所以需要减去1。其他变量都和Ui Size一样。
    
14. 现在要将DMI赋值了，需要将材质改变为动态的才可以改变材质的值。在这里 Parent 父级我们选择之前创建好的实例。顺便将视图的缩放比直接赋予给材质，因为MapScale在Scalar Parameter Values下，所以要Set Scalar Parameter Values然后将Parameter Name改变成MapScale。
    
    
15. 然后根据自定义的图片设置地图背景。并将PlayerImg赋值，在绘画人物Logo的时候需要用。因为图片在另一个分组所以创建的节点也会不一样。
    
16. 然后再给中心点赋值。经过反复实验，发现中心点位于缩放比的-2/1倍上。现在初始化的值已经完成，回到事件图表中。
    
17. 使用 Event Begin Play 来驱动InitGame，当然，也可以为Pure打上勾。
    
18. 创建一个Screen函数，用来确定绘画的初始点。根据UI Size和边距来计算。用屏幕的大小 减去 UI Size和边距 的和。
    
    
19. 来测试一下是否正确，回到事件图表，添加以下节点。
    
    
20. 已经可以正确的显示在屏幕上了，现在还差随着角色移动而移动图片了。创建一个Move函数。前面说过，只需要改变MapOffset的值就可以移动图片。首先获取角色所在的位置，然后除以世界大小。因为MapOffset的值是始终在中心点的左右0.5之间。然后往左走是负，因为场景是以0，0为中心的。往右走是正。所以加上世界中心位置即可。然后赋值。
    
21. 回到事件图表在Draw Material后连接Move函数。
    
22. 虽然已经可以随着人物的移动而移动了，但是还是不知道人在哪里。回到事件图表，创建一个PlayerLogo函数。图标的大小根据缩放比来决定，缩放比越小图标越大。然后连接到Move函数后，现在已经完成了整个效果。
    
23. 可视区域为20000时候和5000时候
    
    

3. 总结

1. 根据材质的一些属性来移动和缩放图片从而形成小地图移动和可视区域的效果。
2. 使用图片比使用摄影机要节约性能而且更像一个地图。
3. 根据人物的矩阵信息来改变小地图的移动。
4. 算法需要细细体会。