小地图案例

  • 资产和数据准备

蓝图类
BP_MiniMap :继承自Actor类,存储小地图相关数据
BP_MiniMapHUD :继承自HUD类,绘制小地图

材质
M_Map主材质 :包含一个地图纹理、一个渐变遮罩、三个参数(纹理、遮罩偏移、遮罩缩放)
MI_Map01材质实例 :主材质的实例,便于使用和修改

贴图
T_Map:场景顶视图
T_MiniMapArrow01:箭头图标
T_MiniMapFrameInk01:小地图边框图

场景及小地图尺寸、位置相关变量
1、场景边长MiniMapWorldSize
2、小地图初始边长MiniMapDefaultViewSize
3、场景左上角二维坐标MiniMapWorldOrigin
4、小地图左上角二维坐标MiniMapViewOrigin
5、角色位置二维坐标MiniMapPawnPos
6、小地图实际边长MiniMapViewSize

UI相关变量
1、小地图UI像素大小MiniMapUISize
2、小地图UI外边距像素MiniMapUIPadding
3、屏幕横向和竖向大小ResX和ResY

材质相关变量
1、材质实例MiniMapMI
2、动态材质实例MiniMapDMI

还需创建Actor引用、绘制箭头/边框图、缩放功能相关变量等

  • 绘制小地图的材质

Draw Texture绘制纹理
Draw Material绘制材质,节点中Screen开头变量为屏幕UI属性,Material开头变量为纹理属性

注意:材质绘制到HUD需使用自发光Emissive Color而非底色Base Color
相较于绘制纹理,绘制材质后续可通过蓝图脚本修改具有参数化属性的材质实例实现遮罩、移动、缩放等功能

渐变遮罩:
RadialGradientExponential指数径向(放射状)渐变
LinearGradient线性渐变

带放射状渐变的静态材质 UI绘制如下:
UE4学习笔记 05

纹理、UV坐标:
Texture Coordinate纹理坐标节点,缩写为TexCoord
用二维坐标(u,v)来表示纹理,其中u为横坐标从左到右,v为纵坐标从上到下
uv大小一般情况为0~1,坐标(0,0)对应纹理的左上角位置,坐标(1,1)对应纹理的右下角位置
超出1的部分由寻址模式决定纹理的映射:wrap重复平铺、mirror镜像、clamp剪裁
UV坐标加减矢量可以实现偏移,UV增加->纹理反向移动
UV坐标乘除标量可以实现缩放,UV增加->纹理范围变大,单位纹理缩小

材质中的数据节点可通过右键Convert to Parameter转化为参数
向材质里传参数只允许一维、三维、四维
ComponentMask 阻断向量的维度

  • 创建动态材质实例

1、创建具有参数化属性的动态材质实例
Create Dynamic Material Instance创建动态材质实例
在HUD蓝图类中通过蓝图脚本实时修改材质实例改变小地图的绘制结果,使其支持按比例显示及跟随角色定位

2、长度坐标数据计算
在HUD蓝图类Beginplay事件后设置ViewSize默认初始值
依次计算MapWorldOrigin、MapPawnPos、MapViewOrigin
二维向量有直接与浮点数进行四则运算的节点

3、材质参数计算
主要是通过求出小地图位置、大小之于场景的百分比,来修改相应材质参数控制遮罩以及纹理部分,实现显示比例、跟随角色定位及UI尺寸位置自定义

遮罩:MaskOffset偏移参数 和 MaskTile缩放参数
纹理:Material U/V坐标 和 Material UWidth/VHeight宽高大小
Set Scalar Parameter Value设置标量参数,实现纹理比例缩放
Set Vector Parameter Value设置矢量参数,实现纹理偏移
Set Texture Parameter Value设置纹理参数,实现纹理替换

4、位置尺寸
依次计算得出Screen X/Y和Screen Width/Height即可
UE4学习笔记 05

  • 绘制箭头,支持跟踪角色移动方向
    使用Draw Texture绘制小箭头
    需获取Player旋转属性航向角Yaw传入节点并作调整
    UE4学习笔记 05

  • 支持平滑缩放
    在HUD蓝图类中使用差值计算节点Finterp To实时修改小地图的Size
    并设置目标值SizeTarget及目标值修改函数ZoomIn、ZoomOut
    由键盘输入事件触发并调用相应函数更新缩放目标值实现小地图缩放功能
    UE4学习笔记 05

  • 绘制边框
    Draw Texture 先于小地图绘制,然后调整尺寸边距使其和小地图相匹配
    UE4学习笔记 05

相关文章: