What is the best way to puzzle together imported images to form a complete UI Screen?

Help and Feedback Art Design Support
#1

Hello UI Developers/Designers!

I have a set of images that were imported, for me to put together and complete the overall UI.

I have been able to put together 90% of the GUI (about 15-20 images in total).

The issue I’m having is that sometimes, when the player first makes the GUI appear (by pressing ‘B’ for example or clicking on a Shop Button), you can tell that some images load faster than others, so for a split second, you see a fragmented GUI until all images have been loaded completedly.

My question is, are there any technical solutions that I can apply here, to only show the GUI once all the images are loaded, and avoid users from seeing fragments appearing randomly?

I was under the impression that everything in StarterGui was preloaded, but it does not seem to be the case because I see this behavior. Is there a way to preload these images, or any other way to resolve this?

Thank you all!

1 Like
#2

Use a sprite sheet.
A single image for all parts of your UI.

#3

Or you can instantiate all the image objects, and not put them on screen until all of them have their Loaded property set to true.

Or you can preload all of these images before they are even used, by using ContentProvider:PreloadAsync.

#4

@BrisDeveloper - ah, had not thought this of solution. I think for my case, as this particular UI Screen will be my largest in regards to the images, and all others will be about 4-8 images, I will go with @anon66957764 solution in preloading them. Appreciate your suggestion.

@anon66957764 - yeah, I think I’ll go with the preloading. For some reason, I was under the impression that preloading was only for sounds :roll_eyes: . Thank y ou.

1 Like