Search in
Sort by:

Question Status:

Search help

  • Simple searches use one or more words. Separate the words with spaces (cat dog) to search cat,dog or both. Separate the words with plus signs (cat +dog) to search for items that may contain cat but must contain dog.
  • You can further refine your search on the search results page, where you can search by keywords, author, topic. These can be combined with each other. Examples
    • cat dog --matches anything with cat,dog or both
    • cat +dog --searches for cat +dog where dog is a mandatory term
    • cat -dog -- searches for cat excluding any result containing dog
    • [cats] —will restrict your search to results with topic named "cats"
    • [cats] [dogs] —will restrict your search to results with both topics, "cats", and "dogs"

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 - > https://www.youtube.com/watch?v=4794KXEVCjw

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..

Product Version: UE 4.20
more ▼

asked Oct 10 '18 at 07:10 AM in Using UE4

avatar image

13 1 4

avatar image Everynone Oct 10 '18 at 09:45 AM

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.

avatar image LabbWrenthツ Oct 12 '18 at 06:59 PM

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.

avatar image Steve SybrSyn Oct 12 '18 at 11:08 AM

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.

avatar image LabbWrenthツ Oct 12 '18 at 07:01 PM

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 :D !

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

2 answers: sort voted first

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: alt text

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: alt text

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! :)

annotation6.png (133.8 kB)
annotation5.png (220.4 kB)
more ▼

answered Oct 12 '18 at 10:21 PM

avatar image

Steve SybrSyn
1.5k 4 5 10

avatar image LabbWrenthツ Oct 19 '18 at 02:21 AM

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? alt text

bluprint.jpg (365.5 kB)
avatar image LabbWrenthツ Oct 19 '18 at 02:35 AM

Oh nevermind I figured out what was wrong ...I'll comment again though if I run into more problems. alt text

2d.jpg (29.9 kB)
avatar image LabbWrenthツ Oct 19 '18 at 02:51 AM

@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!

avatar image Steve SybrSyn Oct 19 '18 at 04:35 AM

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 :) Thank you.

avatar image Steve SybrSyn Oct 19 '18 at 04:44 AM

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.)

avatar image LabbWrenthツ Oct 19 '18 at 05:03 AM

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 Picturesalt text I uploaded shows what I did, and it happened to work out :)

Thanks man!

bp1.jpg (454.1 kB)
bp2.jpg (496.3 kB)
avatar image Steve SybrSyn Oct 19 '18 at 06:40 AM

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!

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

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.

more ▼

answered Oct 12 '18 at 01:36 PM

avatar image

10.1k 33 10 25

avatar image LabbWrenthツ Oct 12 '18 at 07:05 PM

@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!

(comments are locked)
10|2000 characters needed characters left
Viewable by all users
Your answer
toggle preview:

Up to 5 attachments (including images) can be used with a maximum of 5.2 MB each and 5.2 MB total.

Follow this question

Once you sign in you will be able to subscribe for any updates here

Answers to this question