How do I use Construct 2's default pre-loader?

Before you ask, yes I am aware there are at least two tutorials about how to do this. What I'm trying to do should be very simple and yet following the instructions in those two tutorials has gotten me precisely nowhere. I must be doing something wrong and/or very stupid so I post to the forum for clarification.

All I want is to have the default Construct 2 pre-loader display when I run my "game" the very first time. This sounds simple enough. I have tried every combination I could think of from the tutorials to makes this work. I've set "Use loader layout" to "Yes" and "Loader style" to "Progress bar & logo." No pre-loader displayed and it went straight to my "game." This was the result no matter my setting for "First layout." I could set it to "(default)" or the name of my "game" layout called "Main" or I could create a brand new layout specifically for this purpose called "Preloader" and set it to that. I've set "Use loader layout" to "No" and "Loader style" to "Progress bar & logo." Same result. I've tried all the possible different values for "Loader style" and nothing appears. It always goes straight to my "game."

Any suggestions will be appreciated. I'm also going to attempt to upload a copy of the .capx file just in case any responder can find an obvious (or not-so-obvious) error in the .capx code itself.

Could it be your game is so small that it takes no time at all to load, so before you can see the preloader it's already completely in memory and running?

I thought of that so I temporarily disabled the Event on the Preloader sheet that would transfer to the Main sheet so I could see my manually-added progress bar and that never loads beyond 0%. If it really loads so fast, the bar should be at 100% pretty much right away shouldn't it?

If you add a "System: Wait 3 seconds" action in event 2 (before the "go to layout" action) in the Preloader event sheet, you actually do see the progress bar at 100 %, and 3 seconds after, there is the move to the next layout. (seen in preview mode when the "Preloader" layout is active and you execute preview from it)

So apparently it seems there isn't enough data at the time to have a "proper" loading time.

Make sure to also make "Preloader" the "Default layout" in your project properties.

At the moment it is set to default, and due to the order of the layouts, "Main" is executed as first/default layout of the project.

Interesting. I tried your recommendation, Kyatric, but alas no joy. It may work in Preview mode but it does not work on the main server. If I add the 3-second wait the bar remains empty for 3 seconds before moving to the Main view. Of course, you have no way of looking at it online since the server is used by the company I work for and they would be most put out if I started giving out login credentials to anyone.

Also, is there any way (even if only in Preview mode) to make the default Construct 2 pre-loader appear? I'm still not having any luck with this either. The "Preloader" sheet was an add in an attempt to accomplish what the pre-packaged pre-loader should be doing for me.

The regular C2 loader will display if there are data to load.

Try to add "massive" sprites to your project (in the "Main" layout likely) that take some time to download and you will see the regular loader appear (if you modify the project's property "Use loadout layer" and set it back to "No" of course)

Also be aware this will likely work on your first preview/loading. Unless you clear your cache or "force reloading" according to the browser you are using.

There used to be a background image on the Main sheet that was removed because, on the server, the Main sheet wouldn't load at all without refreshing the browser window the first time you entered (i.e. the only time the pre-loader should run at all). I managed to "fix" the problem by removing the background image. (No, I don't know why that "solved" the problem of needing to refresh the browser window the first time you enter the Main screen in order to view it properly.) How "massive" is massive for the purposes of "forcing" the pre-loader to appear?

A few megas I guess, depends on the bandwidth you have at disposal.

It sounds like you're lost in trying workarounds but the issue is actually somewhere. The fact that a background image requires a browser refresh is already a sign that something's wrong.

Was it an image you were loading from outside of the project or the texture was imported within C2/the project and available on export ?

You might want to be checking for errors on your exported project and see if there is any issue that the console rises that could give a clue about what's going on.

Is it really a necessity to display the loader screen ? I mean, it's just having the user wait instead of using the application. And also, if there's nothing to wait for since it's already downloaded, what is the point of adding some ?

Thanks for the info...but the plot thickens. So it seems the reason the pre-loader wasn't loading at all was because it was looking for the correct image in the wrong directory. This seems odd as I set the image directory in export to be identical to the relative-positioning of the directories on the server. To be both as specific and non-specific as possible if my sample website is located at server/directory1/directory2/page and the pre-loader image is located at server/images/constructImages/preloader.png, I am exporting the images directory as ../../images/constructImages. I am also uploading the preloader.png file to the server in that location. Yet, if I open the minified Javascript and do a search for preloader.png, I find that the Javascript thinks the image is in the root directory of the project. Naturally, Chrome's error catcher caught a 404 on the fact that server/directory1/directory2/preloader.png can't be found. But why would the minified Javascript completely ignore where I tell it the images for my "Main" sheet are to be found?

In case it matters, the specific error mentioned by Chrome when the new sheet does not load and has to be refreshed in order to appear is: Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state. I suspect this is caused by the 404 from looking for the image in the wrong directory.

I don't know where that "preloader.png" file is coming from.

Normally, when you export as "HTML5 website" all the images of your project are exported within the folder you indicated, except "loading-logo.png" and "icon-x.png" which are expected to be at the root with the JS file, since they are "favicons" and "utilities" images.

I don't know about a "preloader.png". And there's definitely no trace of such a texture in the capx you posted on top of this topic.

But as you've seen yourself, the 404 error, the "bad serving of resources" is causing part of the issue, and you can fix it by either making sure of your server or modifying the exported js file or just putting the files at root, where they are expected to be.

Just to clarify, the preloader image is indeed loading-logo.png. I wasn't sure if that was a special name so I made up a generic preloader.png filename specifically for the example in the post above.