第20章 UE5创建自定义图形界面

第20章 UE5创建自定义图形界面

图形界面是游戏与玩家交互的关键部分，而自定义的图形界面可以让游戏独具特色并提升用户体验。在UE5.2中，开发者可以通过多种方式创建自定义图形界面，既可以使用内置的UI系统，也可以通过外部图形编辑工具创建资源。本章将介绍如何使用不同的图形工具为UE5.2游戏创建独特的图形界面元素。

20.1 创建图形的普遍规则

在创建游戏UI图形资源时，无论使用哪种工具，都有一些通用的最佳实践和规则需要遵循：

在UE5.2中导入和使用UI资源的基本流程是：

cpp

// C++中加载UI纹理的示例
#include \”Engine/Texture2D.h\”

UTexture2D* LoadUITexture(const FString& TexturePath)
{
// 同步加载纹理资源
UTexture2D* Texture = Cast<UTexture2D>(StaticLoadObject(UTexture2D::StaticClass(), nullptr, *TexturePath));

if (Texture)
{
// 设置UI纹理的采样模式
Texture->SRGB = true; // 使用sRGB颜色空间
Texture->Filter = TF_Nearest; // 使用最近点采样，保持像素边缘清晰
Texture->AddressX = TA_Clamp; // X方向限制寻址模式
Texture->AddressY = TA_Clamp; // Y方向限制寻址模式
Texture->UpdateResource(); // 更新纹理资源
}

return Texture;
}

在蓝图中使用UI纹理的基本方法：

swift

// 蓝图中加载和设置UI纹理
function SetupUITexture(ImageWidget, TexturePath):
// 加载纹理
UITexture = LoadObject<UTexture2D>(None, TexturePath)

if UITexture:
// 创建动态材质实例以更好地控制渲染属性
DynamicMaterial = CreateDynamicMaterialInstance(ImageWidget.Brush.GetResourceObject())

// 设置纹理参数
DynamicMaterial.SetTextureParameterValue(\”UITexture\”, UITexture)

// 应用到图像组件
ImageWidget.SetBrushFromMaterial(DynamicMaterial)

// 设置渲染属性
ImageWidget.SetDesiredSize(Vector2D(UITexture.GetSurfaceWidth(), UITexture.GetSurfaceHeight()))

return true

return false

接下来，我们将探讨几种常用的图形编辑工具，并了解如何使用它们创建UE5.2的UI资源。

20.2 GIMP

GIMP (GNU Image Manipulation Program) 是一个免费开源的图像编辑软件，提供了强大的图像处理功能，是创建游戏UI资源的优秀选择，特别是对于预算有限的独立开发者。

GIMP的主要优势包括：

• 免费开源
• 跨平台支持（Windows、macOS、Linux）
• 图层支持
• 丰富的滤镜和效果
• 脚本和插件扩展性
• 支持多种文件格式

20.2.1 新建图片

在GIMP中创建适合UE5.2的UI元素，首先需要设置正确的文档属性：

在UE5.2中，可以创建一个辅助类来处理GIMP导出的图像：

cpp

// GIMPTextureImporter.h
#pragma once

#include \”CoreMinimal.h\”
#include \”Kismet/BlueprintFunctionLibrary.h\”
#include \”Engine/Texture2D.h\”
#include \”GIMPTextureImporter.generated.h\”

/**
* 用于处理GIMP导出纹理的功能库
*/
UCLASS()
class MYGAME_API UGIMPTextureImporter : public UBlueprintFunctionLibrary
{
GENERATED_BODY()

public:
/**
* 优化从GIMP导入的UI纹理
* @param Texture 要优化的纹理
* @param bPreservePixelArt 是否保持像素艺术的清晰边缘
* @param bGenerateMips 是否生成mipmap
* @return 优化后的纹理
*/
UFUNCTION(BlueprintCallable, Category = \”UI|Textures\”)
static UTexture2D* OptimizeGIMPTexture(UTexture2D* Texture, bool bPreservePixelArt = true, bool bGenerateMips = false);

/**
* 为GIMP图像创建九宫格纹理
* @param Texture 源纹理
* @param BorderLeft 左边框宽度
* @param BorderTop 上边框宽度
* @param BorderRight 右边框宽度
* @param BorderBottom 下边框宽度
* @return 配置为九宫格的纹理
*/
UFUNCTION(BlueprintCallable, Category = \”UI|Textures\”)
static UTexture2D* CreateNineSliceTexture(UTexture2D* Texture, int32 BorderLeft, int32 BorderTop, int32 BorderRight, int32 BorderBottom);
};

// GIMPTextureImporter.cpp
#include \”GIMPTextureImporter.h\”

UTexture2D* UGIMPTextureImporter::OptimizeGIMPTexture(UTexture2D* Texture, bool bPreservePixelArt, bool bGenerateMips)
{
if (!Texture)
{
return nullptr;
}

// 修改纹理设置以优化UI渲染
Texture->SRGB = true; // 使用sRGB颜色空间以正确显示颜色

// 根据像素艺术选项设置过滤模式
Texture->Filter = bPreservePixelArt ? TF_Nearest : TF_Bilinear;

// 设置纹理寻址模式为限制，避免边缘重复
Texture->AddressX = TA_Clamp;
Texture->AddressY = TA_Clamp;

// 设置mipmap生成
Texture->MipGenSettings = bGenerateMips ? TMGS_FromTextureGroup : TMGS_NoMipmaps;

// 应用更改
Texture->UpdateResource();

return Texture;
}

UTexture2D* UGIMPTextureImporter::CreateNineSliceTexture(UTexture2D* Texture, int32 BorderLeft, int32 BorderTop, int32 BorderRight, int32 BorderBottom)
{
if (!Texture)
{
return nullptr;
}

// 创建一个新的带有九宫格信息的纹理
UTexture2D* NineSliceTexture = DuplicateObject<UTexture2D>(Texture, nullptr);

// 设置九宫格边界值
NineSliceTexture->NineSliceBorder.Left = BorderLeft;
NineSliceTexture->NineSliceBorder.Top = BorderTop;
NineSliceTexture->NineSliceBorder.Right = BorderRight;
NineSliceTexture->NineSliceBorder.Bottom = BorderBottom;

// 标记为使用九宫格
NineSliceTexture->bNineSliceBorderSupport = true;

// 应用更改
NineSliceTexture->UpdateResource();

return NineSliceTexture;
}

20.2.2 添加图形组件

在GIMP中设计UI元素时，合理使用图层和组件可以提高工作效率并保持设计灵活性：

对于游戏UI，通常需要创建这些组件：

• 按钮（正常、悬停、按下、禁用状态）
• 面板背景
• 图标
• 进度条
• 框架和装饰元素

在UE5.2中，可以使用这些组件创建完整的UI：

cpp

// UIComponentLibrary.h
#pragma once

#include \”CoreMinimal.h\”
#include \”Kismet/BlueprintFunctionLibrary.h\”
#include \”Engine/Texture2D.h\”
#include \”Components/Button.h\”
#include \”Components/Image.h\”
#include \”Components/ProgressBar.h\”
#include \”UIComponentLibrary.generated.h\”

/**
* UI组件库，用于创建基于GIMP图像的UI元素
*/
UCLASS()
class MYGAME_API UUIComponentLibrary : public UBlueprintFunctionLibrary
{
GENERATED_BODY()

public:
/**
* 使用GIMP创建的图像设置按钮状态
* @param Button 要设置的按钮
* @param NormalTexture 正常状态纹理
* @param HoveredTexture 悬停状态纹理
* @param PressedTexture 按下状态纹理
* @param DisabledTexture 禁用状态纹理
*/
UFUNCTION(BlueprintCallable, Category = \”UI|Components\”)
static void SetupButtonWithGIMPTextures(UButton* Button, UTexture2D* NormalTexture, UTexture2D* HoveredTexture,
UTexture2D* PressedTexture, UTexture2D* DisabledTexture);

/**
* 创建自定义进度条
* @param ProgressBar 要设置的进度条
* @param BackgroundTexture 背景纹理
* @param FillTexture 填充纹理
* @param FillColorOverride 填充颜色覆盖
*/
UFUNCTION(BlueprintCallable, Category = \”UI|Components\”)
static void SetupCustomProgressBar(UProgressBar* ProgressBar, UTexture2D* BackgroundTexture, UTexture2D* FillTexture,
const FLinearColor& FillColorOverride);
};

// UIComponentLibrary.cpp
#include \”UIComponentLibrary.h\”
#include \”Materials/MaterialInstanceDynamic.h\”

void UUIComponentLibrary::SetupButtonWithGIMPTextures(UButton* Button, UTexture2D* NormalTexture, UTexture2D* HoveredTexture,
UTexture2D* PressedTexture, UTexture2D* DisabledTexture)
{
if (!Button)
{
return;
}

// 设置按钮样式
FButtonStyle ButtonStyle = Button->GetStyle();

// 设置不同状态的图像
if (NormalTexture)
{
FSlateBrush NormalBrush;
NormalBrush.SetResourceObject(NormalTexture);
NormalBrush.ImageSize = FVector2D(NormalTexture->GetSurfaceWidth(), NormalTexture->GetSurfaceHeight());
ButtonStyle.Normal = NormalBrush;
}

if (HoveredTexture)
{
FSlateBrush HoveredBrush;
HoveredBrush.SetResourceObject(HoveredTexture);
HoveredBrush.ImageSize = FVector2D(HoveredTexture->GetSurfaceWidth(), HoveredTexture->GetSurfaceHeight());
ButtonStyle.Hovered = HoveredBrush;
}

if (PressedTexture)
{
FSlateBrush PressedBrush;
PressedBrush.SetResourceObject(PressedTexture);
PressedBrush.ImageSize = FVector2D(PressedTexture->GetSurfaceWidth(), PressedTexture->GetSurfaceHeight());
ButtonStyle.Pressed = PressedBrush;
}

if (DisabledTexture)
{
FSlateBrush DisabledBrush;
DisabledBrush.Set