Custom Animated Load Screen
marwyk June 8th, 2016

Hi There

I am creating my own custom load Screen for my wade game. I am not using the onlien wade editor. I load my load screen on inside the init function. I have a secondary function that loads my assets which I call once my laod screen has been set up. I have functions controlling teh visual updates on my laod screen. Then I use in my secondary function as I am loading assets callback function to update my load screen progress bar adn text. It does work but with one issue. 

Inside my load screen update function I use wade.getLoadingPercentage() to determine how much has been loaded. This is called by asset loading callbacks. I also output this to the console inside my load update function. It seems as if the progress however is counting down. SO the first output is 100% then going down as more assets are loaded and calling back to my update function.

Is there a different way of doing this? Or am I calling things in the incorrect order?

All 3 Comments
Gio June 8th, 2016

Hi

getLoadingPercentage() tells you how many assets have been successfully loaded vs how many you have requested with functions such as loadImage(), loadJson() etc.

As you request more assets, the percentage may decrease. To use getLoadingPercentage() properly, it has to be called after you have requested all your assets.

Also getLoadingPercentage() won't take into account assets that you preload with functions such as preloadImage(), preloadJson()  etc. And you do want to use preload if you have an animated load screen, because a call to loadImage for example would stop the wade app until the image is loaded - preloadImage wouldn't.

So I would suggest something like this:

var myImages = [];

var onImageLoaded = function()
{
     // update progress bar   
};

for (var i=0; i<myImages.length; i++)
{
    wade.preloadImage(myImages[i], onImageLoaded);
}

 

marwyk June 9th, 2016

Hi Gio

Thanks so much for your reply. I understand now why my load progress was going down instead of up. If I am using the proposed solution here above. And as you said that getLoadingPercentage() doesn't take into account preloaded assets. Is there a function I can then use to calculate the current precentage or progress of the preloaded assets? WIll I need to manually calulate the size of each asset and calculate that progress manually or is there a way I can get the preloaded asset progress from wade engine?

Thanks again

marwyk June 9th, 2016

Hi Gio

Managed to figure this out usign your method above. Thanks that was really awesome mate. I made 2 gloabl vars. one for counting all assets in my arrays. and one for tracking how many assets has finished loading which is updated in the loadScreenUpdate function. then just calculating percentage of assets loaded vs total assets to load and bang it is working perfectly without suspending the interface.

Thanks again for your help. It was awesome.

Post a reply
Add Attachment
Submit Reply
Login to Reply