概览

• 获取并导入素材
  
• 在窗口部件中添加瞄准十字图片
  
• 窗口部件实现接口返回当前武器图片
  
• 在窗口部件中实现逻辑加载图片
  

获取素材

ShooterGame

选中Conent/UI/HUD/HUDMain

右键

裁剪武器图标和对应的十字瞄准线, 命名并保存到Image文件夹

导入素材

ShootThemUp

将Image文件夹拖入到Content/UI下, 虚幻引擎自动将图片转换成资产

所有的外部资源, 如图片, 音频, 导入时均会被转换为资产格式. 这样, 在不同平台打包时更便利

本节课使用瞄准十字图片, 武器图标供下节课使用

在窗口部件中添加瞄准十字图片

WBP_PlayerHUD

从选项板中, 将图片元素拖入到视口

Palette > Image

可以在视口中调整图片大小

选择测试图片

Details > Appearance > Brush > Image

选择RifleCrossHair

使用图片原大小

勾选 Details > Slot > Size To Content

使图片居中

• 添加锚
  
  Details > Slot(Canvas Panel Slot) > Anchors , 选择居中项
  

  

  
  

• 设置图片位置
  
  Details > Slot , 设置Position X = Position Y = 0
  

  

  
  

• 设置对齐
  
  Details > Slot , 设置Alignment X = Y = 0.5
  

  

  
  

测试结果

窗口部件类实现接口返回武器图片

添加数据结构: 存放相应图片

存放武器对应的图标和瞄准十字

使用 UTexture2D 类型保存纹理

ShootThemUp: STUCoreTypes.h

Copy 1class UTexture2D;
 2// weapon
 3USTRUCT(BlueprintType)
 4struct FWeaponUIData
 5{
 6    GENERATED_USTRUCT_BODY()
 7
 8    UPROPERTY(EDitDefaultsOnly, BlueprintReadWrite)
 9    UTexture2D *MainIcon;
10
11    UPROPERTY(EDitDefaultsOnly, BlueprintReadWrite)
12    UTexture2D *CrossHairIcon;
13};

添加数据成员: 存放武器相关图片

ShootThemUp: Weapon/STUBaseWeapon.h

protected

Copy1UPROPERTY(EDitDefaultsOnly, BlueprintReadWrite)       
2FWeaponUIData UIData;

添加接口: 获取武器相关图片

ShootThemUp: Weapon/STUBaseWeapon.h

public

Copy1FWeaponUIData GetUIData() const { return UIData; }

添加接口: 获取当前武器相关图片

Wrapper Function

ShootThemUp: Components/STUWeaponComponent.h

pulic

Copy1bool GetWeaponUIData(FWeaponUIData &UIData) const;

ShootThemUp: Components/STUWeaponComponent.cpp

Copy1bool USTUWeaponComponent::GetWeaponUIData(FWeaponUIData &UIData) const
2{
3    if (CurrentWeapon)
4    {
5        UIData = CurrentWeapon->GetUIData();
6        return true;
7    }
8    return false;
9}

添加接口: 窗口部件类提供接口获取武器图片信息

ShootThemUp: UI/STUPlayerHUDWidget.h

public

Copy1#include "STUCoreTypes.h"
2
3UFUNCTION(BlueprintCallable)
4bool GetWeaponUIData(FWeaponUIData &UIData) const;

ShootThemUp: UI/STUPlayerHUDWidget.cpp

Copy 1#include "Components/STUWeaponComponent.h"
 2
 3bool USTUPlayerHUDWidget::GetWeaponUIData(FWeaponUIData &UIData) const
 4{
 5    const auto Player = GetOwningPlayerPawn();
 6    if (!Player) return false;
 7
 8    const auto Component = Player->GetComponentByClass(USTUWeaponComponent::StaticClass());
 9    const auto WeaponComponent = Cast<USTUWeaponComponent>(Component);
10    if (!WeaponComponent) return false;
11
12    return WeaponComponent->GetWeaponUIData(UIData);
13}

屏蔽之前绘制瞄准十字逻辑

ShootThemUp: UI/STUGameHUD.cpp

屏蔽DrawHUD中对DrawCrossHair的调用

设置瞄准图片

配置步枪和发射器图片

BP_STURifleWeapon

BP_STULauncherWeapon

获取瞄准十字图片

WBP_PlayerHUD

添加函数: 获取瞄准十字图片

• Image > Details > Brush > Bind > Create Binding
  

  

  
  

• 重命名为 Get Crosshair Image
  

  

  
  

添加节点: 获取武器图片

展开UIData针脚

添加节点: 根据返回值做不同处理

空白处左键同时按下 B

输入来自 GetWeaponUIData 返回值

添加节点: 绘制图片

从 Return Node 的 Return Value 出发, 添加 Widget > Make Slate Bruch

• 设置图片

  从 GetWeaponUIData > UIData CrossHair Icon 到 MakeSlatBrush > Image
  

• 设置图片绘制大小为图片原大小

  • 添加节点: 创建Vector2D

    从 MakeSlatBruch > ImageSize 出发, 添加 MakeVector2D
    

    

    
    

  • 设置数组

    从 GetWeaponUIData > UIData CrossHair Icon 出发, 添加 Rendering > Texture > GetSizeX和GetSizeY
    

    

    
    

    组合成Vector2D
    

    GetSizeX和GetSizeY返回整数, 自动转换为浮点数
    

完整处理

查看

步枪瞄准十字

发射器瞄准十字

角色死亡时, 瞄准十字变为方块, 此时未获取到图片

调节光线

4.27

World outliner > Sky Sphere > Details

• Default > Directional Light Actor > Clear
  
• Override Settings > Sun Height = -1