[UE4]UImage控件异步加载资源并设置图片内容

已于 2023-04-01 18:52:11 修改
阅读量1k 收藏
点赞数
分类专栏： UE4 文章标签： ue4 自定义Image控件
于 2023-04-01 11:53:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zfsr05255134/article/details/129895002
版权

UE 异步加载是指在 Unreal Engine 中使用异步加载技术，使得游戏对象（比如静态网格、贴图、声音等）可以在不影响游戏运行的情况下逐步加载。这种方式可以优化游戏性能和降低内存占用，提高游戏的流畅度和稳定性。

自定义Image控件实现资源异步加载并设置图片:C++新建类UImageAsyn继承UImage实现图片异步加载设置。

1.包含必须的模块

//在 xx项目名字.Build.cs 文件中引入"Paper2D","SlateCore"模块,否则编译无法通过
PublicDependencyModuleNames.AddRange(new string[] { "Core", "CoreUObject", "Engine", "InputCore", "UnLua", "UMG", "Paper2D", "Slate", "SlateCore" });

2.代码实现自定义控件ImageAsyn

ImageAsyn.h

// Fill out your copyright notice in the Description page of Project Settings.
#pragma once
#include "CoreMinimal.h"
#include "Components/Image.h"
#include "ImageAsyn.generated.h"

DECLARE_DYNAMIC_DELEGATE_OneParam(FSetImgResultDelegate, bool, bSucced);

/**
 * UImage组件异步加载资源并设置图片内容
 */
UCLASS()
class BOMBERMAN_API UImageAsyn : public UImage
{
	GENERATED_BODY()

public:
	/// <summary>
	/// 设置图片:异步/同步 加载
	/// </summary>
	UFUNCTION(BlueprintCallable)
		void SetImgWithPath(FString ImgPath, bool bMatchSize, bool bAsyn, FSetImgResultDelegate InDelegate);
	/// <summary>
	/// 设置图片:同步 加载
	/// </summary>
	/// <param name="imgPath"></param>
	/// <param name="bMatchSize"></param>
	UFUNCTION(BlueprintCallable)
		void SetImgWithPathSyn(FString ImgPath, bool bMatchSize, FSetImgResultDelegate InDelegate);
	/// <summary>
	/// 设置图片:异步 加载
	/// </summary>
	/// <param name="imgPath"></param>
	/// <param name="bMatchSize"></param>
	UFUNCTION(BlueprintCallable)
		void SetImgWithPathAsyn(FString ImgPath, bool bMatchSize, FSetImgResultDelegate InDelegate);
	UFUNCTION()
		void SetImgAsset(UObject* assetObject, FSetImgResultDelegate InDelegate);

protected:
	UPROPERTY()
		FString mImgPath;
	UPROPERTY()
		bool mBMatchSize;

	UFUNCTION()
		FSlateBrush MakeBrushFromSprite(UPaperSprite* Sprite, int32 Width, int32 Height);
	UFUNCTION()
		void OnAssetAsynLoadedTwoParam(FSoftObjectPath SoftPath, FSetImgResultDelegate InDelegate);

#if WITH_EDITOR
public:
	UFUNCTION(BlueprintCallable)
		void TestFunc();

#endif
};

ImageAsyn.cpp

// Fill out your copyright notice in the Description page of Project Settings.
#include "ImageAsyn.h"
#include <Engine/AssetManager.h>
#include <PaperSprite.h>

void UImageAsyn::SetImgWithPath(FString ImgPath, bool bMatchSize, bool bAsyn, FSetImgResultDelegate InDelegate)
{
	if (bAsyn)
	{
		this->SetImgWithPathAsyn(ImgPath, bMatchSize, InDelegate);
	}
	else
	{
		this->SetImgWithPathSyn(ImgPath, bMatchSize, InDelegate);
	}
}

void UImageAsyn::SetImgWithPathSyn(FString ImgPath, bool bMatchSize, FSetImgResultDelegate InDelegate)
{
	this->mImgPath = ImgPath;
	this->mBMatchSize = bMatchSize;

#if WITH_EDITOR
	UE_LOG(LogTemp, Log, TEXT("UImageAsyn::SetImgWithPathSyn(),imgPath=[%s],bMatchSize=[%s]"), *ImgPath, bMatchSize ? TEXT("True") : TEXT("False"));
#endif
	bool bShortPackageName = FPackageName::IsShortPackageName(this->mImgPath);
	if (bShortPackageName)
	{
#if !UE_BUILD_SHIPPING && !UE_BUILD_TEST
		UE_LOG(LogTemp, Error, TEXT("UImageAsyn::SetImgWithPathSyn(),imgPath =[%s],bShortPackageName=[false],You must pass in fully qualified palified package names"), *ImgPath);
#endif
		this->SetBrushFromTexture(nullptr, this->mBMatchSize);
		InDelegate.ExecuteIfBound(false);
		return;
	}

	FSoftObjectPath SoftPath = FSoftObjectPath(ImgPath);
	if (!SoftPath.IsValid())
	{
#if !UE_BUILD_SHIPPING && !UE_BUILD_TEST
		UE_LOG(LogTemp, Error, TEXT("UImageAsyn::SetImgWithPathSyn(),imgPath =[%s],SoftPath.IsValid=[false],Failed!!"), *ImgPath);
#endif
		this->SetBrushFromTexture(nullptr, this->mBMatchSize);
		InDelegate.ExecuteIfBound(false);
		return;
	}

	UObject* myAsset = SoftPath.ResolveObject();
	if (nullptr == myAsset)
	{
#if WITH_EDITOR
		UE_LOG(LogTemp, Log, TEXT("UImageAsyn::SetImgWithPathSyn(),TryLoad(),imgPath =[%s]"), *ImgPath);
#endif
		myAsset = SoftPath.TryLoad();
		this->SetImgAsset(myAsset, InDelegate);
	}
	else
	{
		this->SetImgAsset(myAsset, InDelegate);
	}
}

void UImageAsyn::SetImgWithPathAsyn(FString ImgPath, bool bMatchSize, FSetImgResultDelegate InDelegate)
{
	this->mImgPath = ImgPath;
	this->mBMatchSize = bMatchSize;

#if WITH_EDITOR
	UE_LOG(LogTemp, Log, TEXT("UImageAsyn::SetImgWithPathAsyn(),imgPath=[%s],bMatchSize=[%s]"), *(this->mImgPath), this->mBMatchSize ? TEXT("True") : TEXT("False"));
#endif

	bool bShortPackageName = FPackageName::IsShortPackageName(this->mImgPath);
	if (bShortPackageName)
	{
#if !UE_BUILD_SHIPPING && !UE_BUILD_TEST
		UE_LOG(LogTemp, Error, TEXT("UImageAsyn::SetImgWithPathAsyn(),imgPath =[%s],bShortPackageName=[false],You must pass in fully qualified palified package names"), *ImgPath);
#endif
		this->SetBrushFromTexture(nullptr, this->mBMatchSize);
		InDelegate.ExecuteIfBound(false);
		return;
	}

	FSoftObjectPath SoftPath = FSoftObjectPath(ImgPath);
	if (!SoftPath.IsValid())
	{
#if !UE_BUILD_SHIPPING && !UE_BUILD_TEST
		UE_LOG(LogTemp, Error, TEXT("UImageAsyn::SetImgWithPathAsyn(),imgPath =[%s],SoftPath.IsValid=[false],Failed!!"), *ImgPath);
#endif
		this->SetBrushFromTexture(nullptr, this->mBMatchSize);
		InDelegate.ExecuteIfBound(false);
		return;
	}

	UObject* myAsset = SoftPath.ResolveObject();
	if (nullptr == myAsset)
	{
#if WITH_EDITOR
		UE_LOG(LogTemp, Log, TEXT("UImageAsyn::SetImgWithPathAsyn(),RequestAsyncLoad(),imgPath =[%s]"), *ImgPath);
#endif
		UAssetManager::GetStreamableManager().RequestAsyncLoad(SoftPath, FStreamableDelegate::CreateUObject(this, &UImageAsyn::OnAssetAsynLoadedTwoParam, SoftPath, InDelegate));
	}
	else
	{
		this->SetImgAsset(myAsset, InDelegate);
	}
}

void UImageAsyn::OnAssetAsynLoadedTwoParam(FSoftObjectPath SoftPath, FSetImgResultDelegate InDelegate)
{
#if WITH_EDITOR
	UE_LOG(LogTemp, Log, TEXT("UImageAsyn::OnAssetAsynLoadedTwoParam(),RequestAsyncLoad(),imgPath =[%s],SoftPath.IsValid=[false],Failed!!"), *(this->mImgPath));
#endif
	UObject* myAsset = SoftPath.ResolveObject();
	this->SetImgAsset(myAsset, InDelegate);
}

void UImageAsyn::SetImgAsset(UObject* assetObject, FSetImgResultDelegate InDelegate)
{
#if WITH_EDITOR
	UE_LOG(LogTemp, Log, TEXT("UImageAsyn::SetImgAsset(),start,imgPath=[%s],bMatchSize=[%s]"), *(this->mImgPath), this->mBMatchSize ? TEXT("True") : TEXT("False"));
#endif

	if (nullptr == assetObject)
	{
#if !UE_BUILD_SHIPPING && !UE_BUILD_TEST
		UE_LOG(LogTemp, Error, TEXT("UImageAsyn::SetImgAsset(),imgPath =[%s],nullptr == assetObject,Failed!!"), *(this->mImgPath));
#endif
		this->SetBrushFromTexture(nullptr, this->mBMatchSize);
		InDelegate.ExecuteIfBound(false);
		return;
	}

	UTexture2D* textrue = Cast<UTexture2D>(assetObject);
	if (nullptr != textrue)
	{
#if WITH_EDITOR
		UE_LOG(LogTemp, Log, TEXT("UImageAsyn::SetImgAsset(),UTexture2D,imgPath=[%s],bMatchSize=[%s]"), *(this->mImgPath), this->mBMatchSize ? TEXT("True") : TEXT("False"));
#endif
		this->SetBrushFromTexture(textrue, this->mBMatchSize);
		InDelegate.ExecuteIfBound(true);
	}
	else
	{
		UPaperSprite* paperSprite = Cast<UPaperSprite>(assetObject);
		if (nullptr != paperSprite)
		{
#if WITH_EDITOR
			UE_LOG(LogTemp, Log, TEXT("UImageAsyn::SetImgAsset(),UPaperSprite,imgPath=[%s],bMatchSize=[%s]"), *(this->mImgPath), this->mBMatchSize ? TEXT("True") : TEXT("False"));
#endif
			if (this->mBMatchSize)
			{
				FSlateBrush brush = this->MakeBrushFromSprite(paperSprite, 0, 0);
				this->SetBrush(brush);
				InDelegate.ExecuteIfBound(true);
			}
			else
			{
				FSlateBrush brush;
				brush.ImageSize = this->Brush.ImageSize;
				brush.Margin = this->Brush.Margin;
				brush.Tiling = this->Brush.Tiling;
				brush.SetResourceObject(assetObject);
				brush.DrawAs = this->Brush.DrawAs;
				brush.Mirroring = this->Brush.Mirroring;

				this->SetBrush(brush);
				InDelegate.ExecuteIfBound(true);
			}
		}
		else
		{
			UMaterialInstance* material = Cast<UMaterialInstance>(assetObject);
			if (nullptr != material)
			{
#if WITH_EDITOR
				UE_LOG(LogTemp, Log, TEXT("UImageAsyn::SetImgAsset(),UMaterialInstance,imgPath=[%s],bMatchSize=[%s]"), *(this->mImgPath), this->mBMatchSize ? TEXT("True") : TEXT("False"));
#endif
				this->SetBrushFromMaterial(material);
				InDelegate.ExecuteIfBound(true);
			}
			else
			{
#if !UE_BUILD_SHIPPING && !UE_BUILD_TEST
				UE_LOG(LogTemp, Error, TEXT("UImageAsyn::SetImgAsset(),Cast Failed,imgPath=[%s],bMatchSize=[%s]"), *(this->mImgPath), this->mBMatchSize ? TEXT("True") : TEXT("False"));
#endif
				this->SetBrushFromTexture(nullptr, this->mBMatchSize);
				InDelegate.ExecuteIfBound(false);
			}
		}
	}
}

FSlateBrush UImageAsyn::MakeBrushFromSprite(UPaperSprite* Sprite, int32 Width, int32 Height)
{
	if (Sprite)
	{
		const FSlateAtlasData atlasData = Sprite->GetSlateAtlasData();
		const FVector2D Size = atlasData.GetSourceDimensions();

		FSlateBrush brush;
		brush.SetResourceObject(Sprite);
		Width = Width > 0 ? Width : Size.X;
		Height = Height > 0 ? Height : Size.Y;
		brush.ImageSize = FVector2D(Width, Height);
		return brush;
	}

	return FSlateNoResource();
}

#if WITH_EDITOR

void UImageAsyn::TestFunc()
{
	UE_LOG(LogTemp, Log, TEXT("UImageAsyn::TestFunc"));
}
#endif

3.UMG蓝图调用测试

将自定义ImageAsyn控件拖入到UMG蓝图中，调用ImageAsyn控件函数SetImgWithPathAsyn()测试异步加载设置。

iDaDi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
UE4/UE5 图片读取加载写入插件
04-20
支持读取下载本地图片 支持读取下载网络图片 C++和蓝图混合使用 支持蓝图可视化 蓝图节点有三个全局静态函数支持蓝图使用
UE4 Async Loading Screen真异步加载插件使用傻瓜式教程
usernamespace的博客
03-31 5166
因为游戏关卡资源比较多，载入游戏时需要卡很久，所以今天找了很久虚幻四实现异步场景加载的教程，最后发现虚幻商城有一个免费开源的插件，可以很方便的实现异步场景加载，下面是我使用该插件的一些步骤： 首先在虚幻商城中将插件安装至引擎，然后重启UE4 然后在UE4-编辑-插件中勾选启用Async Loading Screen 启用该插件之后，项目设置中会多出一个选项卡，就叫Async Loading Screen 这里推荐配合B站UP主亚纳虚幻学院的教程食用https://w.
UE4_蓝图异步节点_异步加载图片
Good_night_001的博客
03-09 216
【代码】UE4_蓝图异步节点_异步加载图片。
关于UE4动态资源加载(蓝图类)
热门推荐
u011718663的博客
04-21 5万+
本帖纯属个人原创，如有转载请注明出处 需要注意的几点： 1.调试环境下进行的资源加载方式到打包出来后不一定能够使用。 2.假如遇到调试模式下程序运行正常，但是打包出来后程序crash，可以查看log： Saved/Logs/filename/log 3.资源路径的代码书写格式 map : "Game/Maps/Main.map" 蓝图类 : "Game/Blueprint/Skil
uImage kernel
12-25
uImage
[UE4] UI部分
selfsongs
11-17 3113
UE 4 UI部分参考UMG基础3D UIUI适配 参考 UMG UI设计器快速入门 UE4入门之路（UI篇）：UMG系统介绍 关卡蓝图UI UMG基础 虚幻示意图形界面设计器（Unreal Motion Graphics UI Designer）(UMG) 是一个可视化的UI创作工具，可以用来创建UI元素，如游戏中的HUD、菜单或您希望呈现给用户的其他界面相关图形。 UMG的核心是控件，这些控件是一系列预先制作的函数，可用于构建界面（如按钮、复选框、滑块、进度条等）。这些控件在专门的控件蓝图中编辑，该蓝图
UE4之读取图片并纹理贴图显示
07-11 6179
参考： 谢谢这位大哥，按照你的讲解，做了一个出来。 https://www.bilibili.com/video/BV1UE411Z7uY?t=1496 步骤一： 添加模块引用 PrivateDependencyModuleNames.AddRange( new string[] { "CoreUObject", "Engine", "Slate", "SlateCore", "ImageWrapper" // ... add.
虚幻4加载实时图片
A_01BeiBei的博客
12-08 1144
还有就是用插件加载，给后端一个请求，后端返给你图片，用代码把图片接过来，还是加载。流程都一样 节点就够了,插件基本是接数据的，写起来巨麻烦 就不更了 有需要私聊吧。URL：图片的URL 直接复制粘贴 百度直接搜就行（点击图片>>右键>>复制图像链接）PS：返回的动态2d纹理 也就是说 贴图直接可以选 材质就动态材质那套就行了。1.可以使用虚幻自带的的节点（Download Image）自己做个UMG（放个图片接一下）在ui里写个接图片的东西，我喜欢用自定义事件接。测试一下 有没有加载就OK了。
微信小程序rich-text富文本 图片自适应宽度 最简单的解决方案
祎祎的博客
11-25 1969
今天使用微信小程序里面的富文本组件的时候，出现了图片宽度太大无法自适应的问题 像这样 图片无法展示完整 解决方法 我们在获取到这个图片数据的时候，给他加一个class样式 像这样 this.setData({ introduceList:data.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto"') }) 就可以解决啦 ...
UE4下载与存储图片
执手画眉弯的博客
02-26 4210
UE4 从网络端下载图片并且缓存到本地 从网络端下载一个图片，并且在UI上显示出来，然后再缓存到本地文件中，方便下次使用。 下载图片 UE4官方提供了一个异步任务类，专门处理下载图片的需求。 DECLARE_DYNAMIC_MULTICAST_DELEGATE_OneParam(FDownloadImageDelegate, UTexture2DDynamic*, Texture); UCLASS() class UMG_API UAsyncTaskDownloadImage : public UBlue
Linux内核编译问题2/make uImage 出错
08-03
Linux-2.6.22.6/ arm-linux-gcc-4.4.3 在安装了ncurses devel套件后，可以成功执行 make mecuconfig，于是接下来就是make uImage，此步出现了相关内核编译问题，具体解决办法可见文本内容。
mkimage将kernel打包成uImage的工具
09-07
mkimage是将kernel打包成uImage的工具，编译代码的时候发现系统缺少mkimage工具，于是将以前系统上的mkimage拷贝过来，竟然就正常生成uImage了，如果遇到编译kernel无法生成uImage可以下载这个试试。
linux内核uImage
12-11
linux2.6.32.2 uImage
linux-2.6 uImage
08-30
uImage 可直接放在tftp目录下，启动Uboot后就可以加载内核
[UE4]Unreal/UE4项目目录结构+如何删除C++文件
iDaDi的博客
05-13 6549
文件目录说明以及作用： Binaries：（可删除）存放编译生成的结果二进制文件。该目录可以gitignore,反正每次都会生成。 Config：（不可删除）配置文件。 Content：（不可删除）平常最常用到，所有的资源和蓝图等都放在该目录里。 DerivedDataCache：（可删除）“DDC”，存储着引擎针对平台特化后的资源版本。比如同一个图片，针对不同的平台有不同的适合格式，这个时候就可以在不动原始的uasset的基础上，比较轻易的再生成不同格式资源版本。gitignore。 Inter
[UE4]委托代理：单播委托，多播委托，动态单播委托，动态多播委托，事件
iDaDi的博客
08-11 6388
注意：在声明动态多播委托（DECLARE_DYNAMIC_MULTICAST_DELEGATE）时，DelegateName 参数必须以字符 'F' 开头，否则编译无法通过。 最好时声明所有委托时，DelegateName参数都以字符 'F' 开头，这样就没有问题了。 报错参考如下： ...
[UE4]epic/UE4关于win7报错缺失api-ms-win-downlevel-kernel32-l2-1-0
iDaDi的博客
05-29 5920
是新版本的故障，忽略后正常运行，理论上不会有影响。 如果想不显示这个可以下一个这文件放Windows\System32。 关于客服：回复认为是windows故障不处理，然而经过实践重装新纯净win7根本没这文件，也没有找到软件包含该文件，八成epic自己搞错了。 ...
[UE4]assert断言Check()/Verify()/Ensure()
iDaDi的博客
02-22 5404
虚幻引擎4（UE4）提供 assert 等同项的三个不同族系：check、verify 和 ensure。若要检查这些功能背后的代码，可在 Engine/Source/Runtime/Core/Public/Misc/AssertionMacros.h 中找到相关的宏。各个功能的行为略有不同，但它们都是开发期间使用的诊断工具，目标大致相同。
[UE4]UE4输出日记到屏幕/控制台(UE_LOG)与自定义日记类别
iDaDi的博客
08-09 4990
1.UE4输出日记到屏幕/控制台(UE_LOG) 2.自定义日记类别
uview加载本地图片
最新发布
12-24
另外，如果是在JavaScript中动态加载本地图片，则可以使用uImage组件的JavaScript版本，即uImageJS，并通过动态数据绑定的方式绑定图片的路径，例如： ```javascript <u-image-js :src="imageUrl"></u-image-js> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值