UE4 UMG 웹 이미지 띄우기

 

게임 내 화면은 거의 대부분 이미지 (Texture) 로 이루어진다.

 

하지만 특정 조건에서만 필요한 이미지를 패키징 할 때 모두 넣어버리면 이는 공간 낭비일 수 밖에 없다.

그렇다고 분할 패키징을 하기에는 번거롭고 귀찮은건 사실이다.

따라서, 이번 튜토리얼에서는 웹에서 이미지를 다운로드 받아서 UMG UI 환경에서 띄우는 방법을 알아보겠다.

 

또한 이 튜토리얼을 응용하면 UPaperSprite2D 등의 스폰 가능한 형태로 변환하여 UI 환경을 벗어나

더 다양하게 응용 할 수 있을거라고 기대한다.

 

UImage 를 상속받는 클래스 만들기

클래스 만들기 앞서서 C++ 만 아래 작업이 가능한 사실을 알린다.

http 모듈을 사용해야하는데, 이는 C++ 에서만 사용 가능하기 때문이다.

 

UImage 를 상속받는 클래스를 하나 만든다.

 

 

필자는 /Library/Widgets/ 폴더에 UWebImageView 라는 클래스를 만들었다.

 

 

몇 가지 기능 추가하기

헤더파일 수정

 

이미지 소스를 가리키는 URL 을 저장할 변수를 하나 만들어야 한다.

 

필자는 SourceImage 라는 변수를 사용했다.

이 변수는 에디터에서 수정 가능하고, 블루프린트에서는 읽기만 가능하도록 만들었다.

public:
	UWebImageView();

	UPROPERTY(BlueprintReadOnly, EditAnywhere, Category = "WebImageView|Settings")
	FString SourceImage;

 

SetImageFromWeb() 함수를 호출하면, SourceImage 에 지정된 URL의 이미지를 다운로드 받고

자기 자신에게 이미지를 설정 하게 한다.

public:
	UFUNCTION(BlueprintCallable, Category = "WebImageView")
	void SetImageFromWeb();

 

몇 가지 내장 함수와 변수를 선언한다.

OnHttpRequestFinishedCallback() 는 http 요청이 끝나고 응답을 받을 콜백 함수 이고,

HttpModule 변수는 언리얼에서 제공하는 http 모듈에 대한 포인터 이다.

private:
	void OnHttpRequestFinishedCallback(FHttpRequestPtr Request, FHttpResponsePtr Response, bool bWasSuccessful);
	
	FHttpModule* HttpModule;

 

.h 파일 정의를 이정도로 마치겠다.

.cpp 파일로 이동하여 해당 함수들을 구현하자.

 

cpp 파일 수정

생성자에서는 HttpModule 을 만드는 작업을 했다.

UWebImageView::UWebImageView()
{
    HttpModule = &FHttpModule::Get();
}

관련 레퍼런스는 아래에 남기겠다.

FHttpModule | Unreal Engine Documentation

FHttpModule

 

SetImageFromWeb() 함수를 구현한다.

void UWebImageView::SetImageFromWeb()
{    
    TSharedPtr<IHttpRequest> HttpRequest = HttpModule->CreateRequest();
    HttpRequest->SetVerb("GET");
    HttpRequest->SetURL(this->SourceImage);
    HttpRequest->OnProcessRequestComplete().BindUObject(this, &UWebImageView::OnHttpRequestFinishedCallback);
    HttpRequest->ProcessRequest();
}

본 함수는 GET 방식으로 HTTP 요청을 날린다.

날릴 위치는 우리가 설정한 SourceImage 에 정의되어 있다.

또한, OnHttpRequestFinishedCallback() 함수를 콜백으로 설정했다. 요청이 끝나면 해당 함수로 알려 줄 것이다.

 

 

OnHttpRequestFinishedCallback() 함수를 구현한다.

void UWebImageView::OnHttpRequestFinishedCallback(FHttpRequestPtr Request, FHttpResponsePtr Response, bool bWasSuccessful)
{
    UTexture2D* OutputTexture = UKismetRenderingLibrary::ImportBufferAsTexture2D(GetWorld(), Response->GetContent());
    SetBrushFromTexture(OutputTexture);
}

필자는 간단히 필요한 부분만 추가했는데, bWasSuccessful 변수를 통해 요청을 정상적으로 수행 했는지 확인하거나

버퍼 데이터가 잘 있는지 확인 하는 작업 등 몇 가지 검증작업이 필요해보인다.

 

KismetRenderingLibrary 에는 버퍼 또는 파일 경로를 통해 Texture2D 데이터를 만들어내는 함수가 있다.

해당 함수를 사용하면, 웹에서 받아온 이미지 버퍼를 Texture2D 데이터로 만들 수 있다.

마지막으로 SetBrushFromTexture() 함수를 호출하여 만들어진 텍스쳐를 self 에 적용 시킨다.

 

UKismetRenderingLibrary 에 대한 레퍼런스는 아래 링크를 참고하자.

UKismetRenderingLibrary | Unreal Engine Documentation

UKismetRenderingLibrary

 

.Build.cs 파일 수정

http 모듈을 사용했으므로, 의존성 배열에 이를 추가해야한다.

프로젝트의 .Build.cs 파일로 이동해서 "Http" 를 추가한다.

 

 

빌드 후 사용하기

사용 방법은 매우 간단하다.

 

위젯 블루프린트를 하나 만들고, 팔레트에서 본인 클래스 이름을 검색해본다.

 

오른쪽에 배치하여 위젯을 만든다.

디테일 패널에 가보면 SourceImage 라는 변수가 새로 있다.

 

(필자는 캐싱 기능을 추가적으로 구현해서 UseCache 라는 bool 변수가 함께 있다.

 이 기능을 추가로 구현해보고 싶다면 포스팅 맨 아래 업로드 해 둔 C++ 파일을 확인하자.)

 

 

SourceImage 변수에 이미지 URL 을 입력한다.

 

그래프로 이동해서 아래와 같이 간단한 스크립트를 작성해준다.

 

 

마지막으로, Pawn 을 생성하고 위젯을 만드는 코드를 작성하여 플레이어 화면에

위젯이 보이도록 한다.

 

 

간단한 코드로 언리얼 내에서 웹 이미지를 띄울 수 있게 되었다.

 

사실, 앞서 작성한 코드로는 실제 개발환경에서 활용하기에 무리가 있다.

위젯이 만들어 질 때 마다 새로 다운로드 해야해서 서버 측 트래픽 관리에 문제가 생길 수 있다.

 

이를 해결한 코드를 함께 첨부했다. 캐싱 기능이 궁금한 독자는 아래 코드를 추가로 분석해보면 좋겠다.

 

UWebImageView.cpp 파일

colorscripter.com/s/VakLGQT

공유된 코드 - Color Scripter

 

UWebImageView.h 파일

colorscripter.com/s/Pvj4sQI

공유된 코드 - Color Scripter