UE入门教程06.03:读取本地文件为纹理并显示

系列索引:UE入门教程索引

基于UE入门教程06.02:创建插件继续操作。

目的

本文介绍如何从本地读取图片,转换为纹理,然后显示到界面上。

工程

和上一篇一样,直接拿过来就可以了。

插件

模块

找到*.Build.cs,找到

1
PublicDependencyModuleNames.AddRange(new string[] { "Core", "CoreUObject", "Engine", "InputCore"});

添加新模块,此模块用于读取图片

1
PublicDependencyModuleNames.AddRange(new string[] { "Core", "CoreUObject", "Engine", "InputCore" ,"ImageWrapper"});

头文件

添加头文件

1
2
3
4
5
6
7
8
#include "Engine/Texture2D.h"
#include "Runtime/Core/Public/Misc/Paths.h"
#include "Runtime/ImageWrapper/Public/IImageWrapper.h"
#include "Runtime/ImageWrapper/Public/IImageWrapperModule.h"
#include "Core\Public\HAL\UnrealMemory.h"
#include "Core\Public\HAL\FileManagerGeneric.h"
#include "Core\Public\HAL\FileManager.h"
#include "Core\Public\Misc\FileHelper.h"

声明

1
2
3
GENERATED_BODY()
UFUNCTION(BlueprintCallable, Category = "MyFun")
static UTexture2D* LoadTexture2D(const FString path, bool& IsValid, int32& OutWidth, int32& OutHeight);

实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
static IImageWrapperPtr GetImageWrapperByExtention(const FString InImagePath)
{
IImageWrapperModule& ImageWrapperModule = FModuleManager::LoadModuleChecked<IImageWrapperModule>(FName("ImageWrapper"));
if (InImagePath.EndsWith(".png"))
{
return ImageWrapperModule.CreateImageWrapper(EImageFormat::PNG);
}
else if (InImagePath.EndsWith(".jpg") || InImagePath.EndsWith(".jpeg"))
{
return ImageWrapperModule.CreateImageWrapper(EImageFormat::JPEG);
}
else if (InImagePath.EndsWith(".bmp"))
{
return ImageWrapperModule.CreateImageWrapper(EImageFormat::BMP);
}
else if (InImagePath.EndsWith(".ico"))
{
return ImageWrapperModule.CreateImageWrapper(EImageFormat::ICO);
}
else if (InImagePath.EndsWith("exr"))
{
return ImageWrapperModule.CreateImageWrapper(EImageFormat::EXR);
}
else if (InImagePath.EndsWith(".icns"))
{
return ImageWrapperModule.CreateImageWrapper(EImageFormat::ICNS);
}
return nullptr;
}

UTexture2D* UMyBlueprintFunctionLibrary::LoadTexture2D(const FString path, bool& IsValid, int32& OutWidth, int32& OutHeight)
{
UTexture2D* Texture = nullptr;
IsValid = false;
if (!FPlatformFileManager::Get().GetPlatformFile().FileExists(*path))
{
return nullptr;
}
TArray<uint8> RawFileData;
if (!FFileHelper::LoadFileToArray(RawFileData, *path))
{
return nullptr;
}
IImageWrapperPtr ImageWrapper = GetImageWrapperByExtention(path);
if (ImageWrapper.IsValid() && ImageWrapper->SetCompressed(RawFileData.GetData(), RawFileData.Num()))
{
TArray<uint8> UncompressedRGBA;
if (ImageWrapper->GetRaw(ERGBFormat::RGBA, 8, UncompressedRGBA))
{
Texture = UTexture2D::CreateTransient(ImageWrapper->GetWidth(), ImageWrapper->GetHeight(), PF_R8G8B8A8);
if (Texture != nullptr)
{
IsValid = true;
OutWidth = ImageWrapper->GetWidth();
OutHeight = ImageWrapper->GetHeight();
void* TextureData = Texture->PlatformData->Mips[0].BulkData.Lock(LOCK_READ_WRITE);
FMemory::Memcpy(TextureData, UncompressedRGBA.GetData(), UncompressedRGBA.Num());
Texture->PlatformData->Mips[0].BulkData.Unlock();
Texture->UpdateResource();
}
}
}
return Texture;
}

控件蓝图

编译运行,打开UE4

在内容中添加一个控件蓝图,名为UMG_Image,给这蓝图添加一个Image控件

控件蓝图

纹理将显示在这控件里面。

关卡蓝图

打开关卡蓝图

关卡蓝图-显示

  • 事件开始运行不用介绍
  • 创建图像控件,就是把显示图像的控件添加到场景里面。
  • 把图像显示控件值保存至独立变量里面,因为图像显示控件只有两个出口,还都被显示控件占用了

关卡蓝图-显示

  • 捕获键盘数字1事件
  • 调用自定义函数,将本地图片转换为纹理,输出图片长宽和纹理数据
  • 通过纹理创建一个画刷
  • 画刷刷什么?当然刷纹理
  • 画刷刷在哪?刷在之前创建的图片控件上,因为图片控件接口有效,我们先获取保存图片控件数据的变量值,这个值所表示的图片作为画板给画刷刷。

效果

编译,运行,效果为

运行效果

参考资料

【UE4插件】Ue4简单插件写法教学

下一篇:UE入门教程06.04:从共享内存加载显示图片


UE入门教程06.03:读取本地文件为纹理并显示
https://feater.top/ue/load-local-image-as-tex-and-display/
作者
JackeyLea
发布于
2023年8月30日
许可协议