Hi

To change the default bar colors and position you can use wade.setLoadingBar and you can show some static images while loading with wade.setLoadingImages

Loading images have a "loadingImage_class" class, that you can edit in style.css

For anything more custom than this, I would recommend creating the preloader as its own separate scene (say preloader.wsc). You would load preloader.wsc then your main scene.

A function that may come in handy if you decide to go that route is certainly wade.getLoadingPercentage

I hope this helps, let me know if you have any more questions

Thanks, that help a lot :)

Sometimes stille preloader bar will show original color, between modified bar.

What is the best place where to put wade.setLoadingBar  code? I put it first row in JS-file.

It depends on how / where you want to display the loading bar.

If you are manually loading images and other assets with calls to wade.loadImage() and similar functions, you'll want to call wade.setLoadingBar() before loading these assets. In this case, a good place would be the top of your App's load function, or generally just before calling wade.loadImage() the first time, but after WADE has been initialized (so not at the very top of the app.js file).

If you are loading scenes (which is probably more common), you can use the second parameter of wade.loadScene() to describe the loading bar that you want to display. In the default app.js file, the second parameter is simply set to true, meaning use the default colors, but you can pass in an object with colors and position as described in the documentation.

Thanks, that helped a lot :)

Hi 

Trying to add a splash screen instead of a progression bar, with setLoadingImages() but its not working

here is my code for the app.js

App = function()
{
    // this is where the WADE app is initialized
    wade.setLoadingImages('splash.jpg');
    
   	this.init = function()
	{
	   
       wade.loadScene('scene1.wsc',false,function()
        {
           
            // the scene has been loaded, do something here

        });
	};
};

Hi jota

You are right, if you do it that way it won't work when you preview it in the editor. I hadn't tought about that. However it should work when you export your project.

It's just that the preview window, in the editor, is not aware that that file exists because it's not part of any scene. Probably something that we can fix in a next version.

Having said that, I would recommend doing it in a slightly different way:

App = function()
{
    // this is where the WADE app is initialized
    this.init = function()
    {
        // load a splash screen, custom preloader, or anything you want to show while loading the game
        wade.loadScene('splash.wsc', false, function()
        {
            // load a scene
            wade.loadScene('scene1.wsc', false, function()
            {
                // the scene has been loaded, do something here
            });
        });
    };
};

It's just so you have more control: you load a light-weight scene first, then show it and load your main scene. The "splash.wsc" scene could be just a single image if you like, but could also have all sorts of nice animations and effects.

Hi

OK, i see, i should have tested the source code and see if it works or not!

in the mean time, i managed to acchiev using the second way, and i can't agree more with you, you can have more control on the splash screen.

For the second scene, instead of loadscene() i'm using preloadScene(), as the above code, so the first will unload:

 wade.preloadScene('menu.wsc', false, function() {
                
            },true);