Custom game Preloader
Janne

Hi,

Is there anyway to make totally custom preloader for the game?

How I can change default preloader bar color and size?

Thanks :)

All 7 Comments
Gio

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

 

Janne

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.

Gio

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.

Janne

Thanks, that helped a lot :)

jota

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

        });
	};
};

 

Gio

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.

jota

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

 

Post a reply
Add Attachment
Submit Reply
Login to Reply