Async Loading Screen

About
Are you looking for a loading system without Level Streaming? If yes, then you already found GOLD :cool:

Normally, you have to use Level Streaming for loading screens due to User Widget is destroyed at level transition, and level loading runs on the main thread, it blocks any other game activities until it’s completed. You will need to manually control which object is loaded/unloaded. You can’t use different Game Mode, Player Controller for each level, and sometimes there’s still occasional freezing.

That said, you may need to change your game logic to fit with Level Streaming mechanic and it requires a lot of works to achieve a simple thing: Add a Loading Screen. To create a custom loading screen without Level Streaming, you have to do it in Unreal C++. However, this is a hard task for artists and designers, even for developers who are not familiar with the Slate framework and engine module code. Async Loading Screen plug-in comes to a savior.

Async Loading Screen allows you to easily configure a Loading Screen System in the project settings, and automatically add a Loading Screen whenever you open a new level. Async Loading Screen also comes with pre-design UI layouts and default icons that make it easy to custom your loading screen in a few minutes (less than 5 minutes I swear).

Trailer

How it works

Async Loading Screen uses MoviePlayer to play a movie at level transition, on a different thread than game thread. MoviePlayer is not only playing movie files but also can display a Slate widget on top of the movie. We use this widget for the loading screen.

MoviePlayer is registered to PreLoadMap and PostLoadMapWithWorld delegates so it will be called and shut down automatically by the engine whenever you open a new level.

Features

  • Easy to set up, easy to use
  • Customizable premake responsive layouts.
  • Customizable loading icons.
  • Supported animating images sequence.
  • Supported on all major platforms.
  • Easily play movies, audio files.
  • No need for coding.
  • No temporary maps, no level streaming.
  • Automatically handles all level transitions.
  • Integrates seamlessly with an existing project.
  • Free and Open Source (Hell Yeah!)

Changelog

Version 1.2 (11/01/2021):

  • Added new blueprint library function Stop Loading Screen. To use this function, you must enable the Allow Engine Tick option. Call this function in BeginPlay event to stop the Loading Screen (works with Delay node):

https://user-images.githubusercontent.com/1840964/104131830-a3f22300-53ab-11eb-8543-3e8ba6ef2609.png
​

  • Added Show Loading Complete Text option and Loading Complete Text Settings section, which show a text when level loading is complete. Note that you need to set Wait For Manual Stop = true, and Minimum Loading Screen Display Time = -1, this also allows players press any key to stop the Loading Screen by themself.

Show Loading Complete Text Settings:

https://user-images.githubusercontent.com/1840964/104131945-896c7980-53ac-11eb-870a-b7987364f00c.png
​

Example:

https://user-images.githubusercontent.com/1840964/104131958-ad2fbf80-53ac-11eb-92a7-8951cbe2061e.png

**------------------------------------------------------------------------------------------------------------------------------------------------------

Version 1.1 (14/09/2020):**

  • Added Shuffle option in the movie setting.
  • Implemented set specific background/tip/movie for each level.
  • Added SetDisplayBackgroundManually, SetDisplayTipTextManually, SetDisplayMovieManually options.
  • Changed TipWidgetVerticalPadding to BorderVerticalOffset in Center Layout settings.
  • Changed WidgetHorizontalPadding to BorderHorizontalOffset in Sidebar Layout settings.
  • Add Async Loading Screen Function Library with 3 Blueprint functions:
    https://user-images.githubusercontent.com/1840964/93088595-577c2c80-f6c4-11ea-8f23-ec9d065277dc.png
    ](https://user-images.githubusercontent.com/1840964/93088595-577c2c80-f6c4-11ea-8f23-ec9d065277dc.png)

Architecture

Async Loading Screen Settings:

https://user-images.githubusercontent.com/1840964/91760594-d02bb500-ebfd-11ea-85fc-08c5a556a903.png

Async Loading Screen has four main components: Background, Loading Widget, Tip Widget, and Layout.

https://user-images.githubusercontent.com/1840964/92531295-33e65b80-f258-11ea-98d7-489521a93a87.png

  • The background is a static image, you can add many images as you want, it will be displayed randomly. Leave it empty if you just want to show a movie instead of a static image.
  • The Tip Widget is just some useful texts that will be shown randomly for players to have something to look at while waiting for a new level loaded.
  • Loading Widget is the most important component of the plug-in, Loading Widget lets players know that the game is still running and not freezing. Loading Widget has two parts: Loading Icon and Loading Text. The Loading Text is just a text shown beside the Loading Icon, we mostly care about the Loading Icon. Async Loading Screen supports 3 types of Loading Icon: Throbber, Circular Throbber, and Image Sequence.

Throbber loading icon examples:

https://user-images.githubusercontent.com/1840964/92412452-1fca2d80-f176-11ea-838e-a5ccb55ea72d.gif
​

Circular Throbber loading icon examples:

https://user-images.githubusercontent.com/1840964/92412750-450b6b80-f177-11ea-8af8-9eb68cea0155.gif
​

Image Sequence loading icon examples:

https://user-images.githubusercontent.com/1840964/92413859-2fe50b80-f17c-11ea-9254-74ebd073a0eb.gif
​

https://user-images.githubusercontent.com/1840964/92413848-26f43a00-f17c-11ea-8f72-c658e3f904a0.gif
​

Layout

This is the way Async Loading Screen widgets are arranged on the screen. In version 1.0 Async Loading Screen supports 5 different Layouts: Classic, Center, Letterbox, Sidebar, and Dual Sidebar.

Note: Background images are not included in the plugin

Classic layout example:

https://user-images.githubusercontent.com/1840964/92415877-14cac980-f185-11ea-870a-dc8a7e7d68ea.jpg
​

Center layout example:

https://user-images.githubusercontent.com/1840964/92416035-c833be00-f185-11ea-8d7d-625b4166ca26.jpg
​

Letterbox layout example:

https://user-images.githubusercontent.com/1840964/92416029-c2d67380-f185-11ea-92f9-f7f9021b825f.jpg
​

Sidebar layout example:

https://user-images.githubusercontent.com/1840964/92416031-c4a03700-f185-11ea-9938-b63f1a2971fa.jpg
​

Dual Sidebar layout example:

https://user-images.githubusercontent.com/1840964/92416037-c964eb00-f185-11ea-8ed4-086bb49fc52a.jpg
​

Tutorial
Visit Tutorialsection on Github to learn how to use Async Loading Screen.

Showcases

https://user-images.githubusercontent.com/1840964/93096502-ac24a500-f6ce-11ea-9f6a-613c7a6bb926.gif

https://user-images.githubusercontent.com/1840964/99428459-41475280-2939-11eb-86a5-b27f39b73037.png


If you’re using Async Loading Screen plugin in your game and would like to showcase here, shoot me an email to [EMAIL=“truongbui1689@gmail.com”]truongbui1689@gmail.com about your game’s info, including screenshots(gif/png/jpeg/video) of your in-game loading screen.


Marketplace: https://www.unrealengine.com/marketp…loading-screen
Document and Tutorial: GitHub - truong-bui/AsyncLoadingScreen: Async Loading Screen is a free and open-source plugin for Unreal Engine. Async Loading Screen allows you to easily configure a Loading Screen System in the project settings, and automatically add a Loading Screen whenever you open a new level, without Level Streaming.
Donate: Async Loading Screen plugin is free and opensource so if the plugin is useful for you or your team, you can buy me a coffee to support this project.

Acknowledgment
Async Loading Screen plug-in is inspired from Loading Screen plug-in by @NickDarnell

10 Likes

Hi,

This is a great plugin and worth a lot. That said I really admire you for making the decision to make it free for us. Thank you.

And now to the code itself. I have been using Darnell’s LoadingScreen for a long time, trying to modify it (kinda works), and I have one burning question that I couldn’t figure out: how to manually stop the MoviePlayer (for instance I don’t want to play the loading screen before loading the MainMenu level). What I have tried to do:

  • UGameplayStatics::GetCurrentLevelName(GetWorld())) == GetMainMenuLevelName.ToStrin() -> just compared the names
  • GetMoviePlayer()->StopMovie(); -> called when condition is met

This didn’t work very well, it sometimes didn’t show up at all. But I guess it was my mistake.
Anyway, the real pain comes when you set bWaitForManualStop = true. In this case, you must somehow stop the MoviePlayer (level loading is done, but spawning actors and setting their positions from a saved game is not yet done, so I want the LoadingScreen to be preset). In this scenario I have a function that is broadcasted:

  • FOnLoadingCompleted OnLoadingCompleted
  • OnLoadingCompleted calls GetMoviePlayer()->StopMovie();

Yet the LoadingScreen doesn’t disappear. I know this is a big step above the support of the plugin yet I would like to ask you if you know about any solution to solve this mystery :slight_smile: To me it appears that the StopMovie() function doesn’t work properly. I took a look into the code of the StopMovie, all steps to stop the Movie were met, yet nothing happened.
My workaround is very primitive, I have created WBP that has only a black image and is displayed until OnLoadingCompleted is called, but you can imagine that the full loading screen logic would be much nicer.

From this, I have a suggestion for two possible enhancements:

  • Add a new function (might be BlueprintCallable) that will force stop the LoadingScreen display
  • Add an ability to specify Levels (by FString name) that are not affected by the LoadingScreen (even tho it can be done easily in code by myself)

Thanks for the great plugin once again!

Dominik

it there a way to only load specific loading image?

Do you mean to set only a background UTexture2D and nothing else? I guess this will work quite fine. I think you can leave the Loading Widget and Tip Widget null if you need to. Try it out and let us know!

You’re welcome TheStoryTellers,

I was able to manually stop the Loading Screen in the plugin module code, but unable to execute that function in blueprint while Loading Screen was showing. I think if the Loading Screen is showing, then the game thread still blocks other game logics even all levels have been loaded. That’s why you couldn’t call StopMovie() in the game thread.

You have to call StopMovie() in Slate’s thread, which means you have to modify the plugin’s source and implementing your own logic code.

yeah, just leave it empty if you don’t want any text.

For example i do an shooter with different maps and different gamemodes how i can call the right image and tip from the array ? Hope it is understandable :stuck_out_tongue:

Cheers

Unfortunately, the plugin doesn’t support show a specific tip/image each level, it can only show randomly tip/image in the array. You have to modify the source and implement your own logic.

Thanks for your response!
I haven’t thought about calling the StopMovie from Slate thread! This is really a good idea, thanks again.

Can you get the UWorld from the Slate module? If so, the change might quite simple: instead of TArray of textures make it TMap where Key is FName of the level and value is the Texure. My guess :slight_smile:

Yes, you can access UWolrd via GWorld pointer (GetWolrd() didn’t work, I tried). This will print log the current level name in a Slate context:


UE_LOG(LogTemp, Warning, TEXT("Current Level Name: %s"), *GWorld->GetName());

I may add this option to Background settings in the next version.

This way you could easily add the support for exclude some levels :slight_smile:

Updated version 1.1 (14/09/2020):

Visit Github Tutorial to learn how to use it.

You made my day :p. Thanks for this delicious update , this is what i was waiting for :wink:

UE 4.23 and 4.24 are now supported

You’re welcome :wink:

i meant like change loading screen depending on what map it is loading

This is a super useful plugin. I love how it mimics lots of well known methods. Huge thanks

Tried out the plugin, but still see the throbber hang some times just before the map loads?

Maybe due to the map is too heavy

Thanks so much for this…looks very helpful.
Does anyone know any other reason that would make this not work in a project? I did everything in the tutorial on a blank project and it works fine. When I add it to my BP project in 4.25, the loading widget does not load. My levels are just loading like they did before. The plugin shows up in the Project Settings but nothing I adjust there is recognized.
-I’ve tried it from both from a build of my project as well as stand alone…same result…
-I’ve tried adjusting the loading screen display time to a large number and notice that the delay is not recognized. Levels load like before.
-I’ve also tried setting up two blank levels with the exact setup in the tutorial within my project with no result
-I’ve also tried disabling all other plugins, still wasn’t able to get it to work.
Thanks for any help!!