Clarification on Web Player Loading Screen

Perhaps this has come up before, but I wasn’t able to find any posts addressing it specifically.

The custom loading screen is described in the documentation, but it seems incomplete / self-contradictory. While the documentation states the progressframeimage and progressbarimage should be the same width and height, and should both be RGB PNG images, the example cited seems to have images of different sizes.

Has anything been written up (or examples posted) that illustrates exactly how the frame image and bar image work together?

Also, regarding the statement: “The progress bar is drawn beneath the logo image.” What does “beneath” really mean? (What I’m getting at here is figuring out whether it is possible to work the progress bar into part of the logo. Is the spacing fixed? Relative to something? Random?)

I too would like clarification on this, i didnt understand what it means either, does the documentation refer to z ordering or along the y axis?

Is there anyway to test loading screens without uploading some large file because my connection runs too quick

Hey guys, hopefully I can help clear things up a bit:

“While the documentation states the progressframeimage and progressbarimage should be the same width and height, and should both be RGB PNG images, the example cited seems to have images of different sizes.”

How are you ascertaining that the progress bar and progress frame images are different sizes? The truth is that your progress bar images (the frame which serves as the background and the bar itself which is animated) should be the same width and height (IIRC the progress frame’s width is used for the bar display, then your progress bar image animates, starting a 0px width and going to [frame image width] pixels…

“Has anything been written up (or examples posted) that illustrates exactly how the frame image and bar image work together?”

That’s a bit of a WIP for me right now along with some updated “badges” (a new loader graphic that works on any bg color, a “Get Unity” badge and a “Made with Unity” badge). The basics of how they work together are:

  • the progress frame image is drawn at full size “below” the logo (read on for more info below)

  • the progress bar image is drawn on top of that but its width is clipped to reflect the current loading progress (so when the half the file has downloaded you’ll see half the progress bar image).

“Also, regarding the statement: “The progress bar is drawn beneath the logo image.” What does “beneath” really mean? (What I’m getting at here is figuring out whether it is possible to work the progress bar into part of the logo. Is the spacing fixed? Relative to something? Random?)”

“Beneath” as in below. This is 2D folks, you can look at the default loader and surmise what beneath means here. The top of your monitor is above, the bottom of your monitor is below, as such the progress bar is drawn “below” (as in down vertically not z-depth) the logo image. The space between the logo image and the progress bar display is a fixed distance AFAIK. With respect to including the progress bar in the logo image itself that may prove difficult due to needing to have the progress bar and frame images the same size and because the progress bar itself is drawn below the logo. To do that you’d have to incorporate the bottom part of your logo into the progress frame image itself, then do some careful work on the progress bar to make it look right.

“Is there anyway to test loading screens without uploading some large file because my connection runs too quick”

You’ll have to find a way to either (a) throttle your bandwidth or (b) post large enough files to see the screen. There’s no other way of forcing a test AFAIK.

Note: the cited docs page says “RGB 8-bits per channel PNG file”, it should say “RGBA 8-bits…”, you can, and maybe should, have alpha channel information in there. :slight_smile:

If that’s not clear enough then please do let me know as I’m taking notes for another round of doc updates on this section.

Not really. On Windows there are no GDI functions to handle alpha blending, so if you want everything to work everywhere, make the images without alpha channel, with a background color that matches the surrounding background color.

Thanks for the extra info. I assume the example images are in error. (myprgress.png seems to be 128x12 and myprogressframe.png is 1x12. That’s what Safari is claiming, at least.)

I’m still at a loss for what either “beneath” or “below” equate to. Yes, it is 2D and up and down, but I can’t tell how far below it is on different browsers and platforms. (In retrospect, I probably should have asked about the exact spacing, but at the time I was a bit perplexed by the writeup compared to the actual example images. :?) Is it truly a fixed pixel spacing for every browser and platform, a relative pixel spacing, up to the browser, etc. Could I incorporate that spacing into the logo image itself to set up a regular pattern, or will that last row be arbitrarilly displaced? It’s that “careful work on the progress bar” that I don’t know how to approach because I don’t know how to calculate the spacing.

(My apologies if the question comes off as tedious – it’s just always been hard to design and check across all the browser variations.)

i was having this problem, you have to make sure you have MyLogo, MyProgressBar and MyProgressFrame - it wont work unless you have all 3