Savegame Menu With Screenshot Thumbnails

[Seirei]

Hello everyone!

So for a while now I’ve been wondering how to create something like this. It seems like such a simple tast that is used in a lot of games, but so far I couldn’t really find a tutorial on it.
I currently have a project that uses a savegame to save certain variables. So far it only uses one, but I’d like to be able to save up multiple states and have a little thumbnail of the current camera for it aswell.
So what would be the quickest way to add that functionality to an existing savegame system?

tl;dr
How do I save a screenshot of the current scene and use it as a thumbnail for the save states in my HUD?

[hippowombat]

@Seirei;534698

Hello everyone!

So for a while now I’ve been wondering how to create something like this. It seems like such a simple tast that is used in a lot of games, but so far I couldn’t really find a tutorial on it.
I currently have a project that uses a savegame to save certain variables. So far it only uses one, but I’d like to be able to save up multiple states and have a little thumbnail of the current camera for it aswell.
So what would be the quickest way to add that functionality to an existing savegame system?

tl;dr
How do I save a screenshot of the current scene and use it as a thumbnail for the save states in my HUD?

I’m not familiar with creating save games, though there are plenty of tutorials for that, but you could probably add scene capture 2d component (have it attached to your camera and give it the same transform so that it captures from the same view as your in game camera) in your character blueprint, and each time you save, have it update the capture, and input that capture in an instanced material that’s assigned to a menu widget image piece.

[Seirei]

Hi hippowombat,

I thought about doing something like that, but so far I wasn’t sure if the texture from the scene capture would actually be saved. I noticed that a scene capture 2d loses it’s texture on restart. At least back in 4.8 I had that happening. Guess I’ll just have to try it out then.

[Zarkopafilis]

Scene capture -> Texture2D -> save to savegame

[Seirei]

Will do! Thanks!

[xiaoxiaocg78]

Hello.
Did you finish this function? I also need to do a similar function, can share the experience? Thanks…

[Seirei]

Sadly it didn’t work as expected and we ended up using C++ to save and load the images directly to the HDD.

[NazeerSany]

Can you plz share how to save and load images using c++? Thanks !

[JohnADaniels]

i know this is old, but I am trying to do the same thing, does anyone know of a solution?

[nick_absent]

JohnADaniels. see my post, if you are still interesting in it.

[ProudArts]

I looked at the the post but is did not show how to make the screenshot with BluePrint.

@nick_absent

JohnADaniels. see my post, if you are still interesting in it.

[KelbyVP]

Here’s how I do it with a custom event in my spectator pawn (you would use whatever player pawn you use). My Game Instance calls this event, and this saves the screenshot with whatever file name I designate. My Save Game has a string variable that contains this file name, and my load game widget gets that screenshot file name and imports the screenshot file as a Texture 2D.

[crossmr]

@KelbyVP

Here’s how I do it with a custom event in my spectator pawn (you would use whatever player pawn you use). My Game Instance calls this event, and this saves the screenshot with whatever file name I designate. My Save Game has a string variable that contains this file name, and my load game widget gets that screenshot file name and imports the screenshot file as a Texture 2D.

What node do you use to import the screen as a texture 2D?

[KelbyVP]

My C++ code is below for importing the save file as a Texture2D. (Fair warning, I changed the way I save these screenshots pretty dramatically; I’ll post that separately.) My apologies in advance that I can’t seem to figure out how to post code correctly:

FString USaveGametFunctionLibrary::GetSaveGameScreenshotName(const FString& SaveGameName)
{
return FPaths::ProjectSavedDir() + TEXT(“SaveGames/”) + SaveGameName + TEXT(".png");
}

UTexture2D* USaveGametFunctionLibrary::ImportScreenshotSave(UObject* WorldContextObject, const FString& SaveGameName)
{
FString ScreenshotFile = GetSaveGameScreenshotName(SaveGameName);

if (FPaths::FileExists(ScreenshotFile))
{
return FImageUtils::ImportFileAsTexture2D(ScreenshotFile);
}

return nullptr;
}

[KelbyVP]

Here’s my new approach to saving the screenshots. First, the blueprint:

Next, the C++ SaveScreenshot function:

bool USaveGametFunctionLibrary::SaveScreenshot(
class USceneCaptureComponent2D* Target,
const FLinearColor ClearColour,
const FString SaveGameName)
{
if ((Target == nullptr) || (Target->TextureTarget == nullptr))
{
return false;
}

FRenderTarget* RenderTarget = Target->TextureTarget->GameThread_GetRenderTargetResource();
if (RenderTarget == nullptr)
{
return false;
}

TArray<FColor> RawPixels;

// Format not supported - use PF_B8G8R8A8.
if (Target->TextureTarget->GetFormat() != PF_B8G8R8A8)
{
UE_LOG(LogTemp, Warning, TEXT(“Format not supported - use PF_B8G8R8A8.”));
return false;
}

if (!RenderTarget->ReadPixels(RawPixels))
{
return false;
}

// Convert to FColor.
FColor ClearFColour = ClearColour.ToFColor(false); // FIXME - want sRGB or not?

for (auto& Pixel : RawPixels)
{
// Switch Red/Blue changes.
const uint8 PR = Pixel.R;
const uint8 PB = Pixel.B;
Pixel.R = PB;
Pixel.B = PR;

// Set alpha based on RGB values of ClearColour.
Pixel.A = ((Pixel.R == ClearFColour.R) && (Pixel.G == ClearFColour.G) && (Pixel.B == ClearFColour.B)) ? 0 : 255;
}

IImageWrapperModule& ImageWrapperModule = FModuleManager::LoadModuleChecked<IImageWrapperModule>(FName(“ImageWrapper”));
TSharedPtr<IImageWrapper> ImageWrapper = ImageWrapperModule.CreateImageWrapper(EImageFormat::PNG);

const int32 Width = Target->TextureTarget->SizeX;
const int32 Height = Target->TextureTarget->SizeY;

if (ImageWrapper.IsValid() && ImageWrapper->SetRaw(&RawPixels[0], RawPixels.Num() * sizeof(FColor), Width, Height, ERGBFormat::RGBA, 8))
{
FFileHelper::SaveArrayToFile(ImageWrapper->GetCompressed(), *GetSaveGameScreenshotName(SaveGameName));
return true;
}

return false;
}

[ganbaa_elmer]

@nick_absent @hippowombat @KelbyVP @NazeerSany @crossmr @JohnADaniels How to take selfie on unreal Mobile game?

[SVasilev]

Hey there! I’ve tried spawning SceneCapture2D and then rendering the scene capture to a render target. I was not able to save the resulting Texture2D to a SaveGame file directly (was resulting in a black image) but I was able to save the Texture2D to an actual file on the HDD. I know using C++, this is a rather easy task but I’ve managed to do it in Blueprints only since there were a lot of people interested.

Save binary thumbnail image to      HDD: Save slot thumbnail image posted by anonymous | blueprintUE | PasteBin For Unreal Engine
Load binary thumbnail image from HDD: Load slot thumbnail image posted by anonymous | blueprintUE | PasteBin For Unreal Engine

This is tested on Windows with UE 4.27. I would be happy if someone confirms it works on other platforms as well. Cheers!

[RealmDelight]

This plugin perfectly solves this problem about thumbnail of Texture2D：
Screenshot as Texture2D in Code Plugins - UE Marketplace (unrealengine.com)

[AlexN2]

Here is my solution. I use make screenshot high resolution. I save in project / images directory with 111.png name.

In widget I made ContinueImage which is simple image component and importing image as texture.

May be it will be usefull.