How do I display Random Images for a loading screen?

Hello everyone who reads this.
I’m simply trying to figure out how to display images during a loading screen, BUT
I want them to appear RANDOMLY.

A Perfect Example is Mafia 3’s Loading Screen. Sample here - > Ps4 Mafia III infinite loading - YouTube

Those pictures are generated randomly every time the loading screen appears.
That is EXACTLY what I am trying to do.

No matinees, or cutscenes, or disabled player controllers so the video is displayed on a curved plane…
Just images in a randomized slideshow for a loading screen…

P.s. I cant believe this isnt a more popular topic…I cant find info on this anywhere…

Is your about issue creating a loading screen or displaying random images? These are 2 completely different topics.

Also, you say you want images and then you say you want a video which you refer to as a slideshow… Again, playing a video and displaying images is quite different.

Perhaps you could clarify what you need more precisely.

If you simply want to display a random image then make an array of your images and use the “random int in range” node to get a random int that you can feed into a “get” on your array of images. This will get you a random selected image from the array that you can then use to set the background image inside your widget.

assuming your using a empty level for your loading screen you just need to on begin play create loading screen widget. then as part of the widget have a image component. on construct do as others have said and set the image based on a random integer plugged into a get from an array. this solves your setting a background image issue. now to make it a slideshow you would do the same steps as before but you would also create a custom event that would be called each time you want to change the picture. connect the custom event at the same point as event construct then after setting the image add in a delay and then call the custom event. this will create a basic loop which changes the image each time its run.

Sorry, i didnt mean to make it confusing. I know how to create a loading screen already. I usually make them in empty worlds. I would like the loading screen to have background images tho. And i want the to appear randomly.

Thanks Steve, I roughly understand what you mean because i am still relatively new to unreal engine 4 amd making games in general. If you (or anyone else) could be kind enough to make an example Bluprint that would be very much appreciated :smiley: !

@ThompsonN13. Yes i am using an empty world for my loading screen…i kinda get what youre saying basically. Still new to the terminology but i understand. Maybe if i can get a visual representation tho? I am a visual and kinesthetic learner so its easier for me to understand with an image? If not it okay, thanks for replying everyone!

Thanks for the hep man and sorry for the late reply.
but I cant figure out how to “… and added 3 test images to it.”
I dont have any kind of Plus sign or anything like that allows me to add more images?
So I’m not sure where to go from there. Am I missing something?

Oh nevermind I figured out what was wrong …I’ll comment again though if I run into more problems.


@Steve SybrSyn

Hey man everything you made works great. Each time the screen loads it puts up a random image.
Now, the only thing Im missing, is how to make the loading screen act sort of like a “slideshow” and
show more than just one image during the loading sequence.

Thanks to anyone who helps!

No problem man, I tried to make your answer Correct but not too sure how to so I just put a thumbs up on your comments.

Also, I didn’t really understand what you said completely, but the Pictures

I uploaded
shows what I did, and it happened to work out :slight_smile:

Thanks man!

No problem! This is also not very hard to do, just gotta get a little creative with it.

First I would add another image but off the screen and up against the edge.

Then, in the designer tab you can make animations by adding tracks and adding keys over the timeline. I would make a “Slide Image” animation that moves the main image off the screen, and the hidden image onto the screen.

Then in the event graph I would simply setup a variable to keep track of time, and every X amount of seconds set the hidden image to something, then then play the animation. (Then you could set the main image to something, then play the animation in reverse.)

There is probably a million ways to do this, this is just one.

I hope this helps! All I ask is that you please mark my solution as correct if you are happy with it, so that others with a similar question can find the answer more easily :slight_smile: Thank you.

Or here’s another idea to simplify the animation part:

Just make a “Fade Animation” that fades the main image to black, then select a random image, then play the fade animation in reverse. (and do this every so many seconds.)

Sure, no problem. I made a very simple widget blueprint to demonstrate.

On the designer tab I basically dragged in an image from the palette to the canvas, named it “Loading Screen Image” set its anchors to fill the whole screen, and zeroed out the offsets. (You could improve this by adding a scale box to keep the image ratio).

Designer Graph:

Then in the event graph I created a array named “Background Images Array”, set its type to hold texture 2d, and added 3 test images to it. Then on Event construct I get the loading screen image and set its brush texture (basically its background image) to a random image in the array. The random int in range node needs to know a minimum and maximum int, so to get the maximum I use the length of the array -1 (because the array starts at 0), this way the random int will always be valid and within the range of images in your array.

Event Graph:

Whenever you create this widget a random image will be chosen and set, of course you could also create a custom event instead of using event construct and call that event whenever you want a random image.

I hope this helps! :slight_smile:

Awesome, I’m glad you got it working. I converted my comments to an answer so that you can mark it as answered now. At the beginning of my comments to the left is an up and down arrow to vote on answers and below that should be a button to mark as correct. Thanks!